In this tutorial I'll walk you through the process of creating a simple, festive interface for a web app in Photoshop CC. The concept behind the app is that users can connect with Twitter and write a Christmas wish on a public board, effectively creating a huge Christmas postcard. We'll look at styling typography, combining a flat color palette and achieving a clean and roomy composition.
Tutorial Assets
To complete this tutorial you will need the following (freely available) assets:
Klinic Slab font from Lost Type
Night sky photo from Unsplash
Open Sans font from Font Squirrel
Avatars from User Inter Faces
Get the Document Ready
Step 1
Create a new document (File > New...) using the settings shown below.
Step 2
Let's set some guides so our layout is properly centred, and the main section (above the "fold") is separated. Go to View > New Guide... and set the following guidelines: vertical at 200px, 700px and 1200px, and horizontal at 200px, 800px and 1590px.
Step 3
We're going to keep our document well-organized from the very beginning, so create three layer groups named Header, Body and Footer. Sticking to this Photoshop etiquette will keep things organized and easy to navigate or edit. To create groups go to Layer > New > Group... and give each one a title as mentioned. For quick creation of a group just click the icon.
Designing Above the Fold Area
Step 1
Inside the Header group create a new group and name it TOP BG. After that, select the Rectangle Tool (T) and draw a 1400x800px rectangle. It should be placed at the top of the document at the first horizontal guideline.
Step 2
Download the night sky photo from unsplash.com (a brilliant resource for 100% free images) and place it over the created rectangle (you can drag the image directly from the browser into your Photoshop window). Then, hold the ALT key and mouse over the bottom of the photo layer. When the arrow appears, release it to create a clipping mask. Once you're done with that click CMD+T and resize the photo to fit inside the rectangle, holding the Shift key to scale it down proportionally.
Step 3
Now click the right mouse button on the photo layer (to bring up a context menu) and select Blending Options... . Then, click on the Color Overlay and set color to black #000000. Finally, reduce the Opacity to 40%.
Step 4
Now for a new group. Click on the small arrow next to the TOP BG folder to collapse it, then create a new group called Tree Badge above it.
Step 5
Change the foreground color to white #FFFFFF and select the Polygon Tool (U). Set the Sides option to 6 and draw a 128x146px shape. Make sure it stands in a vertical position.
Step 6
We're now going to create a Christmas Tree shape. Change the foreground color to #42a747 and pick the Pen Tool (P). Create a new layer above the polygon shape and place some points with the pen tool to create half of the tree. Holding Shift whilst you do so will constrain the angle of the paths, if you need.
Step 7
Having draen one half of the tree, click CMD+J to duplicate the layer. Then transform the shape (CMD+T) and change the width to -100.00%, this will effectively flip our shape across the vertical axis. Position this new shape alongside the original and click twice on the layer thumbnail to change its color to a darker green #38993d. We now have a nice flat illustration of our Christmas tree badge.
Step 8
We're still missing the trunk of the tree. Create a new layer and choose the Rectangle Tool (U). Set the foreground color to brown #795000 and draw a 10x11px rectangle beneath our Christmas tree.
Step 9
With our Tree badge complete, click the little arrow next to the group name to minimize it, so it takes less space in our layers panel. After that, create a new group called Copy, then change the foreground color to white #FFFFFF and select the Horizontal Type Tool (T). Then, assuming you've already installed the font to your system, select Klinic Slab. Choose the Light version and set the point size to 62pt. Write the copy as shown below, or create your own strapline, placing it 50px below the first horizontal guideline.
Step 10
Change font size to 42pt and write "and wish your friends a". Place it 30px below the previous text layer, making sure it is centered.
Step 11
Go back to the Tree Badge group, expand it and holding down CMD button select the layers of the two halves of the tree. Hit CMD+J to duplicate them. Then, rename the layer to Xmas tree and move it into the Copy group. Click twice on its thumbnail and change the color to white #FFFFFF. Hit CMD+T to transform the object, and holding down the Shift button (to constrain the proportions) scale it down to 32x27px , placing it before our previously created text layer.
Step 12
Now duplicate the Xmas tree layer by clicking CMD+J and place it right after the text layer, keeping the same gap between these two layers, around 20px. Then select the Horizontal Type Tool (T) again, keeping the same font as before and changing the variant of the font from Light to Book. Type the following text "Merry Christmas!".
Step 13
Time for something different. Select the Line Tool (U), set Weight to 3px (you can find this setting in the top bar) and draw a line, holding down Shift so it is perfectly straight. Place it 20px under the "Merry Christmas!" text. Duplicate this line by hitting CMD+J, then move it 3px below the first one.
Step 14
That's it for the Copy group, so minimize it by clicking the small arrow next to the group name. Create a new group and name it Connect with Twitter, pick the Rounded Rectangle Tool (U), set Radius to 99px and change the foreground color to a Christmassy red #cf2f32. After that, draw a 250x57px rectangle and place it 60px below the previously created lines.
Step 15
Right-click the shape layer to bring up the context menu, and select Blending Options.... Then alter the Stroke, setting it to 2px. Change the color to the previously used red #cf2f32 and set Inside for the Position. Hit OK.
Step 16
Set the button layer Fill to 0%.
Step 17
We need some text for our button. With the Horizontal Type Tool (T) selected, choose Open Sans (Regular) font, set the size to 18pt and use the same red color as before. Write "Connect with Twitter". After that, hold down the CMD key and hover over the previously created rectangle shape layer thumbnail until you see a new icon with dotted borders. When you see it, click on it to make a selection of that layer. Then, select the text layer, hit V and align it horizontally and vertically using the aligning tools shown in the screenshot below.
Step 18
Hit CMD+D to deselect the button. Minimize the group and find the Tree Badge group. Select it and hit CMD+J to duplicate it, or right-click it and select Duplicate Group.... Expand the group and delete everything except the two halves of the tree. Place our new tree 50px below the button.
Designing the Wishes Area
Step 1
Minimize the Header group and open up the Body group. Pick the Rectangle Tool (U), change the foreground color to #e9e9e9 and draw a 1400x790px rectangle between the first and second horizontal guidelines. Double-click the layer name and rename it to BG.
Step 2
Now create a new group called Wish. Change the foreground color to white #FFFFFF and pick the Rounded Rectangle Tool (U) with a Radius of 5px . Draw a rectangle of 485x175px.
Step 3
Again, create a new layer, pick the Rectange Tool (U) and holding down the Shift key draw a 30x30px rectangle. Hit CMD+T and, holding the Shift key, rotate it to 45.00° , placing it 10px above the rounded rectangle and 10px to the right from the first vertical guideline.
Step 4
Having created two shapes, hold the CMD key, select both shapes and go to Layer > Merge Shapes. After that, click the right mouse button on our newly merged shape layer and select Blending Options... . Check Drop Shadow, change Blend Mode to Normal, Opacity to 5%, Angle 90°, uncheck the Global Light option, set Distance to 2px, Spread and Size to 0. (Phew!)
Step 5
Pick the Horizontal Type Tool (T), select Open Sans (Bold) font, set the size to 13pt, change the foreground color to gray #a3a3a3 and write the time and date of our sample wish e.g. 22:13 - 28 NOVEMBER 2013.
Step 6
Time for an avatar. Create a new group called PIC and place it above the rounded shape layer. Select the Ellipse Tool (U) and, holding down Shift key, draw a circle of 90x90px. After that, move it 20px down from the top and 20px to the right from the first vertical guideline.
Step 7
Now head over to uifaces.com, a royalty free avatar stock site (you can even add your own if you wish to support it). Choose a face you feel drawn to and copy it to your clipboard. After that, come back to your Photoshop document and paste it in by clicking CMD+V, making sure it stands right above the circle layer.
Then hold down ALT key and mouse over the pasted image layer until you see an arrow down. When you see it, click on it to create a Clipping Mask. Then use the Move Tool (V) to place it in the center of the circle and hit CMD+T to resize it if needed.
Step 8
Minimize the PIC group and select the Horizontal Type Tool (T) again, set the foreground color to #2f2f2f, select 26pt sized Klinic Slab (Medium) font and write the name of the author. Place it 30px from the top and 20px right from the author picture.
Step 9
Again, change the foreground color to the previously used red #cf2f32, change the font to Open Sans (Semibold) 16pt size and write author's Twitter username. We're using this color to differentiate from the text so it's perceived as a link.
Step 10
Change the foreground color to dark gray #878787, reduce the font size to 14pt, change the font weight to Regular and write down a tweet-like message (wish). Make sure the line height is set to 21pt, to give some breathing room so our wish is readable. To do so, go to Window > Character and on the character panel set line height to 21pt.
Step 11
Our Wish group is done, so minimize it, then using the Move Tool (V) move it 60px below the header area. Duplicate the Wish group by hitting CMD+J or clicking the right mouse button on the group name and selecting Duplicate Group... . Move this duplicated group to the right so its corner aligns with last vertical guideline. Change the name, avatar picture and wish too.
Step 12
Now duplicate four more Wish groups and place them in two columns. Use 30px of space below and above. For the last row, use 50px of the space below the groups to keep it consistent with the spacing at the top of Body group. Change the names, Twitter usernames, wishes and avatars to make it look more natural rather leaving duplicated content.
Step 13
The last step for the wishes area is to add some hyperlinks and hashtags (as these are wishes from Twitter). We'll grab the previously used green #42a747 and Semibold font weight to make links and hasthtags different and perceived as clickable. Simply use the Horizontal Type Tool (T) to select a hashtag or url, highlight it, change the font weight to Semibold and the color to green.
Building the Footer
Step 1
Moving further down the page layout, we're now going to design the footer area.
Begin by minimizing the Body group and expanding the Footer group. Set the foreground color to #727272, pick the Horizontal Type Tool (T) and choose Klinic Slab (Medium) at 26pt . After that, write the following "Thank Your Family, Friends, Followers". To keep it consistent give it enough white space around, and move it 60px down from the Body group.
Step 2
Create a new group called Message box, set the foreground color to #f7f7f7 and pick the Rounded Rectangle Tool (U) with a Radius of 5px. Draw a 525x220px rectangle, placing it 30px below the heading.
Step 3
Now expand the Body group, find the Wish group and expand that too, then find the PIC group and duplicate it by hitting CMD+J. Drag the duplicated group to your Message box group, placing it above the previously created shape layer. Now minimize all the opened groups, select the recently copied PIC group and resize it to 28x28px by hitting CMD+T.
Step 4
We need to show some identification, who is posting the wish, so we'll use the user's Twitter username. Set the foreground color to #878787, pick the Horizontal Type Tool (T) and choose Open Sans (Semibold) at 14pt. Write the following: "Connected as @username".
Step 5
Let's create a disconnect button, so if users wants to change their account or just disconnect they will have an option to do so. Create a new group called Disconnect, set the background color to white #FFFFFF and pick the Rounded Rectangle Tool (T) with a radius of 99px . Draw a 90x24px rectangle.
Step 6
Change the foreground color to gray #878787 and pick the Horizontal Type Tool (T). Choose Open Sans (Bold) at 10pt and write "Disconnect". Place it in the center of the button.
Step 7
Minimize the Disconnect group, set the foreground color to white #FFFFFF and pick the Line Tool (U), set the Weight to 1px, and holding down the Shift key draw a horizontal line across the message box shape. Place it 10px down from the image.
Step 8
Change the foreground color to #b2b2b2 and pick the Horizontal Type Tool (T). Choose Open Sans (Regular) font, setting the font size to 18pt and write some sample copy.
Step 9
Minimize the Message box group and create a new one called Thank You Button. After that, set the foreground color to green #42a747 and pick the Rounded Rectangle Tool (U) with a radius of 5px and draw a 525x60px sized rectangle. Place it 20px below the message box shape.
Step 10
Double-click the shape layer, or right-click and select Blending Options... . Select Drop Shadow and apply the options shown below, the color code for the green used is #349239.
Step 11
Change the foreground color to white #FFFFFF and pick the Horizontal Type Tool (T) with the following settings: Open Sans (Bold) 18pt. After that write "Post 'Thank You'" and place the text in the center of the button.
Step 12
Awesome we're nearly done! Now minimize the Thank You Button group and create a new one called Twitter. Change the foreground color to Twitter's brand color #00acee and pick the Rounded Rectangle Tool (U) with Radius of 99px. After that, draw a 160x35px rectangle and place it 30px below the green button and 10px to the left of the middle guide.
Step 13
Change the foreground color to white #FFFFFF and pick the Horizontal Type Tool (T) with the following settings: Open Sans (Semibold) at 12pt. Write "TWEET THE LOVE" and place it in the middle of the button.
Step 14
Minimize the Twitter group and duplicate it by hitting CMD+J. After that, double-click on the group name and rename it to Facebook. Place it on the opposite side, change the wording, then change the button color to #3b5998.
Step 15
Minimize the Facebook group, change the foreground color to #878787, pick the Horizontal Type Tool (T) and choose Open Sans (Semibold) at 14 pt . Write down your copyright line and... you're done!
Congratulations! You're Done.
So there you have it. I walked you through the creation of a website layout, from scratch, in an organized and efficient manner.
I hope you've learned something new following this tutorial. If you have any questions or have difficulties please don't hesitate to ping me in the comments section or via Twitter.