Web Courses Academy Blog

Photoshop UI Tutorial – Happy Cafe

Author: Carl Heaton
He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.
photoshop-ui-tutorial
Quick jump to topics
Sharing is caring

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.

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
photoshop UI tutorial
The Rectangle Tool
photoshop UI tutorial
The Text Tool
photoshop UI tutorial

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.photoshop UI tutorial
  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.photoshop UI tutorial
  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

  1. The footer is our page’s centrepiece (if that make sense) it is where we get to show off our design skills. Footers are normally forgotten but ours won’t.
  2. As with your header, start by opening the template.psd, File > Save As and called it “_footer.psd”.
    photoshop UI tutorial
  3. Let’s create the background first and work up from there. Start by making a rectangle with a background colour of #101b22.
  4. Next place the footer bg.psd from the CONTENT > Header & Footer folder and place it at the top of the page. There should be a three box space where you can see the background.
  5. Starting 4 boxes down, write the heading Why we’re happy. Use Open Sans, Bold, 18pt, White and all caps. As this is just one line of text only click once with the text tool, do not use a text box.
  6. For the text below goto coffeeipsum.com, copy two paragraphs, create a text box that spans 4 grid columns and past in the text. Bree, Regular, 16pt, white. Now group the two text layers so keep things nice and neat.
  7. Next for the links section. Use the same text settings for the heading and this will span 2 grid columns. For the list of navigation use Bree, 16pt, Regular, Underlined (you can add this in the character panel) and white. Then adjust the line height to 28pt to spread them out. Group it all up again.
  8. Socialise section is easy, same heading but this time use the go to CONTENT > Icons to find the Facebook and Twitter badges. You will need to rename them after placing above each other. This section also spans 2 grid sections.
  9. How to find us heading spanning the remaining 4 grid columns. Below the heading create a box approximately 309 px wide and 200px in depth.
  10. Now we need a map, goto Google Maps and search for “Happy Cafe” if something interesting turns up take a screenshot and save the file into your CONTENT > Header and Footer folder. From there Place Embed the map screenshot on top of your box and go to Layers > Create Clipping Mask (Or Press CMD + Alt + G). Complete the section with the address using Bree, Regular, 16pt, White.
  11. Finish the section off by grouping it all nicely and naming it so it easy to find e.g. “How to find us”. Genius!
  12. Any questions? Yes how do to do the last section. Well you start by using the line tool (Press U and you will find it on the shape menu). Use the mid brown #a1905e, depth of 3 and go right across from left to right. Repeat so you have two separated by 5 boxes i.e. line one, then 5 box space (200px) between them for the next text.
  13. Add the Any Questions? text using Open Sans, Bold, 24pt and the same mid brown. Below add the phone number using Bree, 20pt, Regular and same colour.
  14. Finally go to File > Place Embedded > team pic with mask.psd and resize and place at the far right. Leave one space below the top line and the start of the team members heads.
  15. Save your hard work, take your right hand, reach over you left should and give yourself another pat on the back!

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.photoshop UI tutorial
  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.photoshop UI tutorial
  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.photoshop UI tutorial
  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.photoshop UI tutorial
  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.photoshop UI tutorial
  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.photoshop UI tutorial
  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

photoshop UI tutorial

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″]

More great articles
There is more where this came from
Join our monthly newsletter packed with course dates, latest articles, free resources and job opportunities
Promise to only send you useful interesting newsletters once a month.