Grafpedia » Templates » Psd Themes » Create an iPhone related website
May
Create an iPhone related website
Psd Themes, Templates, Tutorials, Web layoutsHello 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.
We offer latest and most recent pass4sure 642-813 dumps with 100% success guarantee. Also get best 70-648 study packs and pass your 000-106 exam on initial attempt.
Newsletter
Subscribe for free to the grafpedia’s newsletter and get all updates coupons and exclusive free graphic resources every week. Read this page to have more information about the newsletter or fill the form below to subscribe now !
Responses to “Create an iPhone related website”
Trackbacks
- 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. | tripwire magazine
- The Ultimate Web Design Tutorials | Online Tutorials For Designers
- Web Design Tutorials: The Ultimate Roundup (part-III) | How It Easy (HIE) Computing community
- Around 160+ Great Web Design Tutorials Collection
Leave a reply
- Actions (7)
- Backgrounds (2)
- Brushes (31)
- Cinema 4D (1)
- Contests (4)
- Designing (16)
- Drawing (13)
- Effects (4)
- Gradients (4)
- HTML5 / CSS3 (2)
- Icons (52)
- Illustrator (3)
- Layer Styles (4)
- Logos (1)
- News (14)
- Patterns (5)
- Photo Effects (3)
- Psd Themes (101)
- Psd to HTML (1)
- Stock Images (20)
- Templates (103)
- Text Effects (1)
- Textures (17)
- Tutorials (129)
- Vectors (134)
- VIP Downloads (217)
- Web Elements (16)
- Web layouts (108)
- Wordpress Themes (1)
About Grafpedia
Grafpedia.com is a website created by web designers and dedicated to web designers. Find on Grafpedia lot of graphic design resources, icons, vectors, brushes, pictures, and tutorials! The grafpedia team publishes every week new psd files & tutorials. Become a VIP member and start to download right now!Pages
Partners
Facebook Grafpedia Group
© 2011 | Grafpedia is proudly powered by Wordpress edited by GrafikNetwork




































































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
Very interesting and informative tutorial I appreciate your thoughtful writes and step by step guide.
Thank you.