Web Design Forum: Photoshop Tutorial: Make a realistic vector phone - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • This topic is locked

Photoshop Tutorial: Make a realistic vector phone Using the vector (Pen) tool

#1 User is offline   BenG 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 766
  • Joined: 20-March 07
  • Reputation: 0
  • Location:Bradford, West Yorkshire
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 22 March 2007 - 01:15 PM

Creating a realistic vector phone

In this tutorial our aim is to create a realistic phone. I based my phone on an XDA IQ. I am getting one of these phones in a few days too, so It is of interest to me. I found my picture on Google image results.
1. Find an ideal picture of the phone. I chose one off Google
Posted Image
2. For this tutorial we will be using the pen tool a lot, so make sure you are confident with it, and how to use it effectively.
Posted Image
With the following settings

Posted Image

3. I selected a random colour from the black area. I ended up using #07110d. 1. 4. With the Pen tool, click on the top left corner (shown at 1) then move to point 2, moving to point 3. Repeat this process around the black area of the phone

Posted Image

Now we are near the bottom I s

Posted Image

To get the smooth curve corner, all you need to do is click as normal at point 1, then go straight to point 2. Do not let go of the mouse buttom. Instead drag the mouse along to the black dot. This will curve the line. Keep the marker parallel with the lowe line of the phone.

Repeat this process in reverese for the lower left corner.

Your completed vector shape and image should resemble something like this.
0

#2 User is offline   BenG 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 766
  • Joined: 20-March 07
  • Reputation: 0
  • Location:Bradford, West Yorkshire
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 22 March 2007 - 01:17 PM

Posted Image


On the layers palette, untick the small 'eye' icon as shown here

Your vector layer will disappear, but is still there.

Posted Image


7. Select the phone layer. We do this so when we create another vector, it will be underneath the first vector we made. Now mask out the sliver shiny bit in a colour like #97b3ba


Posted Image


Posted Image


Posted Image

Posted Image


Posted Image


Posted Image
0

#3 User is offline   BenG 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 766
  • Joined: 20-March 07
  • Reputation: 0
  • Location:Bradford, West Yorkshire
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 22 March 2007 - 01:23 PM

The rest of the tut is found at
http://www.webdesign.org/web/photoshop/dra...ctor.10405.html

Heres the final result
Posted Image
0

#4 User is offline   Ben 

  • Web Designer Forum Admin
  • View gallery
  • Group: Root Admin
  • Posts: 2,840
  • Joined: 24-August 06
  • Reputation: 103
  • Gender:Male
  • Location:Essex, UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 22 March 2007 - 01:35 PM

WOW! What a gorgeous result!

Thanks for sharing this Ben :)

Topic Pinned! :)
0

#5 User is offline   olivier 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 279
  • Joined: 22-February 07
  • Reputation: 1
  • Location:Colchester - UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 22 March 2007 - 01:47 PM

Very cool tutorial mate!

Thank you for sharing ;)

Oli
0

#6 User is offline   BenG 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 766
  • Joined: 20-March 07
  • Reputation: 0
  • Location:Bradford, West Yorkshire
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 22 March 2007 - 01:53 PM

No problem, I have plenty more too, I'll bung em on tonight :friends:

This is my first ever topic pinnage whooo :drinks: :yahoo:
0

#7 User is offline   Designer Karly 

  • Dedicated Member
  • Group: Platinum Membership
  • Posts: 196
  • Joined: 14-October 06
  • Reputation: 1
  • Gender:Male
  • Location:Basildon, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 22 March 2007 - 01:54 PM

Great tutorial, thanks for this.

And a Pin! Well that's not bad for your first tutorial Ben.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • This topic is locked

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users