Photoshop UI Tutorial – Happy Cafe

Coffee is the fuel for designers and developers alike so we thought we’d come up with a fictitious organic coffee shop. Actually we use this design to teach our Web Professionals so we also wanted to share it with you. Below, find our Photoshop UI tutorial.

DOWNLOAD FULL PSD

In this Photoshop UI  tutorial I cover how to create the header and footer independently and then use them as smart objects in our main page.

These smart object can also be used on other pages that you could possibly make, like the About Us page and/or Contact Us page. After making the smart object we will make the Homepage. Let’s start designing in Photoshop!

Note: skip to the end of this tutorial for the final design or take a look at the top picture 🙂

Tools that you will use a lot during this Photoshop UI tutorial are:

The Eyedropper Tool

The Rectangle Tool

The Text Tool

Let’s Get Ahead

1. Time to create our header that will be on all our pages. We will save this as a separate file and then use Place Linked to put the header as a smart element on all our pages.
2. Before even opening Photoshop let’s make sure we have the font’s installed. Goto the Fonts folder, click on each of the font’s and install them. If you already have Photoshop open, quickly close it and re-open so you have all the fonts loaded.
3. Start by opening your template.psd and then File > Save As “_header.psd”. Often you will see designers and developers use an _ to show that a file is just one part.
4. TIP: When adding elements to the page, such as a logo, box or even text, try to use the grid patterns. This will give your layout a vertical rhythm and consistency.
5. TIP: Also for precision we will turn on the info panel. Please goto Window > Info and you will see the panel appear. I normally move this onto the right hand side where it stays.
6. Lets start with place our logo. Goto File > Place Embedded > and you will find the Logo.ai in the Branding folder. Once on the page we need to resize it to around 360px width, press CTRL/CMD + T and use the Info panel to help you get it to the right size.
7. Once done you can move it into the centre of the page using the guidelines. Then use the grid to position the logo one box down or 40px.
8. Now for the nice frills. Goto File > Place Embedded > and goto the folder for CONTENT > Header & Footer > frill right.psd will be waiting for you. Once it is placed move it to the right of the logo.
9. To do the left one click on the fill layer and duplicate it by either Right Click > Duplicate or you can simply do CTRL/CMD + J. Once you have duplicated it goto Edit > Transform > Flip Horizontal and move it to the left of the logo. Rename the layers accordingly.
10. Now for the contact box at the top. Select the rectangle tool and, starting two boxes down, draw a rectangle approximately 270px width and 40px height (or one box).
11. Now we need to make it transparent in the middle with a stroke around the sides. Select the rectangle tool, on the properties bar (at the top) you will see Fill and Stroke. Select Fill and choose the top right box with the red line through it. This means it will have a transparent background.
12. Next for the stroke but we need to first select the colour we want to use. Press I to select the eye dropper tool and click the central brown from our colour pallet. Now press U again to see the shape properties, click the Stroke and choose the colour we just selected. Set the line weight to 2pt. Rename the layer “Tel Box”.
13. Let’s start with placing the telephone icon and changing the colour to match our branding. File > Place Embedded > phone.png. Resize and place on the left hand side. To recolour the icon just click to the right of the name on the layers panel. Select Colour Overlay and choose our mid brown colour.
14. Add the text using Opens Sans, Regular, 16pt and the same mid brown colour as our box and icon.
15. Let’s group the telephone layers up together to keep things nice and neat. Nice!
16. Navigation time. We want to be able to easily add more elements to the menu should our client (our ourselves) change our minds. To do this we will use a trick involving Justifying the text. This means that if we add more elements the menu items will automatically space out correctly.
17. Create a text box (1 box below the bottom of the logo) from the far left to far right i.e. right across the page and one box in depth. Type in all the menu items using Open Sans, Bold, 16pt and
18. Now to add the justification. Highlight all the text and press CTRL/CMD + T to bring up the character panel. First make all the text bold by clicking the TT icon. Then click the Paragraph tab and select the Justified setting (the far right icon). You will see all the text spread out nicely.
19. Now time to fix the menu items with multiple words like “I Need Coffee Now”. Start by removing the space between the words. You will now have INEEDCOFFEENOW. We will add 400 character spacing to the I, D and E. This will push the words apart. Select the I, then on the character panel change the character spacing to 400 (or more if you feel they are still too close). Repeat for each of the end letters of each word.
20. Cool trick eh!?
21. To finish the navigation off please change the colour to the darker of the browns.
22. Before we start to use this file we should crop the page to only fit the elements we have in (no need for the extra 2800 pixels) So crop the page to about 350px and then turn off the background layer. Save as _header.psd
23. Well done! Your header smart object is done.

Smart object: Footer

Happy Cafe Homepage

