drop shadow??

This is a discussion on "drop shadow??" within the Graphics and 3D section. This forum, and the thread "drop shadow?? are both part of the Design Your Website category.



 Subscribe in a reader

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

Notices


Reply
 
LinkBack Thread Tools
  #1  
Old Aug 3rd, 2006, 10:03
Reputable Member
Join Date: Dec 2005
Location: scotland
Age: 27
Posts: 160
Thanks: 1
Thanked 0 Times in 0 Posts
drop shadow??

Hi,

can anyone give me a link or some directions to how you create the drop shadow effect

like the one used for the container at happy cog

I can create the gradient effect but i'm not sure how you get 2 images to be lined up in the centtred and used as 1 images.

I'm sure this is probably really basic but i can't find a tutorial that tell me how to do what i want to achieve. The 1's i find seemed to be for an older version of photoshop or its to do about text drop shadows.

any help would be excellent
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Aug 3rd, 2006, 11:11
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: drop shadow??

What software are you using?
It's pretty simple in Photoshop 8 (CS) and Fireworks.
Just add a layer style to the layer you want to have the drop shadow.

EDIT:
If you mean the effect of the shadow on the main content panel, this is not drop shadow.
It's a gradient effect, either side of the panel, in opposing directions.
The whole image is then sliced into 2 main sections, each having the same width.
The banner forms a Nav bar and is positioned at the top of the page.
A slice of the empty main section (1 pixel high) is then placed on the background.
Both are centralised using CSS and the background image is set to repeat so the page appears to lengthen automatically, regardless of the amount of content.
Doing this can create positioning problems which you may need to work-around for a smooth transition.

Last edited by Legacy_Staff; Aug 3rd, 2006 at 11:20.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Aug 3rd, 2006, 11:27
Reputable Member
Join Date: Dec 2005
Location: scotland
Age: 27
Posts: 160
Thanks: 1
Thanked 0 Times in 0 Posts
Re: drop shadow??

i'm using CS2.

yeh the gradient thang which is used for the body background. I know how to implement this CSS but i have no idea how to create the image in photoshop. I can create the gradient but not sure how you then set them centralised.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Aug 3rd, 2006, 12:34
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: drop shadow??

Okay, now I don't understand what you're trying to do.
Bit more explanation, pls.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Aug 3rd, 2006, 14:14
Reputable Member
Join Date: Dec 2005
Location: scotland
Age: 27
Posts: 160
Thanks: 1
Thanked 0 Times in 0 Posts
Re: drop shadow??

sorry, i'll try make a bit more sence

I want to make an image like the one (at happy cog) which creates the big shadow effect all down the page. I understand that this is some sort of gradient effect but unsure of how you go about making an image with the gradient effect on the left and right hand side of the image. (not sure if that makes sence )

could you tell me how i go about creating the shadow image that is used for happy cog?

sorry if i'm still sounding dumb , cheers 4 the help tho
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Aug 3rd, 2006, 14:29
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: drop shadow??

Okay, I got ya now:-
I'm assuming you have a new image open.
Create a new layer and fill it (or whatever solid colour).
Then, with the layer active (highlighted) press <'ctrl' + 'T'> and resize the width to however wide you want the gradient to be.
Click the move tool and you will be asked to apply the resize.
Apply it.
You now have a white column.
Press 'ctrl' and click the column layer.
You will see a selection appear all around the column.
Select the gradient tool and choose the gradient you want to apply.
Hold the 'shift' key and drag the gradient across the width of the column.
Do this until you are happy with the gradient.
Then deselect the layer by pressing <'ctrl' + 'D'>
Duplicate the layer by dragging it over the 'add new layer' button.
You will now have two columns (you will only see one as the new one is covering the original).
Making sure the duplicate layer is now active, select "Edit / Transform / Flip Horizontal".
Now move one column to the laft of the stage, and the other to the right.
Because you are using a gradient, it's hard to see the extremities on the edge of the stage so I usually move them inside the edge of the stage to make sure it's all on.
Now make a new layer and create you content panel.

And 'Robert' is now your Mother's Brother.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Aug 4th, 2006, 14:05
Reputable Member
Join Date: Dec 2005
Location: scotland
Age: 27
Posts: 160
Thanks: 1
Thanked 0 Times in 0 Posts
Re: drop shadow??

cheers dude
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Aug 4th, 2006, 14:08
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: drop shadow??

Welcome m8.
(Took me a while to figure out how it was done too, seems easy now huh? )
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
drop, shadow

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
Trying a drop shadow design, IE won't let me. Henrik Hansen Web Page Design 7 Sep 26th, 2007 18:29
CSS drop shadow effects with images wickedmoon Web Page Design 2 Aug 26th, 2007 22:01
Expanding background drop shadow konnor5092 Web Page Design 1 Feb 22nd, 2007 07:39
Need help Short Cut Keys on Drop Shadow in Fireworks csun Graphics and 3D 1 Jul 7th, 2006 13:23
Drop Shadow w/fireworks liquid Graphics and 3D 4 Dec 24th, 2003 09:15


All times are GMT. The time now is 02:23.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization 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