how would i go about creating this ?

This is a discussion on "how would i go about creating this ?" within the Graphics and 3D section. This forum, and the thread "how would i go about creating this ? are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Graphics and 3D

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old May 9th, 2006, 04:40
Junior Member
Join Date: Feb 2006
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
how would i go about creating this ?

<noob question> I know this looks really simple, but could someone please tell me how you would go about creating the graphical effects and shadowing like on this keyboard. I used Photoshop CS. </noob question>

Many Thanks

Attached Images
File Type: jpg eclipse.jpg (24.2 KB, 43 views)
Reply With Quote

  #2 (permalink)  
Old May 9th, 2006, 05:23
herkalees's Avatar
Highly Reputable Member
Join Date: Jul 2005
Location: Massachusetts, USA
Age: 87
Posts: 576
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to herkalees Send a message via MSN to herkalees Send a message via Yahoo to herkalees
Re: how would i go about creating this ?

For the shadow, I'd make a new layer on top of the keyboard's layer, set a black to transparent gradient, drag the gradient tool from right to left, then set the gradient's layer opacity to about 15%.
Reply With Quote
  #3 (permalink)  
Old May 9th, 2006, 09:43
Highly Reputable Member
Join Date: Aug 2005
Location: 3rd Branch Up, Old Oak.
Age: 48
Posts: 658
Thanks: 0
Thanked 0 Times in 0 Posts
Re: how would i go about creating this ?

I would do it differently:-
The image appears to be composed of a 'daytime' keyboard, and a 'night' version of the same keyboard (keyboard in shadow with blue lighting effects, etc).

So, I would duplicate the daytime layer and convert the new one to the 'night' image. Your image would be quite complex to create from scratch but, the simplest way would be to create a new black layer over the top of the new image and reset the opacity until you can see the keyboard beneath. Then re-create all the blue lighting on a new layer. You won't need to do this for the whole keyboard as we're only going to use the right hand side of this layer.

You could merge these new layers before proceding but this way will provide more flexibility, should you wish to change anything later.

On the 'night' keyboard layer apply a 'mask' and choose the gradient tool. Make sure the foreground to background colours are set to black and white (press 'd' key, followed by 'x' key). You will now drag a black and white mask over the layer, noticing that black hides and white reveals. Thus, where you use the white part of your gradient, you will see the night keyboard revealed. Where the black part is used, it will be hidden but you can now see the 'day' keyboard beneath.
Cut and paste the layer mask from the 'night' layer to the layers above and apply a 'drop shadow' layer style to both keyboard layers.
Robert should then be your Mother's Brother.

You may find these PS-CS tutorials useful (I did, and do):-
http://www.greycobra.com/tutorials/photoshop/
&
http://www.photoshopcafe.com/tutorials.htm
Reply With Quote
  #4 (permalink)  
Old May 9th, 2006, 13:41
Junior Member
Join Date: Feb 2006
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Re: how would i go about creating this ?

Thanks guys. Thanks squirel for taking the time 2 write that out. Brownies all round .

I was particularly interested in how to do that blue graphical effect behind the keyboard.
Reply With Quote
  #5 (permalink)  
Old May 9th, 2006, 15:05
Highly Reputable Member
Join Date: Aug 2005
Location: 3rd Branch Up, Old Oak.
Age: 48
Posts: 658
Thanks: 0
Thanked 0 Times in 0 Posts
Re: how would i go about creating this ?

That's the tricky bit.
I don't think there's a quick way of achieving that and it still looking as good.
You'd need to practice.
In the meantime you might try the following

Create a new layer and draw out the areas you want the effect to apply to (remember, you only need to do it on the 'night' side). Name the layer something like "glow".

Then, I would create a new layer and apply a light blue (a light tourquoise might be better) to mid blue (on the darker side of middle though) circular gradient (light blue at the centre). Name this layer "Blue".
Move so the centre is over the number pad of the keyboard.

Now press and hold the 'Ctrl' key, and click on the "glow" layer to make it active. The path you created earlier will now be indicated. Now, invert the selection by pressing 'Ctrl' + 'i' together.

Release all the keys (without deselecting the layer). Then, click on the "Blue" layer so that what you're about to do affects only this layer. Now press the "Del" key. If you've done it right, the whole gradient will disappear, except for where it covered the "Glow" layer (the lit paths between the keys).

This is a very quick solution, but armed with this, you will see how you can take a bit more time and create a much better effect.

Reply With Quote
Reply

Tags
would, creating

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
re-creating this WDH Web Page Design 4 Feb 14th, 2008 07:46
Creating a CMS and Blog... marSoul Website Planning 12 Jan 3rd, 2008 00:56
creating pdf bahy PHP Forum 7 Aug 18th, 2007 00:37
Creating a sum with ASP Andrew1986 Classic ASP 4 Aug 1st, 2007 10:09
Creating a nav bar like this davva Web Page Design 22 Aug 30th, 2006 20:33


All times are GMT. The time now is 08:39.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

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 31 32 33 34 35 36 37 38 39 40 41 42 43