Psdtuts+ Updates - Create a Detailed Web User Interface for an Audio-Themed Application

Create a Detailed Web User Interface for an Audio-Themed Application

Posted: 04 Nov 2011 08:38 AM PDT

In this tutorial we will show you how to design a detailed user interface for an audio-themed web application. Let's get started!

Tutorial Assets

The following assets were used during the prodction of this tutorial.

IconSweets2

Step 1

Create a new file. Set Width to 1590 and Height to 838 and the resolution to 72 PPI.

Step 2

Make a new Group and name it Background. Inside that group create a new layer and using Rectangle Tool (U) make a white #ffffff vector shape to cover the whole
canvas and apply the Layer Style.

Step 3

Create a new Group and name it Body. Using Rounded Rectangle Tool (U) set the Radius to 5 px and draw a shape exactly like the one in the example, afterwards apply
the Layer Styles.

Step 4

Inside the Group Body create a new Group and name it Horizontal Devider. Using Rectangle Tool (U) set the fill color to #dfdfdf and make nine horizontal lines
just like the ones in the example.

Step 5

Make another Group inside the Body Group and name it Blue Devider. Using Pen Tool (P) draw to shapes like the ones in the example. Set the fill color to
#8dc5fc and apply the Layer Styles.

Step 6

Using Horizontal Type Tool (T) set the Font to Arial , Bold and the Font size to 17,63 px and type down the words “General” and “Maintenance” exactly like in the example
and apply the Layer Style.

Step 7

Usint Horizontal Type Tool (T) set the Font to Arial and the font size to 11 px, and write down the text in the example. Remember to change between Bold and Regular
on the subcategories. Set the fill color to #557590.

Step 8

Create a new Group and name it Dots. Using Elipse Tool (U) make three shapes like the ones in the example. Set the fill color to #98cbfc and apply the Layer Styles to the shapes in front of "Daily" and "Weekly". For the shape in front of "Monthly" using Ellipse Tool (U) make another small circle inside of the blue one and set the fill color to #ffffff.

Step 9

Make a new Group and name it Pop up. Using Pen Tool (P) draw a shape just like the one in the example. Set the fill color to #90c7fc and apply the Layer Styles.
Afterwards set the Fill to 12%.

Step 10

Now using Horizontal Type Tool (T) write down the following text inside the Pop up shape "Perform maintenance services once a month and display the following message: “If you are seeing this error message, please clear your cache at exactly 4pm and hit the Refresh button.” Set the fill color to #557590 and apply the Layer Style.

Step 11

Create a new Group and name it Switch. Inside that Group using Rounded Rectangle Tool (U) set the Radius to 50 px and make a shape like the one in the example. Set
the fill color to #7cb9fb and apply the Layer Styles.

Step 12

Using Rounded Rectangle Tool (U) keep the Radius to 50 px and make a white #ffffff shape just like the one in the example and apply Layer Styles.

Step 13

Now we will use Horizontal Type Tool (T) to write down “OFF.” Set the Font to Arial, Bold and the Font size to 11.79 px and the fill color to #ffffff. Apply the Layer Style and this step is done.

Step 14

Following Step 11, 12 and 13, make six more Switches.

Step 15

Create a new Group and name it Drop Down. Using Rounded Rectangle Tool (U), set the Radius to 2 px and draw a shape like the one in the example. Set the fill color to
#8fc6fc and apply the Layer Styles.

Step 16

Using Pen Tool (P) draw a triangle facing down just like the one in the example. Now select Horizontal Type Tool (T) and write down the word “Low” and apply the Layer Style.

Step 17

Duplicate the last step or simply duplicate the Drop Down Group and place it in the bottom just like in the example.

Step 18

Make a new Group and name it Save Button. Using Rounded Rectangle Tool (U) set the Radius to 2 px and draw a shape like the one in the example. Set the fill color to
#90c7fc and apply the Layer Styles.

Step 19

Using Horizontal Type Tool (T) write down the word “SAVE” using the Font Arial, Bold and the Font size 10 px. Set the fill color to #ffffff and apply the Layer Style.

Step 20

