Photoshop Tutorial for Web Layout Design

My latest assignment in my Web Design program was to find a tutorial on creating a web design layout, complete the tutorial and post the finished product. I selected this tutorial at psd tuts+  because I liked the simplicity of the design, and the background caught my eye.
I was a little worried when I read the difficulty was “intermediate” but decided to give it a try anyway. After applying a gradient to the background, I downloaded a watercolor image from Gomedia’s Arsenal. I really like this image, and it was free! Next, I inverted the color on the image, and that gave it the cool hues it has now. Next, I erased part of the image to get the same look as the example.  This was my favorite part of the tutorial.  I am sure I will use this technique in other design layouts.
The one step I had a little trouble with was applying the radial gradients in step 6. I wasn’t quite sure how to get the exact same effect as the example, but I think it turned out well. Next, I added text and text boxes, along with some dummy text. A few enhancements were made to make the text stand out nicely.
That was it! I enjoyed doing this tutorial. I thought the author did a great job of explaining the steps and giving visual examples on what to do. This has encouraged me to give some other tutorials a try.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: