Final Product What You’ll Be Creating

Now Updated with a Coding Tutorial and the free PSD! In this tutorial we’ll be using Adobe Photoshop to design a sleek web interface that can be used for any mobile app website. We’ll be covering an array of techniques including shapes, textures, masks, custom icons, typography and much more that can be easily adapted and applied to your own web designs.

The Coding Portion of the Tutorial

Eric has offered the PSD for Leaflet for free to all of our readers here. If you’re a premium Tut+ member, hop over to our sister site, Nettuts, for the full coding portion of the tutorial as well. Eric will walk you through how to take this design into a full coded HTML/CSS template!

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Phototuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Alright, on to the free design portion of the tut!

About This Design

This tutorial is based on the dark, clean website design for Leaflet, an iPhone app designed for Envato marketplace publishers. Eric Alli of Trilab Media helped design and code the site, so he’ll be walking us through the step by step tutorial. Whether you’re looking to use a similar design for your own projects or just want to see how it was made, there are plenty of excellent tricks and techniques in this tutorial that you’ll be able to pick up on. Enjoy!

Step 1

Let’s begin by creating a new Photoshop document by selecting File > New.

Set both the canvas Width and Height to 1100px, Resolution to 72, and the Background Contents to White.

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 2

Next step is the background. Select the Paint Bucket Tool (G) and set your Foreground Color Swatch to “1e1e1e”. Then, click anywhere on the canvas to apply the color to our Background layer.

Let’s also add a bit of texture to our background by selecting Filter > Noise > Add Noise…

Set the Amount to 2.5 and click OK.

Step 3

Next we’re going to create a spotlight that will help add focus to the top area of our page.

Select the Brush Tool (B) and change the Master Diameter to 400px and set the Hardness to 0%.

Create a new layer by selecting Layer > New > Layer… and give it the name of “Spotlight”.

Change your Foreground Color Swatch to “FFFFFF” (white) and create a circle near the top of the canvas using the Brush tool.

To help blend the spotlight into the background, lets add some noise to the spotlight layer by selecting Filter > Add Noise…

Set the Amount to 20, check Monochromatic and click OK.

To smooth out our spotlight, select Filter > Blur > Gaussian Blur…

Set the Radius to 50.0 and click OK.

Finally set the Opacity on the Spotlight layer to around 25%.

Step 4

Next we’re going to be adding our phone graphics. For this tutorial I will be using the iPhone graphic from the superb Vector iPhone 4 PSD from Psdtuts+ which can be downloaded for free here. Also keep in mind, you may use any phone graphic that suits your particular needs (Android, Blackberry, etc…).

Once downloaded, open the PSD in Photoshop. Expand the “Phones” folder in the Layers panel, right click the “FRONT” folder and select Duplicate Group… Here, give the group a recognizable name (I used “iPhone”), set the destination to “Leaflet” (or whatever it is you named your PSD for this tutorial), and click OK. Once you’re finished, close this PSD.

Position our first iPhone touching the left guide and around 100px from the top of the canvas.

This is also a good time to customize the screenshot within the iPhone.

An easy way to do this is to expand the “iPhone” folder in our layers panel then click on the “SCREEN CONTENTS” folder. Now select File > Place, choose your screenshot from the browser, then click Place.

Drag your placed layer over the iPhone and resize to fit into the screen. Once finish, click Enter to save the changes.

Duplicate the “iPhone” group by selecting Layer > Duplicate Group… name it “iPhone 2″ and click OK on the dialog.

Select Edit > Transform > Scale and expand the duplicated iPhone to 107.0% width and height. Position this iPhone around 50px from the top and 200px from the left guide.

Repeat the step mentioned above to replace the screenshot within the “iPhone 2″ folder.

Step 5

The final touch for our iPhones is to create a reflection of them. Lets start by selecting both iPhone groups (“iPhone” and “iPhone 2″) then select Layer > Duplicate Layers… and click OK. Then select Layer > Merge Layers.

Next we need to flip our iPhones upside down. Select Edit > Transform > Flip Vertical, then position the flipped layer directly under the original iPhones.

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 iPhones that is around 50px in height.

Finally, lower the opacity on the layer to 30%.

Step 6

Next is to add our app’s main details to the right of our phones. Before we start, lets add another guide to keep things aligned. Select View > New Guide… select “Vertical” for orientation and 550 px for position.

At around 100px from the top of our canvas, we’re going to add in our logo. I’m using a logo I’ve previously made, you can simply use text or insert your own logo here.

Below the logo, we’re going to add a paragraph of text for our app’s description. Select the Horizontal Type Tool (T) and draw a rectangle between the center guide and the right guide. Set the character settings as follows:

