Create an Elegant Patterned Web Design in Photoshop

Preview

Click on the image below to see it in full size.

Tutorial Resources

Step 1: Create a New Photoshop Document

We’ll start off by creating a new document (Cmd/Ctrl + N). Set the Width to 1000px and the Height to 950px. Make sure the Color Mode is set to RGB Color.

Double-click on the default Background layer and press Enter on the New Layer dialog window that opens, to unlock the Background layer.

Double-click on the Background layer again (which, by default, is renamed to "Layer 0" when you unlock it) to bring up the Layer Style dialog window. Our design will have a light gray background color, so we will give it a Color Overlay set to #EBEBEB.

Create a New Photoshop Document

After applying the color overlay, convert the layer to a smart object by right-clicking on it in the Layers Panel and choosing Convert to Smart Object from the menu that appears.

With the layer still the active layer, go to Filter > Noise > Add Noise. Set the Amount to 2% to give the background a subtle, grainy texture.

Create a New Photoshop Document

Step 2: Creating Custom Photoshop Patterns

We will create 3 different custom patterns for use in the web layout. To do so, we will need to create 3 new Photoshop documents.

Pattern 1

The first Photoshop document we will create will have a canvas size of 38x38px.

Creating Custom Photoshop Patterns

Use the Rectangular Marquee Tool (M)/Free Transform (Cmd/Ctrl + T) or Pencil Tool to create a diagonal pattern like the following image (the image below is zoomed in). Make sure the Background layer is transparent; and if not, just delete the default Background layer.

Select all (Cmd/Ctrl + A) and go to Edit > Define Pattern. Save your pattern.

Creating Custom Photoshop Patterns

Pattern 2

Next, we will create a 3x3px Photoshop document.

Creating Custom Photoshop Patterns

Use the Rectangular Marquee Tool (M) (you might want to set the Style option to Fixed Size, and then use a Width and Height of 1px), create three black squares as shown below. Again, make sure the background is transparent, select all (Cmd/Ctrl + A) and go to Edit > Define Pattern to save the pattern.

Creating Custom Photoshop Patterns

Pattern 3

Lastly, we will create a 130x20px Photoshop document for our third custom pattern.

Creating Custom Photoshop Patterns

Create a new layer (Cmd/Ctrl + Shift + N) and draw a circle using the Elliptical Marquee Tool with the Style option set to Fixed Size, with Width and Height at 20px.

Fill the circle with black by choosing #000000 as your Foreground Color and then pressing Option/Alt + Backspace (shortcut for filling a selection with your Foreground Color).

Go to Select > All to load a selection around the entire canvas, go to Layer > Align Layers To Selection > Horizontal Centers to position the circle at the center, and then go to Layer > Align Layers To Selection > Bottom Edges to locate the circle at the bottom of the canvas.

On a new layer, create another shape, this time a black rectangle, with the dimensions 20px (Width) and 120px (Height). Align this rectangle to the top of the canvas.

Save the artwork we drew as a pattern.

Creating Custom Photoshop Patterns

Step 3: Create the Header Section

Switch back to your main Photoshop document. Create a new layer and name it "header". Create a 130px high and 100% wide rectangular selection at the top of the canvas. Go to Edit > Fill to open the Fill dialog window. Under the Use option, choose Pattern and then select the third pattern we made from the previous step. Press OK to fill your rectangular selection with our pattern.

Create the Header Section

Now double-click on the "header" layer to bring up the Layer Style dialog window. Give this layer a Gradient Overlay (settings shown below).

Create the Header Section

Convert the "header" layer to a smart object and then rasterize it (right-click on the layer and choose Rasterize Layer from the menu that appears).

Go to Filter > Noise > Add Noise; use 2% for Amount. Duplicate the "header" layer (Cmd/Ctrl + J), and then rename the duplicate layer to "stripes-thin".

Cmd/Ctrl + click on the "stripes-thin" layer’s thumbnail to load a selection around it. Press Delete to remove the selected area. Fill the selected area with the second pattern we created in Step 2.

Create the Header Section

Duplicate the "header" layer again and rename it to "stripes-thick". This new layer should be above the "header" layer, but below the "stripes-thin" layer. Cmd/Ctrl + click on the layer to load a selection around its contents and then press Delete to remove the selected area. Keep your selection active. Fill the selected area with the thick stripes pattern (the first pattern we created in Step 2).