1. Time to create our first page design, the homepage.
2. Before even opening Photoshop let’s make sure we have the font’s installed. Go to the Fonts folder, click on each of the font’s and install them. If you already have Photoshop open, quickly close it and re-open so you have all the fonts loaded.
3. Start by opening your template.psd and then File > Save As “homepage.psd”.
4. TIP: When adding elements to the page, such as a logo, box or even text, try to use the grid patterns. This will give your layout a vertical rhythm and consistency.
5. TIP: Also for precision we will turn on the info panel. Please goto Window > Info and you will see the panel appear. I normally move this onto the right hand side where it stays.
6. Lets start with place our smart element on the top of our page. Goto File > content > and you will find the “_header.psd” in the header folder. Move it into the centre of the page using the grid guidelines.
7. Now placing our header image. Go to file > content > you will find the header-image.jpg in the home folder. Once on the page we need to resize it to around 1400px width, press CTRL/CMD + T and use the Info Panel to help you get it to the right size.
8. Once done you can move it into the centre of the page using the guidelines. Then use the grid to position the logo one box down or 40px.
9. Now we are going to add the header text. Go to file > content > you will find a home.txt file in the home folder. Click on the Text Tool on the left sidebar, select the Open Sans extra bold fond and click in the middle of the header image.
10. Copy and paste the first line “we value flavour not fuss” and centre it with the page. Select the line of text and give it 36 pt.
11. Copy and paste the second line as sub-heading. Select the line of text, give it 20 pt and BreeSerif Regular font.
12. Now we want a CTA (call to action) to get the customers to other pages. To make the border that looks like a button. Click on the Rectangle Tool on the left sidebar, give it 240px width and 40px height.
13. Make a border of 3 pixel and color it white. Put it in the centre.
14. Click on the Text Tool again and click inside our button. Type the text “view the menu” and centre it with the button.
15. Moving on to the little introduction text and signature.
16. We are going to add the introduction text. Go to file > content > you will find a home.txt file in the home folder. Click on the Text Tool on the left sidebar, select the Breeserif font and click somewhere beneath our header image.
17. Copy and paste the introduction text. Select the line of text and give it 18 pt.
18. Make the text the same color as the 3rd box in our color scheme on the left top corner. Select all the text  and by using the eyedropper tool we can select the color from our color scheme.
19. The width of the text will be 640px, height will be 200px.
20. Move the text in the center and 40px down from the header image.
21. Now we are going to add the signature. Go to file > content > you will find a signature.png file in the home home folder.
22. Place the signature at the left side of the text, 40px down the text. Use the grids to guide you.
23. Next we want to show the customers what kind of things we offer in our cafe. We will make 3 columns that show 3 products with a small explanation.
24. First of make a separator to make the design look more professional. Right-click on the rectangle tool and select the line tool. Draw a line from left to right, the line should be having a width of 980px.
25. Give the line the same color as the 3rd box in our color scheme. Select the line and by using the eyedropper tool we can select the color from our color scheme. #A1905E.
26. We are going to add a heading text. Go to file > content > you will find a home.txt file in the home folder. Click on the Text Tool on the right sidebar, select the Open Sans bold font and click on the left side beneath our separator line.
27. Copy and paste the heading text. Select the line of text and give it 24 pt.
28. For the next part you really have to turn on your grids, this will help you align. (CMD + H)
29. Add the three images into your PSD. Go to file > content > you will find the coffee.jpg, desserts.jpg and sandwiches.jpg files in the home folder.
30. The three images should be 305px in width and 440 px in height.
31. Put them next to each other, align them vertically with the blue grid lines, there should be a little space between the images. Plus, don’t let it touch the most outer grid lines.
32. Give the images a title and some explanation about what is being offered.
33. Go to file > content > you will find a home.txt file in the home folder. Click on the Text Tool on the left sidebar, select the Open Sans bold font and add the text on the left side beneath our images.
34. Font size is 18px.
35. Do the same thing with the little paragraph text. Font is called Breeserif Regular and Font size is 14.
36. The next thing what we have to do is make a big CTA (call to action) so customers can order their coffee straight away.
37. Go to file > content > you will find a home.txt file in the home folder. Click on the Text Tool on the right sidebar, select the Open Sans bold font and add in the center of the page. 40px down of the previous object.
38. Copy and paste in the second line, center it, give it font Breeserif Regular and font size 14.
39. Now we want a CTA (call to action) to get the customers to other pages. To make the border that looks like a button. Click on the rectangle tool on the left sidebar, give it 240px width and 40px height.
40. Make a border of 3 pixel and color it blue. Put it in the centre.
41. Click on the Text Tool again and click inside our button. Type the text “I want coffee” and centre it with the button.
42. Last thing we have to do on our design is add the Footer. Lets place our smart element on the bottom of our page. Goto File > content > and you will find the “_footer.psd” in the footer folder. Move it into the centre of the page using the grid guidelines.
43. Well done! Here is the result of your finished web design for Happy Cafe.

The Final Design

Completed – Photoshop UI Tutorial – Well done!

UI Design is something you love or you kinda hate. If you are obsessed about pixel perfection then UI Design is for you and I hope you go onto creating your own amazing designs. If you do please join us on Facebook and post up on our wall.

[text-blocks id=”59315″]