Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

July 01 2013

06:30

July 07 2011

13:48

Showcase Of Effective And Creatively Designed Contact Forms

Contact Form is a way for your visitors and clients to directly communicate with you regarding their queries and suggestions. Contact Forms not only let you interact with your visitors but are the most suitable way to welcome your visitors and encourage them to use your services.

Designing a creative and inspirational Contact Form not only does persuade the visitors but also lets you build their confidence in your goods and services. Here, we are featuring a breathtaking collection of some exceptional Website Contact Forms that help you get the best idea for your contact form. Enjoy!

Born with Design

Justdot

ArtFlavours

Needle

Andrina peric

Lionways

Spray Studio

Svn2ftp

Miki Mottes

The Waiting Room

Brian Handley Design

Beakable

Stan Gursky

Ctrln

UmQuarto

Kevadamson

Digital Base

Sandalias XTR

Wing Cheng

Denise Chandler

Jason Gray Music

Heart Breaker Fashion

Bright Bulb Studio

Kari jobe

Vismaad

Who is Leon

Foto Marcol

La Masa Mimatta

Nineteen eighty four

Fundo los paltos

Indofolio

Try triangle

Five Cent Stand

Social snack

Orca Bay Sea Foods

Bert Timmermans

Edpeixoto

Bio bak

We Love icons

I love colors

Christian Sparrow

Atelierdetour

Z indexmedia

Trendy webdesign

Lunalunera festival

Red Bull Soapbox Racer

Xruiz

CTM Argentina

Qwert City

Swiths

World Arcade

Carsonified

Brought To You By

Premier Survey
Do you want to advertise here? Click to get more info…

Sponsored post
feedback2020-admin
04:05

April 26 2011

11:49

Proximity in Design: Why I Can’t Use My Car’s A/C

Advertisement in Proximity in Design: Why I Can’t Use My Car’s A/C
 in Proximity in Design: Why I Can’t Use My Car’s A/C  in Proximity in Design: Why I Can’t Use My Car’s A/C  in Proximity in Design: Why I Can’t Use My Car’s A/C

I’m always fumbling with the A/C controls in my car. My daily commute is in hot, sunny Southern California, home of the courteous freeway driver. I can’t afford to take my eyes off the road for too long to find the control I’m looking for. Half of the time when I’m trying to adjust the temperature, I end up blowing my beard off because I’ve spun the wrong dial. If my wife’s in the car with me, I usually resort to asking her to do it for me.

Car in Proximity in Design: Why I Can’t Use My Car’s A/C

There’s a simple design principle that, had it been given greater attention, could have made this needlessly confusing interface much easier to use: proximity.

Dude, Which One’s My Car?

The human brain works by processing visual (and aural) input that occurs in proximity, either spatially or temporally. It then assembles this information into recognizable patterns and assigns meaning to it.

When I’m searching for my car in the parking lot, my eyes take in the size, shape, color and location of the cars I see (input). My brain then determines that I’m seeing an SUV, a truck, and 27 Honda Civics (patterns). Finally my brain tells me which vehicles are not mine until I “recognize” the pattern that is my car (meaning).

Tyrannosaur Attack

This pattern-making ability also causes our brains to assign meaning and create relationships even when they may not actually exist. In the film Jurassic Park, a Tyrannosaurus Rex grabs a smaller dinosaur in its teeth and shakes it around, killing it. The sound of this attack could not be recorded while shooting the scene (dinosaurs are, much to the chagrin of every school-age boy, still very much extinct). And so sound engineer Gary Rydstrom set out to create a sound that would convincingly sell the on-screen images.

Screenshot

So what sound recording did Rydstrom use to emulate a seven-ton predator ripping through the flesh of its prey? None other than his own Russell Terrier, Buster, playing with a rope toy! If you watch the scene knowing this, the effect is rather cheesy and unbelievable. But for the unsuspecting viewer, the brain willingly interprets the simultaneity of visual and aural inputs as indicating relationship and meaning. We see a dinosaur eating and we hear a simultaneous sound. Our brain tells us “this is the sight and sound of a T-Rex eating its prey.”