• Font Family: Helvetica Neue
• Size: 16 px
• Style: Regular
• Leading: 26 px
• Tracking: -25
• Anti-aliasing: Crisp
• Color: #FFFFFF

Step 7

Next we’ll create a button for visitors to purchase our app. Using the Rounded Rectangle Tool (U), draw a 240x75px rectangle with a 4px radius. Align it so the left side of the button touches the center guide and it’s 45px below the text.

Now we’ll apply some layer styles. Double-click the right side of the layer in the Layers Panel and use the below image for reference.

To add the Apple icon, draw a small text box inside the button using the Horizontal Type Tool (T), then copy and paste this symbol:  into the text box and set the character settings as follows:

• Font Family: Helvetica Neue
• Size: 50 px
• Style: Regular
• Anti-aliasing: Crisp
• Color: #000000

Finally, change the opacity on this layer to 30%.

Create another text box to the right and add 2 lines of text (ex: “Download now on the App Store”). Apply the following character settings:

• Font Family: Helvetica Neue
• Size: 11 px (first line) 24 px (second line)
• Style: Bold
• Leading: 26 px
• Tracking: -25
• Anti-aliasing: Crisp
• Color: #FFFFFF

Add a Layer style to this text using the following image for reference:

Next, we’re going to add a separator to the right of the text we’ve just added. Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the top of the button to the bottom, then change the line’s color to “FFFFFF” (white).

Change the opacity of this line to 15% and duplicate it by selecting Layer > Duplicate Layer… and click OK. Change the color of this duplicated line to #000000 (black) and change it’s opacity to 10%. Then, move the duplicated line 1px to the left.

The last element to add to this button is an icon that indicates download. Begin by selecting the Ellipse Tool (U) and creating a circle that is 25px in diameter.

Then, add the following Layer Styles:

Finally, grab the Custom Shape Tool (U) and choose an arrow shape (I’m using a default shape called “Arrow 9″). Create a small arrow 10px in width inside the circle and change the color to “FFFFFF” (white).

Step 8

Now to create a small box to display our app’s price. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rectangle that overlaps our download button and is 52px in height and any width greater then 100px.

Change the color of this box to “2B2B2B” and move it below the download button in the Layers Panel.

Next, add a Stroke Layer Style to this box with the following settings:

Now we can add the actual price information. For this we’re going to create two separate text boxes since the content within requires different styling.

For the first text box, add some text (I used “ONLY”) and apply the following character settings:

• Font Family: Helvetica Neue
• Size: 19 px
• Style: Bold
• Anti-aliasing: Crisp
• Color: #FFFFFF

For the second text box, add your price (I used “$1.99″) and apply the following character settings:

Step 9

Moving on to the bottom portion of our page, we need to create some separation. For this, we’ll use the two-line technique we applied earlier on the download button to give the separator an “inset” look.

Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the left guide to the right guide, then change the line’s color to “000000″ (black).

Change the opacity of this line to 80% 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 10%. Then, move the duplicated line 1px down so it’s under the black line.

Step 10

In the section below the line separator we’ve just created, we’re going to be adding two columns, for screenshots and a list of features.

Starting with screenshots, begin by importing your first screenshot by selecting File > Place. Choose our screenshot from the file browser and click Place. Resize the screenshot to 80% width and height, then move the screenshot near the left guide and click Enter.

Select the layer in the Layers Panel and click the “Add Mask” button twice to add a Vector Mask.

Now select the Rounded Rectangle Tool (U) and change the radius to 6px and create a rectangle over the screenshot with the size of 175x120px.

Lastly, we’re going to add a Stroke Layer Style with the following settings:

Repeat the above steps for all of your screenshots and give them 35px of space between each other.

Step 11

To separate our screenshots from the features, draw a 1px line from the top of the first screenshot to the bottom of the last screenshot that is around 55px from the screenshots.

Change the line’s color to “FFFFFF” (white) and set it’s opacity to 5%.

Step 12

Let’s add a title that will describe our features (I used “Leaflet Features”). Position the text 55px from the left separator line and use the following character settings:

• Font Family: Helvetica Neue
• Size: 24 px
• Style: Regular
• Tracking: -10
• Anti-aliasing: Crisp
• Color: #FFFFFF

Now let’s create our list of features and position it below the title. Create a text box and add five or six lines of features and give them the following character settings:

• Font Family: Helvetica Neue
• Size: 15 px
• Style: Regular
• Leading: 28 px
• Tracking: -10
• Anti-aliasing: Sharp
• Color: #8d8c90

Repeat the above steps to add the app’s requirements.

Step 13

