Hi everybody! This is my first tutorial on this awesome new site of the tuts+ family. This time I've got for you a very detailed tutorial about creating a single page illustrative webdesign from scratch with Photoshop. You will learn how to build a layout for a single page webdesign, create illustrative backgrounds with a particular style, design a floating navigation bar, working with text having CSS3 in mind, and more... ready to start?
A Few Live Examples
Lately, there have been a few great "vertically scrolling" sites popping up around the net. Before diving in, let's check a few of them out to see what the final effect will look like. These will help put the rest of the tutorial in context:
Before Getting Started
This tutorial requires some basic knowledge of the Photoshop Tools, I'll skip some basic explanations like how to create a Layer Mask, how to add a Guide, or how to add a Text Layer.
My design is based on several examples all around the web of a very trendy style, a vertical panoramic vector landscape as a background and clean text areas showing the important information. Imagine this site as a single page design as a portfolio website of a creative designer or an illustrator.
We won't be going into the coding portion of this project because we'll be focusing on the various illustration and layout techniques, but it's based on the popular jQuery.ScrollTo plugin, which you can check out for tips of coding this type of design.
Let’s get it started, the assets for this tutorial are:
- Star Brushes of jen-ni
- BonvenoCF Typeface by More Barry Schwartz Fonts
- Social Network Icon Pack by Komodo Media
Step 1: Getting Started
First, we need to set up the work document, I'm basing this layout on the 12 columns 960 Grid System that you can download for free, otherwise, just create a document 960px with and make draw some Guides to the left and right borders.
As a common practice on webdesign works we need to increase this area to see how it looks on higher resolutions, but we need to set up an standard size for the height as well, this height should be the minimal visible area (above the fold) since we are designing a single page layout. Go to Image > Canvas size and set the width to 1420px and the Height to 750px.
Step 2 - Delimit Sections
Next, use a temporal graphic to divide the document in sections, using the Rectangle Tool draw a rectangle from top to bottom (750px height). Then increase the Canvas Size a lot (you can use the Crop Tool here).
Step 3 - Delimit Sections
Draw a Guide at the bottom of Rectangle and duplicate it, then match the copy's top side with the first rectangle's bottom side and add a Guide at the bottom of the second rectangle, repeat this process as many times as sections do you have on the layout, in this case we need 4: Home, About us, Portfolio and Contact us. Then, using the Crop tool delete the extra canvas. You should have a canvas of around 3000px height with 4 sections, each one of 750px. Delete the guiding rectangles and move forward.
Step 4 - Sky Background
Using the Rectangle Tool draw a rectangle from the top to the bottom of the third section. then add a Gradient Overlay Layer Style using the following Colors: #FFFFFF #6E98C8 #2A3256 and #0C0E1A, set the Angle to 90° (it's very important since this gradient background will be sliced to be repeated on the x axis) and hit OK.
Step 5 - Grass Background
Draw a Rectangle on the fourth section of the document, then add a Layer Style > Gradient Overlay using these colors: #486302 #64A500 and #BEDC40. As well as the previous step, set the Angle to 90°.
Illustrations: The Rocket
Step 6 - Rocket Body
Now we will start designing the additional graphic elements of the background. The first element we need to draw is a space rocket, which be placed on the section one of the design. For this create a new document (400px width and 600px height) and save it with a descriptive name like "rocket", add a dark blue background #181C35.
Next, suing the Pen Tool, draw a white filled shape similar to the image below, then duplicate it and go to Edit > Transform > Flip horizontal and place the copy exactly next to the original, select both layers and merge them by pressing Command / Control + E. This will be the Rocket's Body.
Now add a Layer Style > Gradient Overlay to the "Rocket body" layer using the following colors: #0B85DB, #014C83, #2396EF, #004B82 and #1477B8, set the Angle to 0° and hit OK. Finally rasterize the gradient by merging the "Rocket body" layer with a new blank layer.
Step 7 - Stripes
Create three yellow ellipses using the Ellipse Tool and place them as shows the image below. Rasterize them (Right click on the layer miniature and select Rasterize). Then, hold the Command / Ctrl key and click over an Ellipse miniature on the Layers Panel to automatically select the layer's shape and using the Cursors move the selection some pixels above, then hit the Delete key, this process will create a nice curved stripe. repeat the actions with the other ellipses.
Step 8 - More stripes
Duplicate each stripe and place it some pixels above the original. Then Select all the stripes and merge them on a layer named "Stripes". Then command / Ctrl on the "Rocket Body" to select the Rocket shape, then go to Select > Modify > Expand and set 2 pixels, then Invert the Selection by pressing Command/Ctrl + Shift + I. Next on the Layers Panel click on the "Stripes" layer and delete the selection.
Step 9 - Stripe's Style
Select the "Stripes" layer and add a Layer Style > Gradient Overlay using the following Colors: #EFAC00, #BD8401, #C39700, #FFCF2C, #C39700, #BD8401 and #EFAC00 Angle 0°. And a subtle Black Drop Shadow (Size: 2px).
Step 10 - Rocket Tip
Select the "Rocket Body" layer, then using the Elliptical Marquee Tool select the tip of the rocket as shows the image below, copy the selection and paste it above the rocket layer and below the stripes, name the new layer "Tip". Copy the Stripes' Layer style and paste the Style to the "Tip".
Step 11 - Rocket Window
Using the Ellipse Tool draw an ellipse on the left side of the rocket name it "Window", then add a Layer Style > Gradient Overlay using the following colors: #777777, #E8E8E8, #ADADAD, #FEFEFE, #C8C8C8 and Angle: 0°.
Then duplicate the "Window" layer and make it a little bit smaller, place the copy right over the original. Since the ellipse is a vector mask, change the color of its background to: #00CCFF and double click on the Gradient Overlay Layer Style, on the dialog change its Blending Mode to Screen. Finally Add a subtle Inner Shadow to "Window Copy" layer and if you want to a Drop Shadow to the "Window" layer.
Step 12 - Rocket Base
Let's add the rocket base, first put all the Rocket related layers (body, tip, stripes and window) and merge them. Using the Pen Tool draw three shapes following the example of the image below, tho of them above the new "Body" layer and one below. Use this fill color for the shapes: #FBCC28.
Step 13 - Volume to the base
Add three new shapes depicting volume to the rocket base. Follow the image below, and use this fill color: #AB8204.
Step 14
Apply the a Gradient Overlay Layer Style to the pedestals, use the following colors: #FACB2, #FFF393, #FFD952 and #D4A500, set the angle to 90°, try to get so em thing like the image below.
Step 15 - Final Details
Merge all the layers (I always left a copy of the vector layers in a copy just in case). Create an ellipse over the rocket filled with this color: #DFF8FF, then go to Filter > Blur > Gaussian Blur and set the Radius to 23 or 24 pixels, name the layer "Light". Command / Ctrl - Click over the Rocket's Body layer to select its shape, Command/Ctrl + Shift + I to invert the selection and delete the selection from the "Light" layer. Finally change its Blending Mode to Soft Light.
Step 16 - Place the rocket on the stage
Merge all the Rocket layers and copy them. Paste the Rocket on the right side of the section 1 of our main document.
Step 17 - Rocket fire
you can do this step either on the rocket document or in the main one. Create two ellipses using the Ellipse Tool one smaller than the other as shows the image below, use the following colors: #FF8A02, #FFC801. Merge both layers into a new layer named "Fire". Then place it just behind the "Rocket" layer. Then apply a 9 pixels Gaussian blur and using the Free Transform Controls distort the fire a little bit making it narrower.
Stars Background
Step 18 - Create a custom Brush Preset
Open the Stars Brushes from the presets, then open the Brush Presets Panel (F5).
Under Brush Tip Shape select the 50px star and change its size to 25px, Check the Spacing checkbox and set the value to 300%.
Under Scattering set Scatter to 1000% Control: Pen Pressure (in case you have a graphics tablet) Count: 1 and Count Jitter: 100%.
On Color Dynamics, set the Foreground / Background Jitter to 100%.
Finally, set the foreground color to: #E1F5FF and the Background color to #FFFFFF, and paint on a new layer just above the "Sky" layer. You can reduce the opacity of the "Stars" layer to make them a little bit less intense.
Hot Air Balloon
Step 19 - Creating the basic shapes
The second additional illustration of our design will me a nice hot air balloon. Create a new Document named "Balloon" 400px x 600px and fill it with a blue #476492 background layer. Then, using the Pen Tool create several shapes like daisy's petals to build the balloon shape.
Step 20 - Balloon's basket
Using the Peen Tool draw a shape similar like the first screenshot of the image below, then using the Rectangle Tool draw two diagonal bars next to it and a crossbar. With the Pen Tool draw a very simple basket and with the Ellipse Tool give it a little depth.
Step 21 - Coloring the balloon
Now, change the background color of the Balloon layers to #FFE305 #D00000 and #0162A7. Then select the middle section and apply a Layer Style > Gradient Overlay using a Reflected Black - White gradient. Change the Gradient Blending Mode to Overlay and play with the angle to make it look a little bit bump. Then apply an Inner Shadow Style, using the values shown on the image below, the important is the opacity, it should be around 50%. Copy the layer style and apply it to all the other shapes, in case the shade doesn't look good after apply it, double click on the Gradient Overlay effect and click and drag over the shade to move it.
Step 22 - Coloring the basket.
Change the color of the basket related layers to brown: #874E21 and paste the previous step's layer style. For the internal ellipse use a darker color: #291700. And that's it! merge all the layers and use Dodge / Burn Tools to add some shadows and lights.
Step 23 - Place the balloons
Copy the balloon and paste two copies on the second section of our document, one bigger than the other. Select the smaller balloon and using the Lasso Tool make a selection of the actual balloon. Then press Command + U to adjust Hue Saturation values and change them as you want. Plus you can add some depth of field by blurring the second balloon a little bit.
Clouds
Step 24 - Draw the Clouds
Moving forward with the background design it's time to add some clouds to our sky. Create a new document named "Clouds" any size you want, and fill it with the same background color than "balloon" file: #486493. Then using the Pen Tool draw some white clouds as shows the image below.
Step 25 - Clouds Styles
Apply to the clouds layers a Layer Style > Gradient Overlay using these Colors: #D1D7E7 - #FFFFFF Angle: 0 degrees, and an Inner Glow color: #BBD5D6 Blend Mode: Normal, the size depends on the size of your clouds, I'm using 6px.
Add some clouds on the section 2 of our main document, behind the balloons, if you want to add some deep to the landscape blur some distant clouds a little bit.
Step 26 - More Clouds
Add more clouds next to the horizon on the section 3 of the main document, change the colors a little bit, for the Inner Glow use #FFFFFF and for the Gradient Overlay: #DBE1F1 - #FFFFFF. You should get something like the image below.
Step 27 - Time to take a break
We just finished the sky, remember do not put important elements next to the border and keep all the layers organized. We are at half way, it's a good time to get a coffee!
Mountains
Step 28
Let's add the mountains, this time I'' work right on the main document, using the Pen Tool draw a mountain-like shape as shown on the image below. Then apply a Layer Style > Gradient Overlay using the following colors: #557200 - #88B707 and set the Angle as better fits for you, in this case 99 degrees. Then duplicate the mountain, place it behind the first mountain and make it a little big bigger and change the colors of its Gradient Overlay to: #415800 - #8AB00B to make it a little bit darker.
Step 29 - Light and Shadows
Create a new layer above the Big mountain and name it "Shadows" using a big soft Brush and this color: #527300 paint some shadows. Then Command / Ctrl- Click on the mountain Layer to create a selection around it, then press Command / Ctrl + Shift + I to invert the selection and delete the selection from "Shadows" layer. Repeat the process creating a layer named "Lights" using a light green colored Brush to add some lights to the mountains.
Trees
Step 30 - Draw the trees
Using the Pen Tool, draw the tree trunk and some branches. Then on a new layer draw an stylized shape with the leaves. On the trunk layer add a Gradient Overlay Layer Style using these colors: #574E00, #957800 the angle depends a lot on your shape. For the leaves use the following colors for the Gradient Overlay: #577E01, #8DDA00. Then add more leaves on small bushes in front of the branches.
Create several different shapes and if you want add a little blurred dark ellipse on the base of each tree. Rasterize each tree and move forward.
Step 31 - Place the trees on the background
Place the trees over the mountains and over the green field on the sections 3 and 4 of our main document, make the trees at the bottom of the image larger than he ones next to the mountains to create a depth of field illusion, besides blur the smallest trees a little bit.
Finally use the Dodge / Burn Tools on the biggest trees to increase the intensity of the shadows.
Step 32 - Finishing the Background
At this point you've got a nice illustrative background design. Put all the background related layers into a folder named "Background".
Page Title (Logo)
Step 33 - Page Title
Let's add the page title, using the Type Tool add two text layers, on the first type "Web design" and on the second: "Tutsplus" (Of course you can replace these words with your very owns). Then on the Character Panel set the Typeface to Futura Book(you can use any other) For the first line set the size to 42pt, Kerning: 0pt, mark the All Caps option and set the Foreground color to White #FFFFFF. For the Second Line I'm using Futura Book as well, Size 18pt and 1250pt of Kerning, set the foreground color to #FFD001 and mark the All Caps option as well.
Step 34 - Page Title details
Using the Line Tool, draw a blue line (#9AA4D9), add a white Outer Glow effect and rasterize the line (Merge it with a black layer above or below it), Then apply a Layer Mask > Hide All and fill the mask with a Black/White reflected gradient.
Ensure the Title is near the second guide from the left, which means 10 pixels to the right of the 960 left border.
Navigation Bar
Step 35 - Navigation Background
Using the Rectangle Tool draw a narrow White rectangle at the top-right angle of the section 1, set the Fill value to 25%, then add a 1pixel white Stroke, Opacity: 50%. Rasterize the layer by merging it whit a black layer above or below, add a Layer Mask > Hide All... and fill it whit a reflected Black / White Gradient, try to get something like the bottom of the image below.
Step 36 - Navigation Links
CSS3 allow us to embed fonts on our website, there are some free font directories which provide free typefaces ready to use on our design, we will take hand of the beautiful typeface named: "Bonveno". Type the navigation links using Bonveno, Size: 12pt, All Caps and Foreground: White. Select the HOME link and highlight it with yellow #FFCF00. Add a instructive text: "Jump to" using bonveno, size 8px and gray foreground.
Step 37 - Nav Bar Details
In order to have a nicer background, duplicate the "Nav" layer, and move the copy a couple of pixels at the bottom left. Finally, change each layer's Opacity to 50%. Put all the navigation related layers on a Folder named "Navigation".
Step 38 - Adding effects to the Title
In order to give more emphasis to the site name, select the big word and apply a subtle Gradient Overlay (#C5C5C5 - #FFFFFF) and a small Drop Shadow (Distance and Size 2 px), Apply the small Drop Shadow to the second line as well.
Welcome Text
Step 39 - Add the Title
Let's add the welcome text, we will start adding the title. Since the titles should be plain text, use Bonveno typeface and yellow foreground (#FFCF00). Apply the Drop Shadow shown on the previous step. Don't hesitate using several guides to mark ups your content, in this case I'm creating guides 10 px above and below the welcome title to help me to add the paragraph text and its background.
Step 40 - Welcome Box background
Using the Rectangle Tool to draw a box as a background for the welcome text, use this color #0E1122 for the box and down its Fill to 25%. Besides add a 1px Stroke using this color #4E6575.
Step 41 - Style the text background
Rasterize the box (merge it with a blank layer), then apply a Layer Mask and fill it with a Black - White Gradient. You can use a big soft brush and paint over the Layer Mask to hide some areas to make the fade look softer. Finally, just like with the navigation bad, duplicate the box background and move it a few pixels bottom-left to create a style similar to the one shown at the bottom of the image below.
Step 42 - Add the welcome text
Using the Type Tool, draw a box of Paragraph Text and fill it with Lipsum text, use "Lucida Sans - Regular" as font face, Size 11px, Leading: 19pt, and Foreground Color: White. finally, since CSS3 allow us to add this kind of details add a 2px Black Drop Shadow to the paragraph of text.
Step 43 - Social Media Links
Use the same instructions shown on the Steps 40 and 41 to create a background but smaller this time. Open the Social Network Icons from the assets and paste the following icons: RSS, Twitter and Facebook, feel free to add the icons of your preference. Finally, using "Bonveno" typeface write the word "Network" as a title and use "Helvetica" (Arial works fine as well) to add some white numbers of Subscribers, Followers and Likes.
Step 44 - Reviewing welcome page
At this point we have the section 1 which is the actual welcome page (or homepage) finished. It's a good time to review everything is in a proper position, try to keep balance with the whites pace e.g. the space between the left border and the welcome text and the right border with the network icons are the same. Working with white space (which of course is not literally "white") is really complicated, reject the impulse of filling out each little space with an image or an icon, often a wide and clear background is more catching than a thousand of shiny elements.
Beside ensure all your layers are organized, at the bottom of the image below is a Folders structure which I made. One of the more important folders here is "Nav", I'm planning to create a floating navigation using JavaScript, but for mock up purposes we will have to duplicate it a few times to see how the other "pages" or sections looks.
About Us
Step 45 - About us section
For this section, basically repeat the process of the Steps 39-42, but place the layers on the right side of the second section changing the title to "About Us". At this point I planned to add a tabbed pane feature, but change the tabs positions to the bottom, using "Bonveno" typeface write the tabs below the about us paragraph. use this foreground color for the tabs: #C3DFFF and White for the selected tab. Finally, using the Polygon Tool draw a Sky Blue #D5E5F2 triangle to mark the selection.
Step 46 - Duplicate the navigation bar
Just to see how it looks duplicate the previous section's "Nav" folder, but highlight the word "About Us" on the navigation links. Ensure all the content is between the section's margins and organize the layers in folders.
Portfolio
Step 47 - Portfolio Section
Repeat the previous steps' instructions to create a box of content, but instead of using yellow for the title use blue: #336A91 and use the following color for the box background: #7FA5D2 and a white Stroke Layer Style.
Step 48 - Portfolio Items Placeholders
For this section we will design a very simple portfolio gallery, using the Rectangle Tool draw some light blue squares at the left of the recently created box of content. and a large rectangle at the left site. Add to each box a Layer Style > Stroke, 1px and White. Using the Rectangle Tool draw little squares on the bottom right of the big square which will be like thumbnails to control some kind of transition effect, then add some dummy text over each square to depict which content should be placed there. You can actually use sample images if you want to.
Step 49 - Social Portfolio
Following the same process than Step 43, add a couple of links for Social Media portfolio, like Flickr or LinkedIn. Use "Bonveno" typeface for the title and this color:#034D8A.
Step 50 - Revise everithing is in place
Duplicate the "Nav" folder once more and highlight the word "Portfolio". Ensure everything is inside the bounds of the section three and organize your layers.
Contact Us
Step 51 - Contact Background and Labels
We are almost finished, now let's add a container for the contact form. In this case the rectangle should be green #67A802 and the Stroke lighter green #B8D942. The title of the section should be "Contact Us" and I'm using a White foreground to increase the contrast with the background. Fade the box a little bit and duplicate to create de double line effect from the previous content boxes.
Finally using White foreground and a smaller Size of "Bonveno" typeface write the contact form labels. Apply the Drop Shadow we are using for the titles to these labels as well.
Step 52 - Draw the input boxes
Using the Rounded Rectangle Tool (5px radius), draw the following shapes which will become the actual input areas of our contact form. Then apply the Inner Shadow, Color Overlay (#4B6800) and Stroke (#A8D02F) layer styles shown below.
Step 53 - Add the input text
Using "Bonveno" typeface type some dummy words inside the input boxes, I'm using this color as a foreground: #AFD437. Below the input boxes you can add some phone contact line as well (feel free to modify the information as you want).
Step 54 - Contact Button
Finally, let's add the contact button, using the Rounded Rectangle (5px Radius) draw a button. apply a Drop Shadow, a Gradient Overlay (#B17F02 - #FFD101) and a Stroke Style (#FFDB04).
Step 55 - Contact Button Text
For the Button's text I'm using "Futura Black" typeface but feel free to use any other font. Then apply an Inner Shadow, a Color Overlay (#564100) and a Stroke (#F0C401) to the text layer. You should have something very similar at the bottom of the image below.
Step 56 - Revise the Contact Section
After duplicating a new instance of the navigation menu, highlighting the word "Contact" this time. Finally ensure all the content of the contact page is inside the bounds of the fourth section of the design and organize your layers.
Conclusion
And that's it! Hope you liked this tut, now it's your turn to try your own illustrative single page web design!