Create a new Group and name it Discard Button. Using Rectangle Tool (U) draw a shape like the one in the example, set the fill color to #ff5656 and apply the Layer Styles.

Step 21

Using Horizontal Type Tool (T) write down the word “DISCARDS,” set the fill color to #ffffff and apply the Layer Style.

Step 22

Create a new Group and name it Additional Text. Using Horizontal Type Tool (T) write down the phrase “No changes have been made!” and set the fill color to #ff6161.

Step 23

Make a new Group and name it Footer. Inside using Rectangle Tool (U) draw a shape at the bottom of the canvas just like the one in the example. Set the fill color to
#58a1fa and apply the Layer Styles.

Step 24

Now using Horizontal Type Tool (T) write down the words “Sound System Website | Privacy Policy | Terms of Use”, set the fill color to #ffffff and apply the Layer Style.

Step 25

Create a new Group and name it Header. Open the IconSweets2 psd and import the Headphones glyph from the Media Folder inside the
PSD. Keep it at it’s original size, place it on the top left corner and apply the Layer Styles.

Step 26

Using Horizontal Type Tool (T) set the font Arial, Italic and the Font size to 18 px and write down "Sound System." Afterwards using Horizontal Type Tool (T) again, keep the Font but change the Font size from 18 px to 10 px and write down "3.0" just like in the example. Apply the Layer Styles.

Step 27

Make a new Group and name it Info – Logout. Use Horizontal Type Tool (T), set the Font to Arial, Regular and the Font size to 14 px and write down "Welcome" just like in the example. Set the fill color to #70818f. Now using Horizontal Type Tool (T) set the Font to Arial, Bold and the Font size to 14 px and write down "John Doe Logout" keeping the same fill color #70818f.

Step 28

Create a new Group and name it Navigation. Using Pen Tool (P) draw a shape like the one in the example. This will represent the first tab in the navigation menu. Set the fill color to #ebeff4 and using Rectangle Tool (U) draw five more shapes just like the ones in the example. Apply the Layer Styles to all six layers.

Step 29

Now using Pen Tool (P) draw a shape like the one in the example. This will represent the selected tab plus a sub menu space. Set the fill color to #58a1fa and apply the Layer Styles.

Step 30

Now we will add text inside the unselected tabs. Using Horizontal Type Tool (T) write down in each tab the words indicated in the example. Set the Font to Myriad Pro, Regular and the Font size to 14 px using #557590 as a fill color. Using Horizontal Type Tool (T) keep the previous settings, change the fill color to #ffffff and write down the word "Options" inside the selected tab. Apply the Layer Style only to the "Options" layer.

Step 31

Open once again the iconSweets2 psd and import the glyphs indicated in the example. Place each and every one corresponding to the number indicated in the example. Reduce the size to 50% and set the fill color to #4d5969 and apply the Layer Styles to all the glyphs.

Step 32

Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 14 px and write down the word “Comapny:” using #ffffff as a fill color. Now
using Horizontal Type Tool (T) set the Font to Myriad Pro, Bold and the Font size to 14 0x and write down the word “Company Name”. Apply the Layer Style to both layers.

Step 33

Make a new group and name it Submenu.Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 14 px and write down the words “Time&Date”,
“Display” and “Language”. Apply the Layer Style.

Step 34

Now we will make the selected button of the Submenu. Using Rectangle Tool (U) draw s rectangle shape just like the one in the example. Set the fill color to #b8dbfd and apply the Layer Styles. Using Rectangle Tool (U) make another shape this time at the bottom of the previous one, just like shown in the example.

Step 35

Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 14 px and write down the word "General". Set the fill color to #2e3b47 and apply the Layer Style.

Step 36

Now to make the sub-submenu. Using Pen Tool (P) draw a shape just like the one in the example. Set the fill color to #eaeef3. Make another one to mirror the previous one, set the fill color to #ffffff and apply the Layer Style to both layers.

Step 37

Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 12 px and write down the word "Settings". Set the fill color to #2e3b47 and apply the Layer Style. Use Horizontal Type Tool (T) keeping the same settings, except this time we will change the fill color from #2e3b47 to #ffffff and apply the last Layer Style.