We’ll be using various different tools, such as shape tools, gradient tools, different blending mode tools and loads of great techniques. Moreover, you can easily customize this tutorial with your own icons or wallpapers.
At the end of the tutorial i’ve gather some useful iPad design related stuff. Hopefully it will help you in future projects.
- Program: Adobe Photoshop CS4
- Difficulty: Intermediate
- Estimated Completion Time: 1 hour
Below is the final image we will be working towards.
Open a new document with a White Background 624×921 at 72dpi. Add a background picture. Draw a rounded rectangle with the Rounded Rectangle Tool. Use the Fill Pixels option with a Radius of 22 pix. The color is #434040. Name the Layer “Border”.
Cut a hole in the “Border” layer. Select the Border layer by Ctrl Clicking it. Modify the selection by clicking, Select > Modify>Contract, Contract the selection by 6 pixels. Delete the pixels from the “Border Layer”.
Make a selection of the hole in the “Border”, then make a new layer above it and fill it with Black. Name the layer “Black Glass”. Draw a rectangular layer and name that layer “Screen”. You should now have three layers.
- Black Glass
Now we will go back and add some depth to the layers. Select the “Border” and add some Layer Styles. Bevel and Emboss, Color Overlay and Stroke.
Select the “Black Glass” Layer and add a Inner Shadow and a Radial Gradient.
Radial Gradient Hex Colors #5b5c60 # 000000. Your image should now look like the one below.
Now we will add some life to the interface. First add a wallpaper, I’ve used this picture:
Drag the wallpaper above the “Screen” Layer, then point your mouse right between the layers of the “Screen Layer” and the Wallpaper and Alt-Click when you see the pathfinder symbol appear. Resize the wallpaper to fit the screen.
Add the Dock by drawing a rectangle, then Press Edit > Transform > Skew to bring the top edges inwards to create depth. Name the Layer “Dock”.
Add a Gradient Overlay with colors from #454647 to #fafbfc
Then lower the transparency of the Dock to 58%.
Onto the main iPad interface. Draw a thin selection across the top of the screen and fill with black to recreate the status bar. Lower the opacity to allow the background to show through.
Use the pencil tool to draw a simple battery icon, then add a simple selection of text elements.
We will now add some icons to the Dock and the Desktop. Download this iPad Icon Pack. (You can get the traditional icons by doing a search on Google). Open the Safari icon and place it above the “Dock” layer and resize it.
Create a reflection for the Safari Icon. Duplicate the icon, then flip it vertically, Edit > Transform > Flip Vertical.
Lower the opacity to 21% and add a Transparent Gradient Overlay (Black to Transparent).
Select and cut the area of the the icon that is hanging over and your reflection is done.
Repeat the steps for the other icons on the Dock.
Add the other icons to the desktop and finish them off with names beneath each icon.
Now we will add all the little buttons that make the iPad function. Lets start by drawing a small circle for the start button, then draw a small rounded rectangle with a radius of 2 pixels.
Apply a Gradient Overlay to the small circle. Hex Colors: #4c4d51 #060606. Then add a Gradient and a White thin Stoke to the Small Rounded Circle and lower the Opacity of the layer to 19%.
Button A and B were created by drawing a Rounded Rectangle with a radius of 2 pixels.
Create Button C by drawing a Rounded Rectangle with the Shape Layers option selected with a radius of 2 pixels.
Add an Anchor Point, with the Add Anchor Point tool (looks like the pen tool with a plus sign). move the point 3 pixels to the left to create a nice curve. Place all the buttons behind the “Border” layer.
We now have all of the objects and effects that we need to complete our design. Lets take a look at the final result.
Design iPad Resources
The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768 x 1024 so anything you design in the Photoshop file can easily be brought over to the SDK.
Fully editable Apple iPad in PSD format. Every element you see is editable via vector masks. Everything is scaleable.
The Internet world exploded with the news of the Apple tablet launch last week. Named the iPad, it’s set to bring yet another revolution to the way people access and browse the web. An iPad icon would be a sensible addition to any web designer’s resources toolbox, so let’s fire up Photoshop and create our very own detailed iPad icon graphic.
With the release of the Apple iPad, we all knew it wouldn’t take long for the first tutorial on how to recreate it would appear on the net. In this tutorial, you’ll be learning how to design the Apple iPad in Adobe Photoshop.
So, what to do when everyone seem to release iPad icons but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here’s my take on the smaller sizes of an Apple iPad icon, called iPixelPad in the sizes 48px, 32px and 16px. Everything drawn pixel-perfect from scratch. Heck, even the wallpaper.
As you can see it doesn’t take much to re-create a product using Photoshop. All you need is a reference photo, a basic knowledge of the great tools in Photoshop and a little time to experiment. This technique can be used to draw other Apple awesome products.