Select all 3 layers, press Cmd/Ctrl + G to place them in a layer group, and set the layer group’s Blend Mode to Overlay. Set the Opacity of the "stripes-thick" layer to 3% and set the Opacity of the "stripes-thin" layer to 15%.

Create the Header Section

Now download the free sample (or buy it, it’s not expensive and definitely worth it) of the Grunge Metal Scratches brushes. Install the brush pack. Create a new layer, set your Foreground Color to white (#FFFFFF), switch to the Brush Tool (B), select a few metal scratch brushes, and apply it on our header section. Then set the Opacity of the scratches layer to 15%.

Create the Header Section

Step 4: Add the Site Logo

First, we need Photoshop guides to help us make perfect alignments. We will add 2 vertical guides at 20px and 980px, and 1 horizontal guide at 65px. Go to View > New Guide to create the guides accurately.

Use the Horizontal Type Tool (T) to write out the name of the site. I used the free Lobster font at 50pt size, and the text, "Calaka".

Add the Site Logo/Name

Give the text layer a Drop Shadow (settings shown below).

Add the Site Logo/Name

Duplicate the text layer (Cmd/Ctrl + J), clear the layer style on the duplicated layer by right-clicking on it and choosing Clear Layer Style, then rasterize the layer.

Cmd/Ctrl + click on the layer’s thumbnail to load a selection around the text, then press Delete to remove the selected area. Fill the selected area with the second pattern we made in Step 2. Afterwards, switch to the Move Tool (V) to move the thin stripes pattern about 4px right and 4px down. Double-click on the layer to access the Layer Style dialog window, then give it a Color Overlay of white (#FFFFFF).

Add the Site Logo/Name

Create a new layer. Switch to the Brush Tool (B) (settings shown below) and click once to give the area where the logo is a white glow. Set the white glow layer’s Blend Mode to Overlay and reduce the Opacity to 40%.

Step 5: Create the Navigation Bar

For the navigation bar, we will have 4 links (feel free to add more): "Home", "About", "Portfolio", and "Contact". I used the (free) Bebas font with font size at 20pt. Write the links using the Horizontal Type Tool (T) on different text layers. Select all the text layers, and go to Layer > Align > Vertical Centers to align them in one row. Use the Move Tool (V) to position the links in such a way as to give them some whitespace between them.

Using the Rounded Rectangle Tool to create a background for the "Home" link; the rounded rectangle background will serve as a visual to denote what page the user is on.

Create the Navigation Bar

Give the rounded rectangle background a Gradient Overlay, Inner Glow and Stroke.

Gradient Overlay

Gradient Overlay

Stroke

Gradient Overlay

Inner Glow

Gradient Overlay

Afterwards, change the layer’s Blend Mode to Overlay and the Opacity to about 62%. I also added dark drop shadows on the links to give them some depth.

Gradient Overlay

Step 6: Create the Introduction Text

The header is complete. Next, we will create the introduction text section below the header. The user needs to know right away who he or she is dealing with, so let’s add one of those big introduction/greeting text. I used the Bebas font (same as in the navigation links) at 100pt for the text, and I just typed "Hey There" for the heading of the introduction text.

Create the Introduction Text

Give the text layer a black-to-dark-gray color gradient.

Create the Introduction Text

Rasterize the text layer then go to Filter > Noise > Add Noise (use 3% for the Amount to give it a subtle texture). Double-click on the "Hey There" layer again to bring up the Layer Style window, then give the layer a white drop shadow.

Create the Introduction Text

Duplicate the layer (Ctrl/Cmd + J), clear the layer style on the duplicated layer, then Cmd/Ctrl + click on the duplicated layer’s thumbnail to load a selection around our text. Press Delete to remove the selected area, and then fill the selected area with the thin stripes custom pattern that we created in Step 2. Drag the stripe layer below the "Hey There" layer, and move it 4px down and to the right to create a patterned drop shadow effect.

Create the Introduction Text

Write up some intro copy on the right of the "Hey There" heading. Give the intro copy a dark green color overlay (#797c26). To give it some depth, add a 1px drop shadow as well (settings shown below).

Create the Introduction Text

Step 7: Create an Elegant Divider

To separate the introduction from the main content, I’ve added a divider by using a 1px line. I used the Custom Shape Tool (U) set to the Hedera 2 custom shape (which comes with Photoshop by default) to place a nice flourish at the center of the divider.

Create an Elegant Divider

Step 8: Create the Portfolio Section

Next, we’ll work on the portfolio section of the layout. Add a heading for this section with the text "Portfolio", "Recent Additions to My Portfolio", or something along those lines. I used the Baskerville font at 27pt. I gave the text layer a white drop shadow, which you can copy off the intro text’s layer style.

After the text heading, we’ll add the images, which represent some of our recent work. The image dimensions are your choice; I chose 250x160px. I picked 6 images, and arranged them in 2 rows, and 3 columns.

Give the images an Outer Glow, Pattern Overlay, and Stroke.

Outer Glow

Create the Portfolio Section

Pattern Overlay

Use the thin stripes pattern we created in Step 2.

Create the Portfolio Section

Outer Glow

Create the Portfolio Section

Once done, this is what we end up with:

Create the Portfolio Section

If you like, you can also add a drop shadow to each image. Create a dark rectangle that’s the same size as the image on a new layer below it, apply a Gaussian Blur filter with a 6px Radius, and then use Transform > Distort to give the shadow a curve in the middle.

Create the Portfolio Section

Step 9: Create a Call to Action Button

Below the portfolio section, we’ll create a call to action button. In this case, I’ve added some copy ("Hire Me") for the button’s text and a green paint stroke that serves as the button’s shape using a brush from the High Quality Rough and Grungy Photoshop Brushes brush library.

Create a Call to Action Button

Step 10: Create the Footer

Finally: the footer section. Create a new layer and name it "footer divider". Use the Rectangular Marquee Tool (M) to select an area that’s 960px wide and about 10px high. Fill it with the thin stripe pattern and add some copy below it.

Create the Footer

Create the Footer

Tutorial Summary

We’re done! In this tutorial, we made an elegant web layout for a portfolio website. We created custom patterns and used them throughout the design. I showed you how to create patterned drop shadows, a nice and slick button for the navigation menu, and more.

Download Source Files

  • Great tut..!! Thanks for sharing..it’s very useful..

  • very easy to follow – nice finish.

  • Thanks for sharing this. I find it hard to make patterns for my web design. This one is really helpful since there are some parts that just needs a pattern.

  • Darryl

    Do you plan on doing a tutorial on how to code the site also?

  • This is really clean and elegant – thanks for the great tut!

  • Good work Eric! I like you design style and thank you for tutorial, some useful techniques covered.

  • There is a coding tutorial forthcoming for this one, to be published here on Design Instruct. It will include an HTML template that you can also download. It wasn’t mentioned in the tutorial, but thought that I should let you know this.

  • Yes. The HTML template is finished, the tutorial just has to be written up. The HTML template will be provided as a downloadable source package in the coding tutorial.

  • Good,hope to learn something new.

  • Sorry, but how can I put this is the blogger? Someone can help me, please?

  • You’d need to build a Blogger theme. Here is an overview on how to create a Blogger theme.

  • Ciwan

    Nice ! I can’t wait πŸ˜€

  • i have problem in coding… can you help me?
    i can’t coding it into html
    thanks for answer… πŸ™‚

  • Great design, picked up a couple of styling tips from this one. Thanks.

  • Elaine

    Is it possible to use GIMP for this?

  • If only I have the time, I would love to create Site Lay-outs in PSD and have them sold via themeforest..

  • wow, that would be great!…

  • I can help you code it, email me

  • I can help you on it. Email me

  • Thanks for the positive feedback! Jacob, could you possibly change my twitter handle to @erichoffman? Thanks πŸ™‚

  • Juan

    excellent tutorial Eric. Overall design has an ease to it. Switch some words and pics here and there it quickly becomes spa website.

  • Hey Eric, love the line work you included in this design. Very subtle but totally effective. Definitely going to integrate some of these fine Photoshop pattern techniques into my next project.

  • Jack

    When will the HTML coding tutorial be available? We are working on a school project and have to follow one of the tutorials from this site to create a website. Thanks so much.

  • Soon. Thanks for the positive feedback! Does anyone have a ‘tutorial-wish’, that I write a tutorial on a specific topic?

  • Elaine

    It would be great if you could this tutorial for GIMP as GIMP is open source and very useful for those who use Linux, e.g. Ubuntu. Suse, Mint, etc. I, myself am a Ubuntu user and uses GIMP for different things but would love to have this tutorial in GIMP style. Many thanks.

  • I do understand that a part of the community uses Gimp. From what I can see on the screenshots page (http://www.gimp.org/screenshots I have never used it) Gimp is similar to photoshop. It might not have all the features that PS has, as it is a free software. I’m sure you can achieve the final result of this tutorial in Gimp, I just prefer Photoshop. As the larger part of the community (I think) uses either Photoshop or Fireworks to design for the web, my tutorials are usually based on Adobe’s Creative Suite. If you search for ‘Gimp tutorials’ in Google you will find numerous results, for example this round up by noupe: http://www.noupe.com/gimp/30-exceptional-gimp-tutorials-and-resources.html πŸ˜‰

    Eric

  • Joe

    Nice tutorial and design, thx.

    How do I create that shadow? Using Transform > Distort I can move the corner handlers, when using the middle handler I can only move the whole side of the object. How to create the curve in the middle?

  • My bad πŸ˜‰ You have to duplicate it, and flip it (the copy) horizontally.

  • Nice Tutorials Thanks you anyway.

  • abegail

    wow this is so amazing hahah
    I love the finish product.
    God bless!

  • You have to use warp, and just drag the handles a little, it took me a minute to get that one -)

  • thnks for nice tutorial. Good job

  • Ah yeah, I did discover that, but forgot how… Sh*t happens πŸ˜‰

  • Great blog, really detailed post! I learn this step by step from this and get this effect finally. Thanks

  • Thank you for the tutorial – pretty easy to follow and cute look and feel ))

  • wow..Great blog and great tutorial.succes for u and thank you πŸ˜‰

  • new2Design

    GREAT TUTORIAL … Can’t wait for the PSD TO HTML tutorial… Great Job!!!!

  • For me I find it easier to use GIMP as it has simple tools. Almost every Photoshop tutorials can be reproduced using GIMP. you only need to know what tool to use.

    And thanks for the tutorial πŸ™‚

  • Hi
    Thanks for this good psd tutorial.
    However I cannot find the accompanying psd2html tutorial?
    It would be great if you would upload it soon.
    (NB-DesignInstruct site search not working for me in IE9-fine in FFox4).
    Nice site-best wishes

  • Patterns always made things more interesting for the eye, it really puts a “manual” perspective to the result. love it!And as a fan of the pen tool, is nice to see it used for more then filling blanks.
    Nice job.

  • I wait for the psd to html tutorial thanks a lot

  • Not sure about the hire me button but except that love this tutorial thanks

  • awsome tutorial. very helpful and easy to follow. simple and elegant steps.

  • Amanda

    How to make a HTML + CSS from this??!!!
    Could you PLEASSSSSSSSSSSE explain?

  • Brenda Malone

    Very nice. Even though my patterns did not exactly line up, I liked experimenting. Onward to the HTML and then WordPress with this one!

    Thanks!

  • Satishrao

    Where is HTML and CSS file man?

  • I have a question, I am currently a student taking a course on buisness and our assignemnt is to bascially start a buisness. So long as it is only for class and give you credit for the layout designs, may I use this layout for my presentation? The buisness I am doing is cheer based so it will be altered but I wanted to make sure it was alright.

    Respectfully,

    Krys

  • sekhar

    Great tut..!! Thanks for sharing..it’s very useful..

  • Jay

    In the tutorial you tell us at the end of step 3 to change the header group’s blending mode to “OVERLAY”. Well when we do that the entire header disappears. By default the blending mode is “Pass Through”. I’m assuming that “Pass Through” is what you meant, seeing as how the blending mode is actually “Pass Through” in the accompanying PSD.

  • hi……………v.good

  • husinludiono

    nice excellent work, congratz!

  • Jo

    Is the tutorial still forthcoming? Would really love to see the steps to make this a reality.
    Thank you.

  • Jo, unfortunately I was not able to finish the tutorial write-up of the HTML version. I over-promised, and under-delivered. I’m sorry.

  • Sahara

    The Baskerville font link doesn’t work. Could there be an alternative?

  • Great tutorial, clear and comprehensible steps, beautiful outcome. Thanks for posting this!

  • jiya qureshi

    I can’t do the second step of this tutorial,plz suggest me to do this ,i can’t make this pattren…