Featured Posts

Cute Adorable Newborn Baby Photography Babies are the gift of god. Especially Newborn baby appears with full of emotions and surprise for their parents. Every parent knows the value of newborn photography because they want to memories their...

Read more

Impressive Spring Photography that Must Energize Your... Every photographer are the host of mother nature. They don't miss any scope to focus the single beauty of all seasons. Spring is one of the favorite season to photographers because flowers are blooming,...

Read more

Most Famous Fine Art Photographers and Their Immortal... Today we are presenting the second and final part of Most Famous Fine Art Photographers and Their Immortal Art Photography post. In this post we are introducing world's most famous fine art photographers...

Read more

Most Famous Fine Art Photographers and Their Immortal... Fine art Photography also known also as “artistic photography” refers the expression of artist's perceptions and emotions and to share them with others though the art of photography. It is the best...

Read more

Most Famous Portrait Photographers and Their Great... Everyone can take photos but only some are considered as famous photographers. Take a creative & outstanding portrait photographs is not an easy task. A famous portrait photographer can combine...

Read more

clipping path

Follow us

on Twitter

ClippingDesign.com

Clipping Design

is an Outsourcing

Clipping Path ,

Image Masking &

Graphics Design

Service Provider.

Image editing

services at very

low prices. Visit

our website: ClippingDesign.com

Design a Stylish Web Layout Using Photoshop

Category : Photoshop Tutorials, Web Design

Design a Stylish Web Layout Using Photoshop

Today i would like to share how to design an innovative blog theme using photoshop. In this tutorial we will lean why scratch is an essential skill for designers to learn and will become increasingly important as wordpress continues to become the web publishing tool for simple transform background into a stylish effect. I think it may help you to create your own web site or blog more stylish. So, let’s have a try…

Step 1:


Let’s get started, first create a new blank document and draw some guides to delimite your design, 960px width is just fine, then increase your canvas size to see how it looks on wider resolutions, maybe to 1200-1260px. Do the same with the Height, start with 800px then increase the height to 1000px at least.

Design a Stylish Web Layout Using Photoshop

Step 2:


Now paste this image as a background, re-size and place it in the bottom of our design. Create a new layer above the image then select two tones of purple-blue as foreground and background colors then go to Filter > Render > Clouds. Next apply “City” layer a Gradient Layer Mask to merge it with the clouds. Then put a black background behind the merged image and to finish the main background add another Gradient Layer Mask to the resultant image.

Design a Stylish Web Layout Using Photoshop

Design a Stylish Web Layout Using Photoshop

Design a Stylish Web Layout Using Photoshop

Design a Stylish Web Layout Using Photoshop

Step 3:


For the header background, draw a Rounded corner rectangle above all the layers, then apply to it a Gradient overlay effect, use the colors shown below.

Design a Stylish Web Layout Using Photoshop

[ad#AdBrite]

Step 4:


Now paste this image above the rectangle, change the paper layer Blending Mode to Vivid Light and Opacity to 50%. Command (Ctrl) + Click the rectangle layer and by going to Select > Modify > Contract, contract the selection a little bit, hot Command (Ctrl) + Shift + I to inverse the selection and delete all the extra paper. You can also add some layer effects to the rounded rectangle as an Outer Glow or maybe a Stroke effect, it’s up to you.

Design a Stylish Web Layout Using Photoshop

Step 5:


Let’s add the logo; I’m adding the text “Generation X” (Rockwell typeface) because I’m a huge fan of 90′s culture. Then apply to each text layer the Following layer effects, just notice the Stroke color should change depending the text color.

Design a Stylish Web Layout Using Photoshop

Step 6:


Now draw a rounded rectangle as the sidebar background, set the Fill value to 75% and apply a Stroke effect on it.

Design a Stylish Web Layout Using Photoshop

Step 7:

Repeat the previous step with the content background. At this point we have the basic layout.

Design a Stylish Web Layout Using Photoshop

Step 8:

Now let’s add some graphic details and support images, first paste this picture of a nice cassette avobe all the layers of the design, I added some text on it using my tablet. Then select the tiny transparent plastic in the middle of the cassette, cut it and paste it just in the same place but dow its opacity to 50% or 60%. Then, merge both images and place the cassette just above the sidebar.

Design a Stylish Web Layout Using Photoshop

Step 9:

This is a quick trick to create shadows, duplicate the object and put it behind the original, press Command (Ctrl) + U and set the Lightness value to -100, then apply a Gaussian Blur to the copy.

Design a Stylish Web Layout Using Photoshop

Step 10:

Paste this paper image and put it below the header background on layers palette, this will be our navigation bar. Use the Lasso tool to extract the image.

Design a Stylish Web Layout Using Photoshop

Step 11:

Create a new layer above the paper, make an elliptical selection and fill it with black, then apply to it a Gaussian Blur filter and down the layer Opacity to 75%.

Design a Stylish Web Layout Using Photoshop

[ad#AdBrite]

Step 12:

Duplicate the paper layer and rotate it a little bit, the apply to it a drop shadow to make it pop. Then you can add the text of your links, you can use a grunge or handwritten typeface.

Design a Stylish Web Layout Using Photoshop

Step 13:

Now at the bottom of our sidebar add the RSS icon, I’m using one of these icons. Also add some related text, using “Rockwell condensed” typeface.

Design a Stylish Web Layout Using Photoshop

Step 14:

Following just add the sidebar text; I’m keeping simple this time. “Rockwell” for the titles and “Georgia” for the links.

Design a Stylish Web Layout Using Photoshop

Step 15:

Then add some posts, Combine different typefaces. I’m using “Georgia” for the titles, and “Arial” for the content, also added a tiny paper sheet to put the comments over, and a support image for each post (2px white border).

Also I’m adding the copyright information in this step.

Design a Stylish Web Layout Using Photoshop

Step 16:

Now duplicate the technique of header’s background but this time as a footer background image.

Design a Stylish Web Layout Using Photoshop

Step 17:

Add the footer’s text, I’m adding two containers for Recent Posts and Pages.

Design a Stylish Web Layout Using Photoshop

Step 18:

Just if you want to, add more graphic details on the footer, like this piece of paper containing a simple slogaDesign a Stylish Web Layout Using Photoshop

[ad#AdBrite]

Final Result:

Design a Stylish Web Layout Using Photoshop

Hope you can learn something new from this tutorial.

I feel really glad if you give me feedback through comment below. Soon i am going to show more interesting & innovative tutorials so please keep visit our blog. That’s for now.

Have fun!

For clipping path service, image masking service or design support please contact ClippingDesign.com.

Thank you…  🙂

Reference: designreviver

Share

Post a comment

*