Design Clean and Colorful Web Layout – Photoshop Tutorial
Step 34: Create a featured image
Create a new group (Layer > New > Group) and name it “image.” Put a small image in this group and name the layer “image.” Double-click on this layer to open the Layer Style window and use the settings from the following image.
Step 35: Add a shadow to your image
Go to Layer > Layer Style > Create Layer. This will create a new layer beneath the original one with the style of that original layer. Now go to Layer > Layer Mask > Reveal All, select the Gradient Tool (G) and draw a black to transparent gradient from the bottom to the middle of your small image. Name this layer “shadow.”
Step 36: Add some text
Create a new group (Layer > New > Group), select the Type Tool (T) and add some text. Name this group “text.”
Step 37: Create a white rectangle
Create a new group and name it “content.” Create another group inside this one and name it “shadows.” Select the Rectangle Tool (U) and create a rectangle like I did using the white color. Name this layer “white shape” and set its opacity to 90%.
Step 38: Add a top shadow
Ctrl-click on the vector mask of the “white shape” layer to select it. Then create a new layer, select the Gradient Tool (G) and draw a gradient #8f8f8f to transparent like I did. Set the opacity of this layer to 50% and name it “top shadow.” Then select the Move Tool (V) and hit the down arrow on your keyboard two times.
Step 39: Create two vertical shadows
Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like I did. Then use the Gradient Tool (G) to draw a gradient #8f8f8f to transparent like I did. Add a mask to this layer and use a big black soft brush to mask the center of the shadow. Set the opacity of this layer to 30% and name it “vertical shadow 1.” Duplicate this layer (Ctrl+J), name the new layer “vertical shadow 2″ and move it to the right.
Step 40: Create a horizontal line
Select the Line Tool (U) and create a horizontal like with the weight of 1 px and the color #aebcc7. Name this layer “line.”
Step 41: Add some text
Select the Type Tool (T) and write the content of your layout. You can also use images and anything else you want.
Step 42: Create a gradient for the footer
Create a new group and name it “footer.” Create a new layer inside this group, select the Rectangular Marquee Tool (M) and create a selection like I did. Then set the foreground color to #555555, select a big soft brush and paint with it over the top edge of the selection. Set the opacity of this layer to 50% and name it “gradient.”
Step 43: Add a line with the height of 1px to the footer
Create a new layer, select the Single Row Marquee Tool and click on your document. Fill the selection with white and hit Ctrl+D to deselect. Go to Layer > Layer Mask > Reveal All, select a big black soft brush and mask this layer like I did. Take a look at the following image for reference. Set the opacity of this layer to 15% and name it “line.”
Step 44: Add some text to your footer
Select the Type Tool (T) and add some text for your footer.
Final Result
-:- Download PSD -:-
Awesome very well Detail tutorial
Thanks so much for posting & sharing it
keep up good work
God bless you
Can I get a email with more info about this please!
aha come on…
Great post, I bet a lot of work and research went into this article.
I really liked your blog! nice
Very easy to follow and tidy tutorial!!!
Loved it
Great informative tutorials. Nice effort!!!
thanks
Thanks.
its wonderful post and great information.
I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the fantastic work Look forward to reading more from you in the future.
Terrific post, this is very similar to a site that I have. Please check it out sometime and feel free to leave me a comenet on it and tell me what you think. I’m always looking for feedback.
I have read a few of the articles on your website now, and I really like your style of blogging. I added it to my favorites website list and will be checking back soon. Please check out my site as well and let me know what you think.
This is a exceptional piece of writing, I discovered your web site researching bing for a similar subject and arrived to this. I couldnt get to much additional material on this piece of content, so it was nice to locate this one. I will end up being returning to check out some other articles that you have another time.
This is a very intriguing post, I was looking for this information. Just so you know I discovered your weblog when I was checking for blogs like mine, so please check out my site sometime and leave me a comment to let me know what you think.
Fantastic site, where did you come up with the info in this blog? Im glad I found it though, ill be checking back soon to see what other articles you have.
I thought it was going to be some boring old site, but I’m glad I visited. I will post a link to this page on my blog. I believe my visitors will find that very useful.
you may carry on visiting this site you will be able to find some more quality information about more informative articles.
I wanted to thank you for this great read!!
Very good piece of content, this is very similar to a site that I have. Please check it out sometime and feel free to leave me a comenet on it and tell me what you think. I’m always looking for feedback.
Exceptional site, where did you come up with the knowledge in this piece of writing? I’m pleased I found it though, ill be checking back soon to see what other articles you have.
nice work