• Main Page
  • *** VIP ***
  • My account
  • Contact

Grafpedia

Premium graphics for smart webmasters RSS Feed
User: Pass:
Not a Member ? Sign Up
  • 2,764 Subscribers
  • Home
  • News
  • Templates
  • Tutorials
  • VIP Downloads
  • Stock Photos
Apply for a VIP Account and download ALL our VIP resources: PSD Layouts , Vector Files , Photoshop Brushes , Vector Icons, Stock Photos, Textures etc...
 

Grafpedia » Tutorials » Create an iPhone related website

33000 Premium resources for designers

Create an iPhone related website

in Tutorials, Web layouts by Razvan on May 2nd, 200915 Comments

iphone-layout

iPhone Layout

Hello my friends. Today I will show you how to create a website for a iPhone business.
Let’s say you create iPhone apps and you want to promote yourself. I will create a dark PSD layout with simplicity in mind. It is very important to let your users to see faster what your services are.

Preview full size layout

Do not forget to subscribe to our RSS feed or Follow us on Twitter

Let’s start as usual with a new document, with the following size : 960 pixel wide, and 900 pixels height. I will use the following color for the background : #232323
With Rounded Rectangle Tool, I will create some shapes.

1

For the blue shape i will add the following layer styles

2

3

4

5

This is my result

6

For the second shape ( the white one ) I will add the following layer styles.

7

8

9

This is my result so far

10

For the shapes from the bottom of my layout I will add the following layer styles

11

This is my result

12

I will select Pencil Tool. I will set my brush size to 1 pixel

13

I will create a horizontal Line on the Navigation bar

14

I will select Eraser Tool, and I will choose a smooth round brush

15

I will delete the extremities of this line

16

With Rounded Rectangle Tool, I will create a button

17

I will Rasterize this button, by right clicking on the Layer, then I will Choose Rasterize Layer.

18

I will select Rectangular Marquee Tool, and I will create a selection like in the following image.

19

I will hit the Delete key from my keyboard, then I will press on CTRL+D to deselect. This is how it looks so far my button.

20

I will add the following layer styles. Please note that you can download our VIP layer styles. I am sure you will speed up the work flow by using our layer styles.

21

22

23

This is my result so far

24

On the bottom part of the layout I will create another shapes.

25

For all these white shapes I will add the following layer styles.

2

3

4

5

This is my result

26

Now I will add some text over my layout

27

Then I will add some images

28

On the right side I will add some circles, and I will add some Photoshop layer styles from this set
I will use different layer styles for each shape, then I will write some text

29

Between the text blocks I will write also some minus signs with Horizontal Type Tool

30

With Ellipse Tool, I will create a round shape.

31

Then I will add another one with a white color.

32

I will rasterize this shapes, and with Doge Tool and Burn Tool i will add some shadows and highlights

33

I will write also some text

34

I will create a new layer ( press CTRL+SHIFT+ALT+N ) and with Brush Tool I will create some points over the layout.

35

Then i will change the blending mode to Overlay

36

This is my final result.

37

I hope you like this layout. I am waiting tomorrow for another tutorial. Do not forget you can suggest us tutorials.
Join our VIP membership if you want to download every PSD layout for each tutorial. For 9.95$ you can download our entire collection of Premium resources too.

Download Demo
  • Stumble upon something good? Share it on StumbleUpon
  • Submit this to DesignFloat
  • Share this on Blinklist
  • Share this on del.icio.us
  • Digg this!
  • Share this on Facebook
  • Post this to MySpace
  • Share this on Technorati
  • Buzz up!
  • Share this on Reddit

