Create a clean, concise personal profile Web interface

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.