Grafpedia » Tutorials » Create an iPhone related website
Create an iPhone related website
in Tutorials, Web layouts by Razvan on May 2nd, 200915 Comments->
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.
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.
For the blue shape i will add the following layer styles
This is my result
For the second shape ( the white one ) I will add the following layer styles.
This is my result so far
For the shapes from the bottom of my layout I will add the following layer styles
This is my result
I will select Pencil Tool. I will set my brush size to 1 pixel
I will create a horizontal Line on the Navigation bar
I will select Eraser Tool, and I will choose a smooth round brush
I will delete the extremities of this line
With Rounded Rectangle Tool, I will create a button
I will Rasterize this button, by right clicking on the Layer, then I will Choose Rasterize Layer.
I will select Rectangular Marquee Tool, and I will create a selection like in the following image.
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.
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.
This is my result so far
On the bottom part of the layout I will create another shapes.
For all these white shapes I will add the following layer styles.
This is my result
Now I will add some text over my layout
Then I will add some images
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
Between the text blocks I will write also some minus signs with Horizontal Type Tool
With Ellipse Tool, I will create a round shape.
Then I will add another one with a white color.
I will rasterize this shapes, and with Doge Tool and Burn Tool i will add some shadows and highlights
I will write also some text
I will create a new layer ( press CTRL+SHIFT+ALT+N ) and with Brush Tool I will create some points over the layout.
Then i will change the blending mode to Overlay
This is my final result.
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 49$ you can download our entire collection of Premium resources too.
Responses to “Create an iPhone related website”
Leave a reply
Pages
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



















































this is very nice tutorial
Good tutorial, thanks for taking the time to post.
Very good tutorial, loved your detailed steps
.
Very good tutorial, loved your detailed steps
.
P.S. – Sorry, forgot to tell you great post!
Awesome Tutorial !
I invite you to add your great tutorials to http://tutorials.extremestudio.ro/
awesome tut, thanks for this wonderful tutorial.
can i get the metallic swatches you have used
Wonderful Tutorial..
A Nice, Elegant, Soft & Pro-looking tutorial
enjoyed very much
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
Nice post! GA is also my biggest earning. However, it
Nice results here. I’d like to know how you made the wallpaper for the iPhone though.
nice tutrial … thanx
but after doin’ this … how to slice it to html (website) ?!
We have already a tutorial for doing this. Unfortunately the tutorial is only for VIP members:
Read tutorial here
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