To make our list of features stand out, let’s create some simple, custom bullets.

Start by shifting the list of features text box 25px to the right.

Now select the Ellipse Tool (U) and create a circle that is 9px in diameter to the left of the first feature. Change the circle’s color to “bce086″.

Add the following Layer Style to the circle:

Step 14

Now we need to duplicate our bullets and align them to each feature. Start by duplicating the circle layer by selecting the layer then clicking Layer > Duplicate Layer…

Next, move the duplicated layer down 28px (the amount of Leading we applied to the feature list). Repeat the above steps three times.

Step 15

Moving on to the footer portion of our page, we’ll once again apply the two-line technique we applied earlier in Step 9 to add some separation.

Step 16

Now we can add some useful links to our footer area. First we need to create four text boxes, side-by-side, that will hold our links.

Start by creating a text box that is around 160x40px. Add some text to it and repeat 3 times. Here is some sample text you can use:

• Box 1: Follow @mycompany on Twitter for news and updates.
• Box 2: For help & support head to our Support area.
• Box 3: Download our press and media kit.
• Box 4: Copyright 2010 My Company, LLC.

Use the following for the character settings:

• Font Family: Helvetica Neue
• Size: 12 px
• Style: Regular
• Leading: 20 px
• Anti-aliasing: Sharp
• Color: #5555552

As you may notice our boxes are uneven and not aligned properly, don’t worry, we’ll be fixing this in the next step.

Step 17

To fix our alignment issues, begin by placing the four text boxes we’ve created above into a folder and name it “Footer”.

First, position the first text box 55px from the left guide and the last text box touch the right guide.

Now select the four text layers in the Footer folder and grab the Move Tool (V). Click on the Align vertical centers button, then click Distribute horizontal centers button from the Move toolbar.

Step 18

Now we can add some custom icons to accentuate our links.

Select the Ellipse Tool (U) and create a circle that is 36px in diameter next to our first text box. Change the color of this circle to “FFFFFF” (white).

Now select Layer > Rasterize > Layer.

Next up is to add our icon to this circle. For the first icon, I’m using the Twitter “t” that i’ve downloaded for free here.

Once downloaded, select File > Place in photoshop to import the icon into our document. Once imported, resize the icon to 28% width and height, position it over our circle, then click enter.

Next, right-click on the thumbnail of the Twitter icon in the Layers Panel and click Select Pixels.

Now select the circle layer in the Layers Panel then select Edit > Clear.

Delete the imported Twitter Icon by selecting it in the Layers panel and click or drag it to the Trash icon.

Finally, lower the opacity on the circle layer to 15%.

Step 19

For the rest of the icons shown above, repeat the steps in Step 18 by using other icons or with custom shapes in photoshop.

Step 20

To add a finishing touch to our footer links, lets give them a hit of color to help them stand out.

Using the Horizontal Text Tool (T) highlight a part of the text in each text box and change it’s color to “83b546″.

Conclusion

That’s all! I hope you’ve enjoyed this tutorial and have found some useful techniques that you can adapt / apply to your next design.

Sursa: http://webdesign.tutsplus.com/

Final Product What You’ll Be Creating

In this tutorial we’re about to learn how to design a dark, clean website in Adobe Photoshop. As we go through this tutorial, we’ll work with: simple shapes (rectangles, lines, arrows, etc), layer styles, patterns, importation, and paragraph styles, and many other Photoshop design techniques that you can adapt to your Website interface design workflow.

About the Author

Julian Chaniolleau, also known as Devilcantburn, is a freelance graphic and web designer. He’s also an author at ThemeForest, with templates like 96Display or Stereoline, you can also find more of his work at devilcantburn.com.

This design is a great example of Julian’s unique style: dark, yet sophisticated enough to be used for a business site. You can check out more of Julian’s design at his ThemeForest profile, DevilCantBurn.

Let’s dive right in!

Step 1 Setting the document

Begin by creating a new document in Photoshop that is 1200px x 1600px. Be sure your resolution is set to 72 pixels/inch and your background is set to white. We need to unlock the background layer so we can add some layer styles, right click the background and select “Layer from Background”. You can then rename the layer back to background..

Fill the background with the color #101010.

Now create the following guides (Menu > View > New guide…) :

• 120px vertical
• 600px vertical
• 1080px vertical

Now you have the borders and middle of the interface’s area.

Step 2 Organize Your Groups…

Organization is really important to my own workflow – so the next step is to start creating our Layer Groups. Starting organized is important for one main reason: most big website projects end with hundreds of layers, so if you don’t start with organization in mind, it’ll be easy to get lost if you don’t take the time to group elements into “folders” and keep everything named properly.