Proximity Without Purpose

In my car, as I’m trying to determine which button to press or dial to spin, my brain is analyzing the proximity of these various controls to discern a pattern which will help me make sense of their functions.

Let’s take a closer look:

Labels in Proximity in Design: Why I Can’t Use My Car’s A/C
Top Row (left to right): Air temperature, front window defrost, fan speed. 2nd Row: Fan off, fan mode (chest, feet, etc), A/C power. Bottom Row: Re-circulate, rear defrost, rear (back seat) fan, outside temperature indicator.

The controls are a combination of push buttons and dials that affects two basic functions: fan speed and air temperature. Each of the three control groups is comprised of one dial and one or two buttons. My pattern-seeking brain assumes that the buttons and dials are placed and grouped in a manner that has meaning. Unfortunately for my brain, in this case they aren’t.

Here’s a common two-step process I perform to cool down my car: I first turn on the A/C (step one) and then adjust the temperature (step two). To achieve this goal, I must:

  1. press the right bottom button and
  2. spin the left dial.

However, while avoiding collisions with tailgaters and cell-phone talkers, I often perform the wrong sequence. I:

  1. press the right bottom button (1, correct) and
  2. spin the same dial (2, incorrect).

By spinning the wrong dial (accidentally changing the fan speed) I end up with a hot jet blast to the face.

Reinforce Relationships

A very simple reorganization of my car’s controls would reinforce the relationships between controls and make the entire system easier to use. By placing all the controls that adjust fan speed, and all those that adjust air temperature close together, the position of each control will have assigned greater meaning and users’ overall mental effort will be decreased. The sum of these two factors (increased meaning and decreased mental effort) will result in greater user success.

Optimized in Proximity in Design: Why I Can’t Use My Car’s A/C
Controls are grouped by function to decrease mental effort and increase meaning.

In this revised layout, the controls’ proximity to the others reinforces their relationships. The left control group can be spun to adjust fan speed or pressed to turn the fan completely off. The right control group can be spun to adjust air temperature or pressed to further adjust the temperature (top button for automatic temperature, bottom button for A/C).

With these changes, my two-step process for cooling down the car is simplified. Step one is to turn on the A/C by pressing the bottom right button. Step two is to adjust the temperature by spinning the same dial.

Keeping Our Beards On

Understanding our brains’ fondness for creating meaning and patterns through proximity will help us create more intuitive interfaces and designs. If we take time to think about the way elements are positioned in relation to one each other, our interfaces will seem easier and more natural to our users. And nobody’s beard will get blown off.

Further Reading

(ik) (vf)


© dc for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: case study, grouping, interface design, meaning, mental effort, proximity, relationship

May 05 2010

13:00

Design a Clean Web Layout with the 960 Grid

In this tutorial, we’ll be designing a clean website layout using the 960 Grid System. You’ll see how working with this system can streamline web development workflow, and how to work with a grid system.

Final Image Preview

Final Image

Step 1: Create a new document

New Document

