Create a clean, concise personal profile Web interface

Tutorial Details

Software: Adobe Photoshop

Version (preferably): CS5

Difficulty: Simple

Estimated time of completion: 1-2 hours

Final effect

Download the original file Demo

In this design tutorial, we will use Adobe Photoshop to create a simple, elegant personal profile Web interface that is suitable for browsing on the phone or ipad. In this tutorial, we will touch on the following elements: simple shapes (rectangles, lines, arrows, and so on), layer styles (many), characters, paragraph styles, and many of the design tips and Photoshop techniques you can apply to your interface design. The complete code version can be found on the ThemeForest stylish CV and is an HTML theme.

About the author

Ivystudio is a popular new author in ThemeForest, who created this particular theme. Passion for web creativity and communication is at the heart of Ivystudio. We are happy to create a concise and useful theme interface with rich details. On the www.ivystudio.it you can see more of our works, if you want to contact us, always welcome!

You can also download the complete version of the code in themeforest to see how it was created.

First step

To facilitate the layout, we will use the 960s grid system ( download from here). When the download is complete, open the "960_grid_12_col.psd" file.

The height of this file is smaller than our final design. So we select the image "Canvas size" Height: 1558 pixels.

We tend to remove the "pink stripes" and if you want to hide it, visually close the layer in the Layers panel.

We also need to open the rulers and guides. So we show the view with extra content/ruler/on Zishing (so that the elements are aligned with our guides).

Second Step

We're going to create the background now. In the Layers panel, right click on the background layer, select the background layer, renamed "BG".

Classification:

• PS Getting Started Tutorial