How to Create I-Phone Like design
of 19
-
Upload
mamaria-paparia -
Category
Documents
-
view
220 -
download
0
Transcript of How to Create I-Phone Like design
-
8/13/2019 How to Create I-Phone Like design
1/19
retweet
18tweets
Home
About
Articles
Contact us
Mail to: [email protected] / Call : 91 11 9810018780
Article Written
on 23.09.2009
at 07:57 AM
by admin
How to Create I-Phone Like Button in PhotoshopHey guys back-to-back Photoshop Tutorials. In this Tutorial ill learn you how to createI-Phone
Like Button in Photoshop. This is very simple and quite effective tutorial. I hope you will enjoy
this tutorial.
Final Preview
This is what we gone do today
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
9 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
2/19
Step #1
Open photoshop and create a new document, mine is 550398pxwith a white background.
Step # 2
Fill the color in background layer, mine color is #333333.
Step # 3
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
9 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
3/19
Create a new layer name the layer Stripe gradient. Choose the Rectangular Marquee Tooland create
white stripe.
Styling the Stripe Layerdouble-click on the Stripe Layersthumbnail in the Layers Panel to open up the
Layer Styles dialog box, we will apply a vertical gradiant effectfor your background. Then click on the
color gradienton the right of the Gradient option to open up the Color Gradient Editor.
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
9 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
4/19
Double-click on left-color-stopand enter the color value #aaaaaa, double-click on left-center-color-stop
and enter the color value #cccccc, double-click on right-center-color-stopand enter the color value
#dddddd, then double-click on right-color-stopand enter the color value #ffffff.
Should look like this.
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
9 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
5/19
Step #4
Select the Rounded Rectangle Tooland create button, mine radius is 90X40px.
Now apply some effect
Gradient Overlay
Styling the Buttondouble-click on the Button Layersthumbnail in the Layers Panel to open up the Layer
Styles dialog box, we will apply a vertical gradiant effectfor your Button. Then click on the color gradient
on the right of the Gradient option to open up the Color Gradient Editor.
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
9 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
6/19
Double-click on left-color-stopand enter the color value #000000, double-click on left-center-color-stop
and enter the color value #222222, double-click on right-center-color-stop and enter the color value
#444444, then double-click on right-color-stopand enter the color value #666666.
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
9 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
7/19
Bevel and Emboss
Next apply the Bevel and Embosslayer style. Changing the style to Outer Bevel , than changing the valuesof Depth, Sizeand Soften. I choose to set the Depthat 100%, Sizeat 1pxand Softenat 10px
Important Part of this Tutorial: Keep the Angle at -90o, Altitudeat 40
o
Highlight mode:I choose to set the Opacityat 100%.
Shadow mode: I choose to set the Opacityat 100%.
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
9 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
8/19
Stroke
Finally we will apply the Stroke. First changing the values of Size. I choose to set the Sizeat 1px. Changing
the positionat Inside
I choose to set the Opacityat 80%.
Change the Stroke colorfrom the default to #222222
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
9 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
9/19
Should look like this.
Step #5
Select text tool and type text on front.
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
9 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
10/19
We will apply some effect for text.
Bevel Emboss
Double-click on the Text layers thumbnail in the Layers Panel to open up the Layer Styles dialog box. We
will apply Bevel Emboss, First Changing the Styleto Outer Beveland Techniqueto Chisel Soft, than
changing the values of Depth, Direction, Sizeand Soften. I choose to set the Depthat 130%, DirectionatDownSizeat 1pxand Softenat 0px
Important Part of this Tutorial: Keep the Angle at 90o, Altitudeat 30
o
Highlight mode:I choose to set the Opacityat 0%.
Shadow mode: I choose to set the Opacityat 50%.
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
19 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
11/19
Final Preview
Finally we have done this tutorial.
This is what we gone do today
Download the source file
If youd like to check your work, you may download the PSD file for this tutorial.
iphone-like-buttons.rar(21.3 kb)
Filed under: Photoshop, Tutorialsby admin
Promote Us
digg it
2diggs
22
Add it !Add it !
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
19 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
12/19
22
Tags: Photoshop,Tutorials
Related Articles:
if you enjoyed reading this article, please check out other related articles below:
How to Create Letterpress Typography in Photoshop
How to Create Smooth Glossy Text Effect in Photoshop
Create an Beautiful Box Icon in Photoshop
Retro Up Image in 2 Minutes : Photoshop
Pop Art Comic Tutorial : Photoshop
2 Comments
aioonsays on : September 23rd, 2009 at 5:58 pmSaid:
nice one! i like it
1.
Rapidsays on : October 2nd, 2009 at 7:49 amSaid:
Thanks for this, but could you make a tutorial for making the itunes buttons? Thanks.
2.
Submit a Comment
Name (required)
Mail (will not be published) (required)
Website
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
19 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
13/19
XHTML:You can use these tags:
Some Math 4 + 3= ?
SubmitComment
11 Awesome Calligraphy Fonts
Developers Paradise Sites of the Week for September 24th 2009
Subscribe
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
19 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
14/19
Search
Search
Calendar
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
19 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
15/19
September 2009
M T W T F S S
Aug Oct
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
19 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
16/19
M T W T F S S
Aug Oct
Pages
HomeAbout
Articles
Contact us
Categories
Css(18)
Design / Inspiration(44)
Freebies(25)
Graphic Design(10)Photoshop(14)
Resources(23)
Seo(1)
Tools(7)
Tutorials(27)
Typography(4)
Web development(5)
Wordpress(6)
Archives
October 2009
September 2009
August 2009
July 2009
June 2009
May 2009
Recent Posts
CssDesign / Inspiration
Freebies
Graphic Design
Photoshop
Popular Posts
How create good looking form without table
30 Websites with Maximum Orange
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
19 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
17/19
5 Steps to Write Better Css
How to Create Nice Scalable CSS Based Breadcrumbs
Create an Beautiful Box Icon in Photoshop
How to Create Letterpress Typography in Photoshop
Developers Paradise Sites of the Week for September 10th 2009
Tag cloud
CssDesignFontsFreebiesGraphic DesignGraphics DesignIconsInspirationInspitationPhotoshopResourcesToolsTutorialsTypographyWeb developmentWordpress
Friends
Abduzeedo
Alist Apart
Bittbox
CrazyLeaf Design
Css TricksDavid Walsh
Fudgegraphics
Fuel Your Creativity
Help Developer
Instant Shift
Line25
Mirificampress
My Ink Blog
Noupe
PSDFan
PSDtutsShare Brain
Six Revisions
Spoon Graphics
Toxel
Vandelay Design
We function
Web Designer Depot
Web Designer Ledger
Web designer Wall
You The Designer
Translator
SPONSORS
Check out UPrintingon YouTheDesigner.
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
19 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
18/19
Business CardsOnline
.
Back to top
General
These maybe of some interest
About Our Company
Testimonials
Contact Details
BlogSocial - Twitter, Flickr
Works
Examples of past projects
About Our Company
Testimonials
Contact Details
Blog
Social - Twitter, Flickr
Services
This is what where selling today
About Our Company
Testimonials
Contact DetailsBlog
Social - Twitter, Flickr
Contact Details
Want to hire us? get started here...
Free Project Assesment
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
19 10/8/2009
-
8/13/2019 How to Create I-Phone Like design
19/19
Email - [email protected]
Tel: 91 11 9810018780
Copyright 2009, All Right Reserved, Ace Infoway India Hire Ace
Infoway Indiafor your next design project. View ourportfolio.
to Create I-Phone Like Button in Photoshop, Tutorial | Developers P... http://aceinfowayindia.com/blog/2009/09/how-to-create-i-phone-l