Responses to “Create an iPhone related website”

  1. klavins21 2.05.2009 um 3:02 pm

    this is very nice tutorial :)

  2. Pliggs 2.05.2009 um 7:03 pm

    Good tutorial, thanks for taking the time to post.

  3. Roosevelt P. 2.05.2009 um 7:24 pm

    Very good tutorial, loved your detailed steps :) .

  4. Roosevelt P. 3.05.2009 um 5:35 am

    Very good tutorial, loved your detailed steps :) .
    P.S. – Sorry, forgot to tell you great post!

  5. Danny 3.05.2009 um 12:54 pm

    Awesome Tutorial !

    I invite you to add your great tutorials to http://tutorials.extremestudio.ro/

  6. Hiren Modi 4.05.2009 um 4:15 am

    awesome tut, thanks for this wonderful tutorial.

  7. neeshu 8.05.2009 um 9:39 am

    can i get the metallic swatches you have used

  8. Karan 11.05.2009 um 2:44 pm

    Wonderful Tutorial..

  9. Rizwan 18.05.2009 um 1:04 am

    A Nice, Elegant, Soft & Pro-looking tutorial
    enjoyed very much

  10. Tirath 6.06.2009 um 8:58 am

    Awesome tutorial
    With very Nice web layout
    Really Graphpedia is amazing
    Your all web layouts tutorials & layouts are Awesome
    Thanks for posting your awesome tutorials for us
    keep up good work
    God Bless you :-)

  11. free mobile 23.06.2009 um 4:26 pm

    Nice post! GA is also my biggest earning. However, it

  12. iWantiPhone 12.07.2009 um 2:47 pm

    Nice results here. I’d like to know how you made the wallpaper for the iPhone though.

  13. morad 17.08.2009 um 7:12 am

    nice tutrial … thanx
    but after doin’ this … how to slice it to html (website) ?!

  14. admin 17.08.2009 um 9:37 am

    We have already a tutorial for doing this. Unfortunately the tutorial is only for VIP members:

    Read tutorial here

  15. neagaoleg 25.10.2009 um 6:55 am

    very nice tutorial, but I think the green light around the button is superfluous.
    IPhone style symbolizes purity and luster, but the green light around the button is chaotic

Leave a reply

  • 27000 Photoshop gradients 30000 Photoshop Layer Styles Thousand of Vector files Download all PSD layouts for each tutorial we write Download Vector Icons Thousand of Photoshop Brushes Download Layer styles and adobe illustrator swatches Download Stock Photos and Textures Sign Up
  • RSS Web design jobs

    • Nonpublic project #609030 by SeoWebLogix
    • Blog writer by acerothstien
    • Fading pictures and flash navigation by wiliss87
    • Banners for musicshops by BasepointMedia11
    • Video Views by marcuskw
    • Private Project PTJ 13 - WebGallery Only by simonix
    • Private Project PTJ 12 - WebGallery Only by simonix
    • php guys needed by Pascal79
    • Joomla template purchase and integrate by bnmagic
    • W3C validated xhtml conversion with script integration by begwise
  • Download Free Grafpedia Iphone App - Read our tutorials while you’re on the go
  • Categories

    • Actions
    • Brushes
    • Contests
    • Designing
    • Drawing
    • Effects
    • Gradients
    • Icons
    • Illustrator
    • Layer Styles
    • News
    • Patterns
    • Photo Effects
    • Stock Images
    • Swatches
    • Templates
    • Textures
    • Tutorials
    • Vectors
    • VIP Downloads
    • Web layouts
    • Wordpress Themes
  • Join Grafpedia's Affiliate program - Great conversion
  • Royalty-Free Vectors and Photohop Brushes
  • Pages

    • Terms of Use
    • Advertise
    • Commercial License
    • Contact us
    • Privacy Policy
    • Vip Membership
    • Write for us !
  • Write for Grafpedia

    Do you want a Free VIP account on Grafpedia for one year ?

    Write one high quality tutorial for us and we will give you a VIP account for one year.

    For more details please contact us

  • Last Posts

    • 35 high quality royalty free textures
    • Valentine’s day vector icons – Love icons
    • Create a valentine’s day post card
    • Hand drawn valentine’s day vector elements – Vector Doodles
    • Create a Hosting Layout In Adobe Photoshop
© 2008 | Grafpedia is proudly powered by Wordpress