You are viewing our Forum Archives. To view or take place in current topics click here.
iLewis' Search Bar Tutorial!
Posted:
iLewis' Search Bar Tutorial!Posted:
Status: Offline
Joined: Apr 01, 201113Year Member
Posts: 3,088
Reputation Power: 728
Status: Offline
Joined: Apr 01, 201113Year Member
Posts: 3,088
Reputation Power: 728
[ Register or Signin to view external links. ]
Here is another useful tutorial I have made for you experienced and learning graphic designers. If you are stuck making something in Photoshop then ask me to do a tutorial to help you!
Skill Level Required: Intermediate
Firstly create a new canvas with the sizes of 470 x 135, with a resolution of 72. Make sure you make the background content 'Transparent'.
[ Register or Signin to view external links. ]
After that you're ready to make the base shape, click the shape tool button located on the left of Photoshop.
[ Register or Signin to view external links. ]
[ Register or Signin to view external links. ]
[ Register or Signin to view external links. ]
Now copy the values above into the top bar when you select rounded rectangle.
Now we want to add effects to the rounded shape. The effects we are going to add are extremely good for web pages design.
Inner Shadow
[ Register or Signin to view external links. ]
Stroke
[ Register or Signin to view external links. ]
It should now look like this:
[ Register or Signin to view external links. ]
If it doesn't go back and re-check the steps, if it does read ahead!
Adding Text
[ Register or Signin to view external links. ]
Simply click the Text tool or 'T' then select horizontal type tool.
Then just click your mouse on the canvas to create the text, we are going for the font HelveticaNeue with a size of 13 pt using the colour #e4e4e4 and the text type as Crisp.
Adding text effects
Now you have your text, we only need a little bit of drop shadow for this one so copy the drop shadow below.
[ Register or Signin to view external links. ]
YOU'RE DONE!
Final product:
[ Register or Signin to view external links. ]
Hope you liked this tutorial today guys, If you need any help with Photoshop then PM me!
Here is another useful tutorial I have made for you experienced and learning graphic designers. If you are stuck making something in Photoshop then ask me to do a tutorial to help you!
Skill Level Required: Intermediate
Firstly create a new canvas with the sizes of 470 x 135, with a resolution of 72. Make sure you make the background content 'Transparent'.
[ Register or Signin to view external links. ]
After that you're ready to make the base shape, click the shape tool button located on the left of Photoshop.
[ Register or Signin to view external links. ]
[ Register or Signin to view external links. ]
[ Register or Signin to view external links. ]
Now copy the values above into the top bar when you select rounded rectangle.
Now we want to add effects to the rounded shape. The effects we are going to add are extremely good for web pages design.
Inner Shadow
[ Register or Signin to view external links. ]
Stroke
[ Register or Signin to view external links. ]
It should now look like this:
[ Register or Signin to view external links. ]
If it doesn't go back and re-check the steps, if it does read ahead!
Adding Text
[ Register or Signin to view external links. ]
Simply click the Text tool or 'T' then select horizontal type tool.
Then just click your mouse on the canvas to create the text, we are going for the font HelveticaNeue with a size of 13 pt using the colour #e4e4e4 and the text type as Crisp.
Adding text effects
Now you have your text, we only need a little bit of drop shadow for this one so copy the drop shadow below.
[ Register or Signin to view external links. ]
YOU'RE DONE!
Final product:
[ Register or Signin to view external links. ]
Hope you liked this tutorial today guys, If you need any help with Photoshop then PM me!
The following 4 users thanked iLewis for this useful post:
#2. Posted:
Status: Offline
Joined: Oct 29, 201014Year Member
Posts: 1,174
Reputation Power: 58
Status: Offline
Joined: Oct 29, 201014Year Member
Posts: 1,174
Reputation Power: 58
Great tutorial, I am sure this will help many people.
- 0useful
- 0not useful
#3. Posted:
Status: Offline
Joined: Aug 27, 201113Year Member
Posts: 227
Reputation Power: 8
Status: Offline
Joined: Aug 27, 201113Year Member
Posts: 227
Reputation Power: 8
Pretty sweet tutorial maaan
- 0useful
- 0not useful
#4. Posted:
Status: Offline
Joined: Jun 11, 200915Year Member
Posts: 612
Reputation Power: 37
Mate you should put the final image at the start.
- 0useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.