1 / 11

How to design an app

How to design an app. By: Samuel Saavedra. Step 1. First, look for inspiration. Create a mood board to play around with ideas – print it out and keep looking at it, absorbing all the details to inspire you for the project. Step 2.

tricia
Download Presentation

How to design an app

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How to design an app By: Samuel Saavedra

  2. Step 1 • First, look for inspiration. Create a mood board to play around with ideas – print it out and keep looking at it, absorbing all the details to inspire you for the project.

  3. Step 2 • Next, start developing your main ideas by sketching them out. Try to focus on the function of the app. Do not draw in too many details at this stage – they’ll distract you from the practical side of it. Your main objective is to make the application easy to use.

  4. Step 3 • In Photoshop, set the canvas at 640x960px (iPhone 4/4S) or 640x1136px (iPhone 5) and, using guides divide the screen into four areas for the top header, the content, the player at the bottom and the background. Using the Rectangle tool, rough out your interface. Create a button in the top header section using four rounded rectangles on four different layers, stacked on top of each other.

  5. Step 4 • On your bottom button layer go to Layer>Layer Style>Inner Shadow. Set the blend mode to Linear Burn, opacity to 75% and chose a grey color, then select Bevel & Emboss and set the style to Emboss. For the layer above, add an Outer Glow at 40%, with a Linear Burn blend mode set to grey, with 5% spread and 16px size. Add a grey drop shadow at 10%; choose Linear Burn, set the distance to 10px and size to 2px.

  6. Step 5 • Choose the Rectangle Marquee tool, setting the feather to 10px. Select the very top layer and add a Clipping Mask (use the arrow in the Layers panel). Then go to Blending Options (using the arrow in the Layers panel again) and check the ‘Layer Mask Hides Effects’ box in the Advanced Blending section.

  7. Step 6 • On the second from top layer, add a Bevel & Emboss Layer Style, set the technique to Chisel Hard, the size to 10px and select Rolling Slope from the Gloss Contour options. Then add an Inner Glow at 70%, Linear Burn, choose a grey color and set the size to 3px.

  8. Step 7 • Make the very top layer smaller than the rest: this will add to the 3D effect. Select Bevel & Emboss, set the size to 50px, angle to 90º and altitude to 70 degrees. Add a Gradient Overlay at 10% with a Linear Burn blend mode, and a white to black gradient at 90 degrees with a Linear Burn blend mode. Draw an icon to sit on top (an arrow here).

  9. Step 8 • Duplicate your button to create any other buttons that you want to add (including different icons on the top layer). Next, create the border of your interface and give it all a bit of polish.

  10. Step 9 • For the list of radio stations, draw a rectangle shape to cover the main content area, setting the fill to 0%. Add a Bevel & Emboss, with an Outer Bevel style and size of 2px, and then add an Inner Shadow at 75% with a Normal blend mode, in black, with a distance of 7px and size of 10px. Add an Inner Glow at 20%, with a Normal blend mode, black color and 90px size.

  11. Step 10 • Export the separate parts of your interface by converting each element in different layers to Smart Objects. Name them and, finally, go to File>Scripts>Export Layers to Files.

More Related