Start by creating a new document in Photoshop with a width of 1680px and a height of 1100px, then fill the background with a very light grey (#F9F9F9).

Step 2: Adding the grid

There are many grid systems available for use online, and there are good practices for creating systems of your own. The purpose of this tutorial is to ease you into a system if you haven’t tried one before. They can really make workflow a breeze, and are great for prototyping layouts.

Download the 960 grid system. Once you’ve downloaded Nathan Smith’s 960 Grid System extract it and then open up the templates folder. Open up the 960 12 column grid in Adobe Photoshop.

960 Grid System

Next we’re going to insert this grid into our document. Select the “12 col Grid” group, merge it then copy and paste it into our main document (you may be more comfortable directly editing in a copy of the template file provided in the system which provides guides of its own, this is more of a personal preference option on my behalf). The grid will be slightly small on height so stretch the grid vertically so it touches the top and bottom of the document.

960 Grid System

Now we need a baseline grid. A Baseline Grid will help with areas such as spacing of elements and line-height. First create a new document 24×24px, delete the background, then draw a single 1px line along the bottom of the document. We’re going to define this as a pattern: Edit > Define Pattern and give it a memorable name.

960 Grid System

Next return to your document and create a new layer. Fill this layer with the pattern, Edit > Fill this will create your Baseline Grid.

Horizontal Grid

Finally we’ll mark out our working area using guides. Create a new guide View > New Guide, select vertical and create guides at 360px, 840px & 1320px the reason we put these guides is so we get a 960px working area between 360px and 1320px and a central line 840px.

Convienent Guides

If you’re working directly from the 960 Template file, convienent guides are already setup for you marking the grid and gutters. Just go to View > Show > Guides

Grid Template

Save as a Template.

You can save this document as a template and reuse whenever necessary, it saves a lot of time and the canvas height can always be changed to suit. Again, over time you’ll likely prefer the full grid system with the extra guides.

Step 3: Starting the design

Now that we have our template sorted we can make a start on the design, the design will be split into 5 sections:

  1. Header
  2. Callout
  3. Content – Left
  4. Content – Right
  5. Footer
layout

Step 4: Add the header

We going to start at the top and work out way down so the header is first. Grab the Rectangular Marquee Tool and select an area across the width of the
document and a height of around 120pxturning on the rulers will help or drag down till you have filled 5 of the horizontal markers, then fill this with a dark grey (#2C2C2C). This header bar will hold the logo and the navigation.

header

Step 5: Insert your logo

Next insert your logo into the top left, lining it up with the second column of the grid giving the site a padding of 40px, for this project I am simply using a font based logo of 50 pt Century Gothic filled with a light blue (#ADC7D9) separating the two words by placing the second in bold and in white (#FFFFFF). Next apply an inner shadow to your logo element. I reduced the inner shadow opacity to 25% and gave it the following values, Distance: 2px , Choke: 0%, Size: 5px

logo

Step 6: Add navigation

The navigation is next on the list. To keep a simple clean look we’ll be using text based navigation. Select 18pt Arial and write out your navigation. Colour the active link which in this case is home in white (#FFFFFF) and fill the others with a light grey (#BBBBBB). Align these elements and place them into the center of the top header bar.

navigation

Step 7: Add the Callout

I call this section a callout because essentially that’s what it does—it calls out information about the page. Repeat the process for the header bar by selecting the Rectangular Marquee Tool but with a height of 240px then fill with the same light blue (#ADC7D9) as the logo. We’re are going to add a subtle gradient to the section so double click to bring up the Layer Style Panel and select Gradient Overlay. Choose the colour to transparent overlay then change the blend mode to overlay and reduce the opacity to 30%.

callout gradient

Step 8: Creating the Callout Background

As the company is called blue grid we’re going to add a grid styled background to the callout. To do this were going to use a similar technique to when we added the horizontal lines, first create a new document 25px by 25px. Once again delete the background to make it transparent and draw a single 1px line along the bottom and this time up one side and define it as a pattern Edit > Define Pattern.

grid

Step 9: Adding the Callout Background

Create a new layer above your callout layer and fill this layer Edit > Fill with your new pattern.

grid fill

Rotate this layer 15 Degrees apply a colour overlay of white and place over the callout bar. Create a new layer and merge it with the white gridded layer and name it.

grid

Apply a blend mode of Soft Light to this layer. Select your callout bar area either with the Rectangular Marquee Tool or Control + Click the layer. Next select the Rectangular Marquee Tool right click (Control + Click) and choose select inverse then Delete. This will remove all of the grid that isn’t in the callout area.

inverse

The next step is to make sure that the gridded area only extends to the edge of the 960px working area so pop your guides up if they are hidden. View > Show > Guides, next add a layer mask to the grid layer.

Layer Mask

Select the layer mask by clicking it then select the Gradient Tool (G) and choose a black to transparent gradient. We are going to use this to erase the grid that lies outside the main 960px area.

Make sure the gradient is set to Linear and is a black to transparent gradient. Start from the edges and drag the gradient in till it reaches the guides. Repeat this on both sides until you are happy with the look. You should notice that the layer mask should show the black gradient around the outside.

Layer Mask Gradient

Step 10: Adding the Callout Content

Our callout requires a page callout, which we shall do in text select Arial 45pt (#2C2C2C) and write your callout highlighting any essential words by placing them in bold. Under this place a small introductory sentence in a smaller 17pt. and place these on the left hand side of the callout bar.

tagline

Step 11: Adding the Slideshow

Grab your Rectangular Marquee Tool and drawing out a section between the far right and the middle guide, make the height 8 lines of the callout bar leaving 1 on top and 1 below and Fill with Dark Grey (#2C2C2C). This will be the background of the slideshow.

slideshow bg

Add a shadow to your slideshow background, double click to open the Layer style Panel select drop shadow change the colour to (#2C2C2C) select a Distance of 1px and a size of 10px.

slideshow shadow

Next you’re going to need some dummy content to place in the slideshow, I personally have taken a screenshot of my blog. Resize this so that it’s the same size as the slideshow then Select > Modify > Contract 10px , select the inverse of this as before and delete.

contract

Step 12: Content section

To start off the content section we are going to add a subtle gradient, use your Rectangular Marquee Tool to select all the area under the callout, next select the Gradient Tool (G). Select a gradient from (#F0F0F0) to transparent and drag the gradient downwards. Don’t go too far as the background should return to (#F9F9F9) by the bottom of the page.

content gradient

Step 13: Content – Left

Add an introductory paragraph in Arial 18pt #9C9C9C as well as styled link Underlined #A3BBCC.

introductory paragraph

Step 14: Adding a list of services

First add a heading for the section in Arial 25pt Bold #262626, proceed to add list items in 18pt Arial #9C9C9C to illustrate the bullet point you can either draw them out using the Elliptical Marquee Tool or use Alt codes Alt+7 colour these with the light blue (#A4BCCD) and align with the grid.

Services

Repeat this to add any additional information.

Additional Information

Step 15: Content – Right

The right hand section of the page will show a selection of recent news. First add a title in the same style as those previous Arial 25pt Bold #262626 and align this with the header of the services section. This section will list our latest news, Create a header for the news post in Arial 18pt #A4BDCD and place content under it in Arial 16pt #9C9C9C. Repeat this for 3 stories then place a link underneath in Arial Underline 16pt #A4BDCD to the news page.

Recent News

Step 16: Footer

Our last section is the Footer this will hold a login form, contact details and a few links. Start by selecting the bottom section of the document with the Rectangular Marquee Tool and fill it with Dark Grey (#262626).

Footer

We’re going to add the form now, first create a header Arial 20pt Bold (#FFFFFF) and place it on the left hand side of the footer. Then use the Rectangular Marquee Tool to create two rectangles these will be the input fields. Fill these will descriptions Arial 16pt #9C9C9C

Form

Repeat this for the submit button but use the Rounded Rectangle Tool(U), then add an Inner shadow to these elements, drop the opacity to 30%, size and spread to 0 and the distance to 10px. Add a “lost-password” link in Arial 13pt Underline #A4BDCD.

Input Shadow

Step 17: Footer – Right

Finally were going to finish up by adding some contact info, add a header Arial 20pt Bold (#FFFFFF) and line up with the form header, then add contact info below in Arial 16pt #FFFFFF.

Contact Us

Step 18: Check alignment and balance

Use the grid and the guides to check that everything is lined up and balanced, if not then adjust accordingly.

Final image with grid

Step 19: Relax, you’re finished

Hopefully, you’ve gotten a small grasp of how you can work with a grid system, and customize a basic system of your own. I would strongly encourage you to experiment with these systems more until working with them becomes second nature for you. Over time, working with a grid will make your job as a designer much easier!

Final Image

Download the PSD


February 16 2010

14:00

Creative Button Animations with Sprites and JQuery (Part 1: Photoshop)

This tutorial will show you how to build creative hover animations for buttons using sprites. The particular effect illustrated in this tutorial is inspired by the “Download” buttons on Tutorial9.net. Part 1 of this tutorial explains the design process in Photoshop. In Part 2 we will convert it to XHTML + CSS and as a bonus we will also use jQuery for a fading hover effect.

View Demo: Button Animation Demo

Skip to Part 2: Click Here (Demo files available for download)

Step 1 – Create the shape

Create a new document in photoshop fit to your needs. In this instance, I’ll be creating a 570px wide button. The height of the new canvas should be twice the height of the button needed (explained later, but for now just use the top half of the canvas).

shape of the button

We’re going to make a rounded button. Use the Rounded Rectangle Tool with a radius of 5px. Keep in mind that we will add a border and shadow, so leave some white space around the button.

Step 2 – Add layer styles

We will use a pretty basic color scheme for the initial state of the button. The surprise (I call it the wow-effect because of the contrast) will be added in the color scheme of the hover state button.

Note from Editor

The diagrams shown are not in English, but the diagrams will apply to English versions of Photoshop as well. We apologize for any inconvenience.

Drop shadow

Drop shadow

Gradient overlay

Gradient overlay

Stroke

Stroke

Step 3 – Highlights

highlight, gloss

Select the the shape of the button: Ctrl (Cmd for Mac users) + Click the Layer Thumbnail in the Layers Palette. Now add a new layer and fill the selection with the color #fafafa (use the Bucket tool). Select the selection tool and move the selection 1px to the right. Now click backspace and the selection will be deleted. Now you need to move the selection 1px up and delete the selection. The last step is to move the selection 2px down and delete the selection. What remains is a sleek highlight effect on the left side of the button.

Apply the same trick on the right side of the button.

Step 4 – Button text

Type the text "Send" or "Submit", or whatever you wish:

  • font: Helvetica Neue Bold
  • font-size: 35px
  • color: #343434

Add also the following layer style:

Text with layer styles

Final image

Text with layer styles


Step 5 – Prepare the canvas for a sprite

We’re going to make a sprite of the buttons. Why sprites and not single images? Why combine all those images? Isn’t it quicker to have smaller images?

Using CSS sprites allows you to greatly increase your websites speed by using single image files that contain multiple graphics. In other words, when you have many images to be used, instead of having them as different individual files, we combine them into one. Therefore, the client computer only downloads one image for all the different graphics to be displayed.

Measure the height of the button. My example has a height of 64px. The link hover button will have the same size as the link button so my Photoshop canvas needs to have a height of 128px (= 2 x 64px). Use Ctrl/Cmd + Alt + C to change the height of the canvas.

Step 6 – The link hover button

Select all layers in the layers palette and place them in one group. Duplicate this group and move it down to the empty space. Now you have the same two buttons in the sprite.

Sprite image

Change the color of the copied text to #fffff and change the drop shadow:

Drop shadow text hover button

Add the following layer styles on the copied button shape:

Drop shadow: don’t change it.

Gradient overlay

Gradient overlayhover button

Stroke

Stroke hover button

Final touches

We’re going to add some gloss to the link hover button. Select the the shape of the button: Ctrl/Cmd + Click the Layer Thumbnail in the Layers Palette. And fill a new layer with the color #ffffff using the Bucket tool. Cut Away the bottom part with the Selection tool and change the opacity to 7%.

Gloss effects

The final touch is changing the opacity of the highlights to 30% (which is already applied in the image above), because the original ones are too strong for the green button.

Final image

Final sprite

Save the image/sprite for web and you’re finished with the design part. It’s time to move on to the development part!

Continue: Continue to Part 2 »


Ending Design Note: Create your own buttons

Use colors that fit into your design. To create a simple 3D effect for the link hover button, you can also flip (the background of) the link button vertically. This works fine if you’re using a simple gradient.

Don’t use too many buttons like these on your website. If you wan’t to use several buttons on one page it’s better to create small buttons.


December 14 2009

14:00

How To Create a Sleek Audio Player Interface in Photoshop

In this tutorial you’ll learn how to design a sleek audio player interface in Adobe Photoshop.

Materials Needed:

Step 1

Create a new document 600×400 px big.

Step 2

Image Description

Using the radial gradient tool from #5e6c78 to #20282e, fill the background.

Step 3

Image Description

Duplicate background and go to Filter-Noise-Add Noise. Use these settings: Amount:5%; Uniform; Monochromatic. Click Ok. Now lower the layer opacity to 30%. You should now have something like this.

Step 4

Image Description

Ok, let’s make the audio player now. Create new layer (Ctrl+Shift+N) and name it "Base". Using the Rounded Rectangle Tool, radius 5px, draw a rectangle like in the picture and use these blending options. Colors in the gradient are: #3d4a59; #1c2329; #303a44. Stroke color: #191919.

Step 5

Image Description

Now create a new document, 600×600px. Go to Edit-Fill-50%Gray. Then Filter-Noise-Add Noise with these settings: 80%; Gaussian; Monochromatic. Then Filter-Blur-Radial Blur with these settings: 100; Spin; Best. Press Ctrl+F to repeat it. You should have something like this now.

Step 6

Image Description

Copy the previously made image to the audio player document above the "Base" layer. Change the blending mode to Soft Light and Opacity to 80%. Let’s name this layer "Texture". Ctrl+click on "Base" layers thumbnail to make a selesction. Then press Ctrl+Shift+I to reverse the selection. Hit delete.

Step 7

Image Description

Create new layer. Name it "Higlights". Using Pencil tool draw two lines – one at the top of the base and one at the bottom. Erase the sides of the lines with a large soft brush and lower the opacity to 80%. To keep things more organised, select the previous three layers – Base, Texture and Highlights – and press Ctrl+G to gropu these layers. Name the group "Base".

Step 8

Image Description

Now let’s make the speakers on both sides. Create new layer. Name it "speaker". Ctrl click on the "Base" layer’s thumbnail to make a selection. Then take Rectangular marquee tool and while holding Shift+Alt drag across to get a selection like in the picture. Fill it with #3a3a3a. Dublicate the layer, name it "texture". Go to blending options and add these settings: Pattern Overlay with the attached "Spiderman pattern", Blend mode – Overlay and Scale 12%.

Step 9

Image Description

Create a new layer, name it "Highlight". Again using the Pencil tool draw a 1px highlight like in picture. Then create a new layer and name it "Shadow". Using Elliptical marquee tool draw a selection like in picture, fill it with black and go to Filter-Blur-Gaussian Blur, Radius 5. Erase all the unnecessery parts to get result like in picture and lower the Opacity to 50%.

Step 10

Image Description

Group the previous four layers – Speaker, Texture, Highlight and Shadow and name the group Speaker_left. Duplicate the group, flip it horizontally and place on the right side. Name it "Speaker_Right".

Step 11

Image Description

Let’s make the Close, Minimize and Maximize buttons. Create new layer, name it "Button". Using Rounded Rectangle tool, Radius 2px, draw a small button, fill it with white. Then add these Blending options. The gradient colors are #8799ab-#485664-#8799ab. Stroke color is #384251.

Step 12

Image Description

Create a new layer, name it "X". To get the X, you can either use a font you like or draw it with pencil tool like i did. I used a Gradient overlay (Dark grey-Lighter gray) and 1px drop shadow to get this effect.

Step 13

Image Description

Group the previous 2 layers and name the group "X". Then make the other 2 buttons by dublicating the "X" group and just changing the "X" layer. Again I used Pencil tool to draw the symbols.

Step 14

Image Description

Now let’s make the screen. Create new layer, name it "Screen Base". Draw a rectangle like in the picture and fill it with gradient from #303a44 to #4a5968.

Step 15

Image Description

Create a new layer. Name it "Gloss". Draw a smaller rectangle and fill it with White to Transparent gradient. Lower the Opacity to 10%.

Step 16

Image Description

Again using 1px white Pencil tool draw some highlights around. Just play with it to get results you like.

Step 17

Image Description

Let’s fill the screen with some content. Make a new group and Name it "Content". I’ll try to keep this part short and understandable. For each thing make a new layer. First, using a soft round brush add a highlight where the timer will be. Then, using a digital-looking font (I used a font called Digital-7, you can get it in DaFont) type in the 03:59 or any other numbers. Then type in the name of the track (I used font Walkway Bold). The, using Arial, type in Repeat and Shuffle. The Shuffle mode is on, so make it a bit lighter than Repeat. Then I added some small details using the techniques described before – 1px Pencil tool lines and some Round soft brush for light effects.

Step 18

Image Description

Create a new layer. Name it "Progress bar". Using Rounded Rectangle tool, radius 5px, draw a thin, long rectangle. Fill it with black and add these blending options: Gradient Overlay from #303a44 to #1c2329 and 1px Stroke, color #afbbc6, Opacity 16%. Now create a new layer and name it "Progress knob". Draw a small rectangle and fill it with black. Use these Blending options – Inner shadow: Blend mode- Normal, Color – White, Distance 0, Size 1; Gradien Overlay: #5c6977-#212a30-#5c6977; Stroke: Size 1px, Color #222b31.

Step 19

Image Description

Now there’s gonna be a lot of buttons to make. So make a new group and name it "Buttons". First we’ll make the base for the Play, Stop and other buttons. Create new layer, name it "Button Base". To get the shape I used a 5px Radius Rounded Rectangle tool and then drew the sides with pencil tool. If you want, you can make it simply as a rounded rectangle shape. Then add these Blending Options – Drop Shadow: Angle – -90 (Un-check the "Use Global Light"), Distance – 1, Size 0. Inner shadow: Blend Mode – Normal, Color – White, Angle – 90 (again don’t use the global light), Distance – 1, Size – 0. Gradient Overlay: #4d5c6a-#1c2329-#303a43.

Step 20

Image Description

Now we’ll add a lot of small details using just 1px Pencil tool and then erasing end of the lines. Just look at the picture to get the idea. Remember that you have to play with the Opacity to get nice results.

Step 21

Image Description

To make the Play, Pause, Stop, Forward and Backward buttons, I simply drew rectangles and triangles and combined them for the Forward and Backward buttons. Add this Gradient Overlay to the control button layers: #b7d9ed-#458fb2-#b7d9ed.

Step 22

Image Description

Now let’s make the final 4 buttons – Repeat, Shuffle, Playlist and Equalizer. All of them are going to be the same – just a small rounded rectangle with these Blending Options: Drop Shadow – Opacity 26%, Spread 100%, Size 1. Inner shadow: Blend mode – Normal, Color – White, Opacity 40%, Angle – 90, Distance – 1, Choke – 100%, Size – 0. Gradient Overlay: #3d4a59-#1c2329-#303a44. Then copy these buttons and place them like in the picture.

Step 23

Image Description

Now add the text. I used font Arial and these Blending Options: Drop Shadow – Opacity 42%, Angle 90, Distance 1, Size 0. Gradient Overlay: #4c5a69-#8495a7.

Step 24

Image Description

Once again add some small details with the pencil tool.

Step 25

Image Description

Now the last thing we’ll add to the interface is the volume control. First, draw the icon with Pencil Tool. Add the same gradient as the Playback control buttons (Play, Pause etc.).

Step 26

Image Description

Using the Rounded Rectangle tool, Radius 5px, draw a rectangle and add the same gradien as the Progress Bar.

Step 27

Image Description

Draw 10 small circles. The active ones will have a gradient like the Volume icon and the rest of them will have a simple Light gray to Dark gray gradient.

Step 28

Image Description

Let’s finish it and add some reflection. Merge all of the layers except the background. Duplicate it, add 1,2px Gaussian Blur, flip it Vertically and using Round soft eraser, erase the bottom.

Conclusion

So here it is – your finished audio player interface. You can try to make it a real skin for the Xion player. But if a lot of people would like to see a tutorial about making this design into a working skin, then I’d be glad to make a tutorial about that too.

Download the PSD

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...