In this tutorial we'll be using Adobe Photoshop to design a clean and fresh interface that can be used for any web service or SaaS-based web app. We'll be covering some trademark web elements such as ribbons, buttons and stickers, as well as some basics including shapes, masks, typography, and much more. The fully coded version of this design, called FreshServe, is available on ThemeForest in both HTML and Wordpress versions.
Step 1
Let's begin by creating a new Photoshop document by selecting File > New.
Set the canvas Width to 1100px, Height to 1300px, Resolution to 72, and the Background Contents to White.
Step 2
Next, we need to create two guides that will act as the container for our page.
Select View > New Guide...
For the first guide, set the Orientation to Vertical and the Position to 70 px.
For the second guide, select View > New Guide... again and create another Vertical guide with the Position set to 1030 px.
We should now have an outlined space that is 960px in width for our page.
Step 3
Let's set a background color for our page. Select the Paint Bucket Tool (G) and set your Foreground Color Swatch to "ebebeb". Then, click anywhere on the canvas to apply the color to our Background layer.
Step 4
Now we're going to add a small gradient box at the top of our page. This will help give our background a bit of dimension.
Start by selecting the Rectangle Tool (U) and draw a large rectangle (around 160px in height) starting from outside-left of the canvas encompassing the entire width of the document.
Next, change the color of the box to "ebebeb" (the same color as our background). Then apply the following layer style:
Step 5
For our logo, we're going to be using simple text with some fine-tuned layer styles helping it to stand out while still being easily customizable.
Start off by selecting the Horizontal Type (T) and add some text (ex: the name of your site). Give your text the following properties:
- Font Family: Aller (download here)
- Size: 40 px
- Style: Bold
- Tracking: -25
- Anti-aliasing: Sharp
- Color: #ACACAC
Once finished, move your text layer so that it touches the left guide and is 50px from the top of the document.
Then, lets apply the following layer styles:
Step 6
Next up is to create our navigation links. Grab the Horizontal Type (T) and add in the text shown below (feel free to type whatever you'd like):
Space out each link with 12 spaces (12 taps on your spacebar) and set the following properties:
- Font Family: Helvetica Neue
- Size: 13 px
- Style: Bold
- Tracking: -25
- Anti-aliasing: Smooth
- Color: #555555
Position the text layer 60px from the top of the canvas and touching the right guide.
Next, we're going to add an "active" state to our "Home" link. Select the Rounded Rectangle Tool (U) and set the Radius to 6px.
Draw a 60x25px rectangle over the "Home" text. Then move this new layer below the Nav text layer.
Now, using the Horizontal Type (T) select just the "Home" part of the text layer and change it's color to "000000" (black). Our end result should like like this:
Step 7
Next we're going to create the actual container for our page. Grab the Rounded Rectangle Tool (U) and change the radius to 10px.
Create a box that is 1065px in height starting from 135px from the top of our canvas and that spans the width between our guides (you may want to zoom out for this).
Change the color of the box to "f8f9f8" and apply the following layer styles to it:
To square off the bottom of our page, we'll need to select the layer we've just created, then select Layer > Rasterize > Layer.
Next, in the Layers panel, click on the "Mask" button twice to add a Vector Mask to our Page layer.
Now, select the Rectangle Tool (U) and draw a rectangle starting from outside the left side of our canvas to outside the right side of the canvas and 30px above our page layer that goes all the down to the bottom of our page right before it begins rounding off. Zoom out a few times for best results.
The end result will be a rounded top and square bottom container for our content.
Step 8
Let's get started on the top of our page by importing a screenshot of our app / service by selecting File > Place... Resize the placed file to around 340x230px and position it 65px from the left and 50px from the top of the page container.
Next, we're going to add a reflection to our screenshot to help it stand out. Select the screenshot layer and click Layer > Duplicate Layer... Name it "Screenshot Reflection" and click OK.
Next we need to flip our screenshot upside down. Select Edit > Transform > Flip Vertical, then position the flipped layer directly under the original screenshot.
Add a Layer Mask by clicking the Layer Mask icon in the Layers Panel.
Select the Gradient Tool (G) and choose a black to white swatch. Draw a line from top to bottom on the flipped screenshot that is around 50px in height.
Finally, lower the opacity on the layer to 30%.
Step 9
Next we're going to add a brief introduction for our service / app. Select the Horizontal Type Tool (T) and type in a short title. Position this layer 40px left of the screenshot, 60px from the top of our page container and set the font properties to the following:
- Font Family: Helvetica Neue
- Size: 30 px
- Style: Regular
- Tracking: -25
- Anti-aliasing: Crisp
- Color: #363636
Directly below our title, add another text box and some more text for our description, position it 30px under the title and set it's font properties to the following:
- Font Family: Helvetica Neue
- Size: 13 px
- Style: Regular
- Leading: 22 px
- Tracking: -25
- Anti-aliasing: Crisp
- Color: #363636
Step 10
Under our description, we're going to create a slick signup button. Begin by selecting the Rounded Rectangle Tool (U) and create a 135x30px rectangle. Don't worry about the fill color for now, just choose something that's visible.
Position our button 35px under our description and apply the following layer styles to it:
Next, we're going to create a small icon for our button. Select the Ellipse Tool (U) and create a circle with a diameter of 20px over the button. Set it's background color to black and position it 5px from the top and 8px from the left of our button.
Apply the following layer style to it:
Then lower the opacity of the circle to 25%. Once finished, grab the Custom Shape Tool (U) and create a small shape inside of the circle (I've chose a basic arrow).
Finally, we can add in our button text. Select the Horizontal Type (T) and create some text 10px to the right of our icon using the following font properties:
- Font Family: Helvetica Neue
- Size: 13 px
- Style: Bold
- Tracking: -15
- Anti-aliasing: Crisp
- Color: #FFFFFF
For a finishing touch, apply a drop shadow layer style:
Step 11
Adding in a bit of text next to our signup button can help inform and entice users to click it.
Select the Horizontal Type (T) and create some text 15px to the right of our button and set the font properties to:
- Font Family: Helvetica Neue
- Size: 11 px
- Style: Regular
- Anti-aliasing: Crisp
- Color: #636363
Step 12
To help draw the user's attention to the top of our page and also achieve some separation, we're going to create a gradient box that will be positioned behind all of the layer's we just created.
Start by selecting the Rectangle Tool (U) and create a box going from left guide to right guide and that is 305px in height.
Change it's fill color to "F8F9F8" and, in the Layers panel, move it so that it's under all of our content layers but over our page container layer. Once that's done, apply the following layer style to it:
Once positioned and styled, it should look like this:
Step 13
Our gradient box looks great and definitely enhances our top content area. But it still lacks a "finished" look, especially near the bottom of the gradient. To help close off our top area, we're going to add in two lines which will give us a "set-in" and polished look.
Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line at the start of our gradient that spans from the left guide to the right guide, then change the line's color to "000000" (black).
Change the opacity of this line to 10% and duplicate it by selecting Layer > Duplicate Layer... and click OK. Change the color of this duplicated line to "FFFFFF" (white) and change it's opacity to 100%. Then, move the duplicated line down 1px.
Step 14
Next, we're going to create a sticker to promote a promo that may be going on. To begin, select the Ellipse Tool (U) and create a circle that measures 120px in diameter and position it over the top corner of our page container. Change the fill color to anything visible (ex: "000000").
Apply the follow layer styles to the circle:
Duplicate this circle layer by selecting Select Layer > Duplicate Layer... and click OK. Then, resize this duplicate layer by select Edit > Transform > Scale and set the Width and Height to 88%.
Apply / change the following layer styles of the duplicated circle:
Next, we need to select both circle layers then select Layer > Merge Layers.
After that, grab the Marquee Tool (M) and, while holding the SHIFT key, draw a 170px box.
Next, click Select > Transform Selection, change the rotation to 37 degrees, and position the angled selection over the top left corner of the circle as shown below:
Once our Marquee is in position, Click the ENTER key to save the transformation, then select New > Layer > Layer via Cut.
Now select the newly cut layer and click Edit > Transform > Rotate 180 Degrees. Position the layer 1px down and 1px to the left so that it blends in seamlessly.
Now, we need to make the fold a solid color. To do this, right-click the layer thumbnail for the fold layer and click Select Pixels. Grab the Brush Tool (B), change the swatch color to "58b672" and brush over the fold layer.
Next, add the following layer styles to the fold layer:
Finally, we can add some text inside of our sticker. Create three text layers with the following text and properties:
First line: "$24.95" with the properties:
- Font Family: Geneva (download here)
- Size: 10.5 px
- Tracking: -75 px
- Anti-aliasing: Strong
- Color: #FFFFFF
Second line: "$19.95" with the properties:
- Font Family: Geneva (download here)
- Size: 19.5 px
- Tracking: -75 px
- Anti-aliasing: Strong
- Color: #FFFFFF
Third line: "Limited Time!" with the properties:
- Font Family: Helvetica Neue
- Font Style: Italic
- Size: 10 px
- Tracking: 0 px
- Anti-aliasing: Crisp
- Color: #FFFFFF
Position them as shown below:
For a finishing touch, grab the Line Tool (U), draw an angled line through the "$24.95" text and change the line's fill color to "FFFFFF" (white).
Step 15
For titles of different sections within our page, we're going to create a custom ribbon graphic.
Start by selecting the Rounded Rectangle Tool (U), change the radius to 14px and create a 235x30px rectangle. Then, change the fill color "CCCCCC".
Next, select the Rectangle Tool (U) and while holding SHIFT, draw a 28x28px square. Position this square so that it's touching the left side and is 12px from the top of our rounded rectangle.
Zoom in to about 400% and select the Eraser Tool (E). Set the Size to 40px and the Mode to Brush. Move your eraser into the position shown below and click to erase (this may take a few attempts in order to achieve a clean and sharp ribbon).
Select both the rounded rectangle layer and square layer and select Layer > Merge Layers.
On this newly merged layer, apply the following layer styles:
Next, select the Ellipse Tool (U), create a circle with a 30px diameter and change it's color to "444444".
Select Layer > Rasterize > Layer. Then, grab the Marquee Tool (M) and draw a selection around half of the circle.
Select Edit > Clear and move the remaining half circle layer under our ribbon layer and position it as shown below.
The last step for our ribbon is to add our text in. Select the Horizontal Type (T) and add some text with the following properties:
- Font Family: Helvetica Neue
- Size: 16 px
- Style: Regular
- Tracking: -25
- Anti-aliasing: Sharp
- Color: #FFFFFF
To help our text stand out, apply the layer style:
Step 16
For our screenshots, we're going to enclose them in styled, rounded boxes. Grab the Rounded Rectangle Tool (U), draw a box that is 150x100px in size and change it's color to "FFFFFF" (white).
Add the following layer styles to our box:
Select Layer > Duplicate > Layer...and repeat 3 more times. Space them out about 30px apart from each other.
Now, to add in our screenshots, select File > Place for each screenshot and move / resize each imported image to fit inside it's own box.
Step 17
To scroll between screenshots, lets add some left and right navigation icons. Select the Ellipse Tool (U), create a circle that is 30px in diameter and change it's fill color to "F8F9F8".
Select the Custom Shape Tool (U) and choose an arrow-like shape. Draw a small arrow inside of the circle and change it's color to "CFCFCF". Once finished, apply the following layer style to it:
Select both the circle and arrow layers and select Layer > Duplicate Layers...After that, click Edit > Transform > Flip Horizontal and move these duplicated layers to the other side of our screenshots.
Step 18
For our bottom content area let's duplicate our ribbon title we created in Step 16, move it below our screenshots and change the text.
Step 19
For our feature list, we're going to create a grid-style layout to organize our different features.
Let's start by adding some text to describe our feature. Select the Horizontal Type (T) and create some text with the following properties:
- Font Family: Helvetica Neue
- Size: 17 px
- Style: Regular
- Tracking: -25
- Anti-aliasing: Crisp
- Color: #252525
Next is to insert our icon. I'm using icons from the "Project Icon Set" which you can download here. Select File > Place... choose an icon then resize the imported icon to 28%.
Select the Horizontal Type (T) and create a text box around the icon. Add some text and use spaces or tabs to wrap the text around the icon. Use the following font properties:
- Font Family: Helvetica Neue
- Size: 12 px
- Style: Regular
- Leading: -22
- Tracking: -10
- Anti-aliasing: Crisp
- Color: #363636
Step 20
Add the title, icon and text you've just created to a group and duplicate it twice (named "Feature 1", "Feature 2", etc...). Position these duplicated layers so that they are 70px apart from each other and change the icons / text accordingly. Once finished, put the 3 feature groups into a new group called "Row 1".
Finally, duplicate the group "Row 1", move it down 70px and change the icons / text accordingly.
Using groups to organize each feature and row of features makes for easy to editing later on.
Step 21
For our footer, we're going to add some simple text layers for copyright and links.
Select the Horizontal Type (T) and create some text. Position it 30px from the top of the page container and touching the left guide. Set the following character properties:
- Font Family: Helvetica Neue
- Size: 12 px
- Style: Regular
- Tracking: 0
- Anti-aliasing: Crisp
- Color: #555555
Create another text box and add in some links. Position this box 30px from the top of the page container as well and touching the right guide. Set the following character properties:
- Font Family: Helvetica Neue
- Size: 12 px
- Style: Regular
- Tracking: -25
- Anti-aliasing: Crisp
- Color: #333333
Conclusion
That's all! I hope you've enjoyed this tutorial and have found some useful techniques that you can adapt / apply to your designs.