In the Layers panel, click on the icon to create a new folder, double-click on the name of the folder to edit the name. Do the same for all the folders.

The main layer folders that we want are :

• Header
• Slider
• Main
• Footer

Step 3 Create the Header

Select the “header” folder in Layers panel. Then, select the rectangle tool from the Vector Shapes area of the toolbar:

Draw a rectangle. Rename it like “Top bar bg“. Do Ctrl+T or Cmd+T (Mac) and set the proprieties to be 1200px wide by 10px tall:

Now let’s add some subtle styling; Double click on the colored thumbnail in the layers panel to set the color to #252525. Double-click on the layer to set the FX-layer like this:

This subtle “inner shadow” will add a border effect to the bottom of this rectangle – this is important to separate it from the rest of the header design.

Step 4 Create the Menu

Create a new folder named “Top Menu” in the HEADER group.

Draw a new rectangle. Rename it like “Top Menu bg“. Do Ctrl+T or Apple+T and set the proprieties like the “Top bar bg” but with 90px height and 10px in Y axis. So this rectangle will be just under the “Top nar bg” layer in the Layers panel.

Create the item menu text as you need. I use the font, “Droid Serif”, to create the menu, but you can use anything that you’d like. Position it at 20px from the right guide line.

I put 4 “spaces” (hit the spacebar 4x) between each item and the font-size is 18px.

Step 5 Place the Logo

Create a new folder named “Top Logo” in the HEADER group over all groups. Select it and go to Menu > Files > Import. In the resources folder i have included a sample of logo named “logo_zombie.psd”. Choose it and position it at 130px of the left and 5px of the top.

You can add a new FX style on this logo as you need.

Step 6 Create the Slider

Select the SLIDER group and create a rectangle like the step 3 and set the proprieties with 400px height and 100px in Y axis.

Rename it something like “Gradient” and double-click on the colored thumbnail in the layers panel to set the color to #77b400. Double-click on the layer to set the FX-layer like this:

Gradient Black (#00000) with opacity at 100% to Black with opactity at 0

Now, you should get a design like this :

This strategy of adding a “shadow gradient” instead of using fixed colors is important because it will allow us to easily change the colors later on by adjusting the base-rectangle color.

Next, Create a new folder named “slider_block“. Create a rectangle (with the Vector Tools (U) as always) in this group named “Transparency“.

Position it with those values : Double-click on the layer in layer’s panel to open the FX-Layer options. and set it like this :

Duplicate the “Transparency” layer, remove the FX-layer options and name it “picture area“.
Set the background opactity to 100% and resize it with this values to create the multi-layer effect:

Step 7 Create the Slider Control Elements

Create a new document 100px x 100px. Select the Custom Vector Shape (U) from the tools bar and click-right on the document to open the list of custom vector shapes. To create the arrow, I’ll start with a default arrow shape, and then we’ll customize it:

Create the shape with about a 50px width. Name the layer “Arrow slider“. Transform the shape as you need… with the white arrow tool (A) , you can adjust the vector paths to make your own arrow…

Put a FX-Layer on the layer with this settings :

Remove the background of this document and save the document as : ArrowSlider.psd in the PSD folder.

Place this arrow in the “slider_block” group. To do that, Menu > File > Import…
Choose the ArrowSlider.psd and place it at the position you want next to the slider.

Duplicate the arrow layer (Ctrl+J or Cmd+J) to create the left arrow and position it.
Use Menu > Edit > Transform > Rotate on horizontal axis to rotate the arrow in the proper direction.

Step 8 Highlight the Slider

Hide the “slider_block” group.
Create a new blank layer, and use the Circle selection tool (M) to create a circle about 200px.
Fill it in with white color.

Release your selection, and then use Filter > Gaussian Blur and set it at 50px.

Set the layer fusion on “overlay” and move it at the top of the slider.
Duplicate this layer 2 times and position the layers at the bottom the slider area at left and right…

Step 9 Enhance the Slider

Duplicate the “gradient” layer and rename it “dark bar”. Reduce the height to 20px and position it at the bottom ot the “gradient” layer.

Change the color of the layer to Black instead of the gradient color and set the layer background opacity at 60%.
Double-click to open the FX-layer options and create a dropshadow and innershadow like this:

Move the layer at 1px down.
Now you got a nice highlighted line between the slider and the black background.

Step 10 Make the Slider Float!

Open the background.jpg file from the resources folder (from the downloaded files) and go to Menu > Edit > Define pattern…. Then close the file.
Now select the background layer and double-click on it to open the FX-layer options and click on Patterns tab. Here select your new background, just created.

Now get the selection of the Transparency layer (Ctrl + click or Cmd + click on the layer).
Create a new layer named “Shadow” and place it under the “Transparency” layer.
Fill it in black and add a Gaussian Blur on.
Menu > Filters > Blurs > Gaussian Blur… and make it with 20px lenght.
Now transform it to make it like a dropshadow….

Once again, use Menu > Filters > Blurs > Gaussian Blur… but now with 5px length.
Now transform it again to resize it to match the transparency layer….

Keep selected the “Shadow” layer and take the “Transparency” layer’s selection (Ctrl+click or Cmd+click on the layer in layers panel).

Now, invert the selection Ctrl+i or Cmd+i and click on the icon to create an opacity mask on the “Shadow” layer. The shadow is now hidden behind the transparency area.

Step 11 Enhance the Logo

Just before we move on to the main part, we are going to enhance the logo to make it more dynamic.

Create a new blank layer under the logo layer and name it “shadow logo“. Get the selection of the logo layer and fill the “shadow logo” layer in black.

Add a Gaussian Blur on with 1,5px lenght.
Transform it. Ctrl + T or Cmd + T to transform it, move the referer point totally at left and move the right
handle to the bottom for 20px…

Now you got a nice depth shadow effect. You can also add more effect on the logo itself if you want!

Step 12 Define the Columns

Now we’re going to add some additional guides to create the 4 columns that the rest of the content has been designed with…

Create the following guides (Menu > View > New guide…) :

• 355px vertical
• 375px vertical
• 590px vertical
• 610px vertical
• 825px vertical
• 845px vertical

We have now 4 columns of 215px each and 20px between them.

Step 13 Slogan Block

Import the geek_zombie.png from the resources folder and position it at the middle of the first column.

Create a big line of text for the slogan with the text of your choice. I used the font “Droid Serif” at the size of 30px and line-height at 42pt. You can adjust the typography as you wish though

Draw a rectangle under the slogan with 7px of height.

On the black rectangle create the FX-Layer options like this :

You have now a nice bevel (pressed) bar.

Select the 3 layers (Zombie + Slogan + black bar) and do Ctrl + G or Cmd + G to group them. Rename the group “Slogan“. Note how we’re staying organized through the entire process!

Step 14 First Column Block

Take the Text tool and create a title. I’m using 30pt type again – notice how this is the same as the slogan, to help keep the typography similar. This helps to ensure a consistent, professional look across the whole design.

Define a zone of text at around 128px of the title and put some small “filler” text inside it. I’m using 13pt Arial, but you can use what you’d like.

Duplicate the black bar we have created for the slogan in the step before and put it under the text at 20px of the bottom of the text.
Resize it to make it fill the first column.

Create a picture area with the Vector Shape tool (U). 215 x 88px.
Duplicate it, rename it as “Tranparency_1col” and stretch it in height to get a block of 215 x 108px.
Press Ctrl+, or Cmd+, to move the layer down in the Layer panel.

Select the “Transparency” layer and copy the FX-Layer style to put it on the layer just duplicated (“Tranparency_1col“).

Now you can put you image over the picture area. Right-click on the image and select “Create clipping mask“.

Step 15 Create the Other Columns

You can now duplicate the first column (layer group), and then move it to the second column. Change the content (image/text) as needed.

Do the same for the columns 3 and 4…

Step 16 The Footer

Go to Menu > Image > Canvas size and edit the size of the canvas like this :

Draw a rectangle. Rename it like “Footer bg“. Do Ctrl+T or Cmd+T (Mac) and set the proprieties to :

Double click on the colored thumbnail in the layers panel to set the color to #101010. Double-click on the layer to set the FX-layer like this :

Select and duplicate the layers “dark bar” and “Gradient” from the Slider group.

Group the layers and place them under the “footer bg” in the Layers panel.

Move them to the bottom of the document.

Resize them to create the style you want.
In my example, I made the Gradient layer 35px tall and the “Dark bar” layer 8px tall…

Put the logo at the bottom right at 20px of guide right.

Duplicate the top menu items to put them in the footer over the “footer bg” layer.

Create a copyright line in Arial, 11pt, black color.

Duplicate the “footer bg” and resize it in height at 10px.
Move it just over the “footer bg”. That create a nice bevel effect for the bottom menu.

Done! Create Your Own Custom Versions!

Conclusion

Thanks for following along! I hope you’re able to use some of the tricks and techniques in this tutorial in some of your own projects. If you remember anything, I hope it’s that staying organized is crucial to creating a well-designed site. These same layer-sets can be used to create the HTML/CSS framework when you begin coding. Thanks again!

Sursa: http://webdesign.tutsplus.com/