Shadow

Creating A Cool 3D Web Design Effect

Final Product What You’ll Be Creating


step 1

Create a new document with 1000x750px. Double click on the background’s layer and in Color Overlay and choose a dark brown.


Step 2

Enable the rulers (View>Rulers) on your document and add some guides as shown below. Create 2 horizontal guides, the first at 30px and the second at 250px. After that add 2 vertical guides at 100px and 900px.


Step 3

Create a rectangle with the Rectangle Tool (U). Use the guides for reference. Rename the layer to header.


Step 4

Choose black for your foreground color. Select the Ellipse Tool and create the shape that will be the shadow. Make it a bit higher than the white rectangle as shown. Rename the layer to shadow and put it below the header layer.
After that, convert it to Smart Filters, apply a Gaussian Blur and change the opacity to 60%.


Step 5

With the header layer selected, double click it to open the Layer Style dialog box. Select Gradient Overlay. Change the gradient style to radial. For the colors I used dark reds.


Step 6

Next, select the Line Tool (U) and choose the lighter color of the header gradient and create a line. After that choose black and create another line just 1 pixel above the red line. Select the 2 lines and group them. Rename the group the “vDivider”.
Go to Layer>Layer Mask>Reveal All. Using the Gradient Tool, select a Radial Gradient from Black to White and apply a mask to our group. Start the gradient from the center of the group.


Step 7

Create the menu using the Horizontal Type Tool (T). Use white for the text color. Select all links and group them. Rename the group White Links.
Duplicate the group and place it below the white links, change the text color to black and move the group 1 pixel up and left. That will create a nice 3D effect, exactly like the one we did with the lines.


Step 8

Repeat the Step 6, but this time create the horizontal dividers for the links. Use the line tool to draw a red line and 1 pixels to the left draw a black line. Group them and duplicate the group 5 times. Distribute the groups as shown below.


Step 9

Select all groups of lines and group them. Rename the group toDividers. After that apply a layer mask, Layer>Layer Mask>Reveal All. But this time use Linear.


Step 10

Open the pattern file, or get any pattern you like. Select all and go to Edit>Define Pattern. Call it webPattern.
Duplicate the header layer and rename it to pattern. Go to its Layer Styles and disable the Gradient Overlay and set a Pattern Overlay. Choose the ‘webPattern’ we created and change the Blend Mode to Color Overlay.
After that apply a layer mask to the pattern layer using a Radial Gradient.


Pattern


Step 11

Now we can add the logo and the spoon.
For the text, type Psdtuts+, select a bold typeface for the PSD and a regular or light for the TUTS. Go to Layer Styles and apply a Drop Shadow, Gradient Overlay, and Stroke. That’s a very common and beautiful effect.


Conclusion

When we work with web design we have to consider file sizes, browser compatibilities and many other issues. Sometimes little details like subtle gradients or borders using 2 colors can create a very nice visual effect or unique style without requiring many hacks and adjustments.

8 Comments

  • Catherine Tyrah

    Hi,

    We’d like to introduce to you our explainer video service which we feel can benefit your site psdtutr.com.

    Check out some of our existing videos here:
    https://www.youtube.com/watch?v=oYoUQjxvhA0
    https://www.youtube.com/watch?v=MOnhn77TgDE
    https://www.youtube.com/watch?v=NKY4a3hvmUc

    All of our videos are in a similar animated format as the above examples and we have voice over artists with US/UK/Australian accents.

    They can show a solution to a problem or simply promote one of your products or services. They are concise, can be uploaded to video such as Youtube, and can be embedded into your website or featured on landing pages.

    Our prices are as follows depending on video length:
    0-1 minutes = $169
    1-2 minutes = $279
    2-3 minutes = $389
    3-4 minutes = $489

    *All prices above are in USD and include a custom video, full script and a voice-over.

    If this is something you would like to discuss further, don’t hesitate to get in touch.
    If you are not interested, simply delete this message and we won’t contact you again.

    Kind Regards,
    Catherine

  • Claudia Clement

    Hi, We are wondering if you would be interested in our service, where we can provide you with a dofollow link from Amazon (DA 96) back to psdtutr.com?

    The price is just $77 per link, via Paypal.

    To explain what DA is and the benefit for your website, along with a sample of an existing link, please read here: https://pastelink.net/1nm60

    If you’d be interested in learning more, reply to this email but please make sure you include the word INTERESTED in the subject line field.

    Kind Regards,
    Claudia

  • Hey, this is Eric and I ran across psdtutr.com a few minutes ago.

    Looks great… but now what?

    By that I mean, when someone like me finds your website – either through Search or just bouncing around – what happens next? Do you get a lot of leads from your site, or at least enough to make you happy?

    Honestly, most business websites fall a bit short when it comes to generating paying customers. Studies show that 70% of a site’s visitors disappear and are gone forever after just a moment.

    Here’s an idea…

    How about making it really EASY for every visitor who shows up to get a personal phone call you as soon as they hit your site…

    You can –

    Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It signals you the moment they let you know they’re interested – so that you can talk to that lead while they’re literally looking over your site.

    CLICK HERE http://www.talkwithwebvisitor.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

    You’ll be amazed – the difference between contacting someone within 5 minutes versus a half-hour or more later could increase your results 100-fold.

    It gets even better… once you’ve captured their phone number, with our new SMS Text With Lead feature, you can automatically start a text (SMS) conversation.

    That way, even if you don’t close a deal right away, you can follow up with text messages for new offers, content links, even just “how you doing?” notes to build a relationship.

    Pretty sweet – AND effective.

    CLICK HERE http://www.talkwithwebvisitor.com to discover what Talk With Web Visitor can do for your business.

    You could be converting up to 100X more leads today!

    Eric
    PS: Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
    You have customers waiting to talk with you right now… don’t keep them waiting.
    CLICK HERE http://www.talkwithwebvisitor.com to try Talk With Web Visitor now.

    If you’d like to unsubscribe click here http://talkwithwebvisitor.com/unsubscribe.aspx?d=psdtutr.com

  • Hello, my name’s Eric and I just ran across your website at psdtutr.com…

    I found it after a quick search, so your SEO’s working out…

    Content looks pretty good…

    One thing’s missing though…

    A QUICK, EASY way to connect with you NOW.

    Because studies show that a web lead like me will only hang out a few seconds – 7 out of 10 disappear almost instantly, Surf Surf Surf… then gone forever.

    I have the solution:

    Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. You’ll know immediately they’re interested and you can call them directly to TALK with them – literally while they’re still on the web looking at your site.

    CLICK HERE http://www.talkwithwebvisitor.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works and even give it a try… it could be huge for your business.

    Plus, now that you’ve got that phone number, with our new SMS Text With Lead feature, you can automatically start a text (SMS) conversation pronto… which is so powerful, because connecting with someone within the first 5 minutes is 100 times more effective than waiting 30 minutes or more later.

    The new text messaging feature lets you follow up regularly with new offers, content links, even just follow up notes to build a relationship.

    Everything I’ve just described is extremely simple to implement, cost-effective, and profitable.

    CLICK HERE http://www.talkwithwebvisitor.com to discover what Talk With Web Visitor can do for your business, potentially converting up to 100X more eyeballs into leads today!

    Eric
    PS: Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
    You have customers waiting to talk with you right now… don’t keep them waiting.
    CLICK HERE http://www.talkwithwebvisitor.com to try Talk With Web Visitor now.

    If you’d like to unsubscribe click here http://talkwithwebvisitor.com/unsubscribe.aspx?d=psdtutr.com

  • Good day,

    My name is Eric and unlike a lot of emails you might get, I wanted to instead provide you with a word of encouragement – Congratulations

    What for?

    Part of my job is to check out websites and the work you’ve done with psdtutr.com definitely stands out.

    It’s clear you took building a website seriously and made a real investment of time and resources into making it top quality.

    There is, however, a catch… more accurately, a question…

    So when someone like me happens to find your site – maybe at the top of the search results (nice job BTW) or just through a random link, how do you know?

    More importantly, how do you make a connection with that person?

    Studies show that 7 out of 10 visitors don’t stick around – they’re there one second and then gone with the wind.

    Here’s a way to create INSTANT engagement that you may not have known about…

    Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It lets you know INSTANTLY that they’re interested – so that you can talk to that lead while they’re literally checking out psdtutr.com.

    CLICK HERE http://www.talkwithwebvisitor.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

    It could be a game-changer for your business – and it gets even better… once you’ve captured their phone number, with our new SMS Text With Lead feature, you can automatically start a text (SMS) conversation – immediately (and there’s literally a 100X difference between contacting someone within 5 minutes versus 30 minutes.)

    Plus then, even if you don’t close a deal right away, you can connect later on with text messages for new offers, content links, even just follow up notes to build a relationship.

    Everything I’ve just described is simple, easy, and effective.

    CLICK HERE http://www.talkwithwebvisitor.com to discover what Talk With Web Visitor can do for your business.

    You could be converting up to 100X more leads today!

    Eric
    PS: Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
    You have customers waiting to talk with you right now… don’t keep them waiting.
    CLICK HERE http://www.talkwithwebvisitor.com to try Talk With Web Visitor now.

    If you’d like to unsubscribe click here http://talkwithwebvisitor.com/unsubscribe.aspx?d=psdtutr.com

  • Hi, Eric here with a quick thought about your website psdtutr.com…

    I’m on the internet a lot and I look at a lot of business websites.

    Like yours, many of them have great content.

    But all too often, they come up short when it comes to engaging and connecting with anyone who visits.

    I get it – it’s hard. Studies show 7 out of 10 people who land on a site, abandon it in moments without leaving even a trace. You got the eyeball, but nothing else.

    Here’s a solution for you…

    Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. You’ll know immediately they’re interested and you can call them directly to talk with them literally while they’re still on the web looking at your site.

    CLICK HERE http://www.talkwithwebvisitors.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

    It could be huge for your business – and because you’ve got that phone number, with our new SMS Text With Lead feature, you can automatically start a text (SMS) conversation – immediately… and contacting someone in that 5 minute window is 100 times more powerful than reaching out 30 minutes or more later.

    Plus, with text messaging you can follow up later with new offers, content links, even just follow up notes to keep the conversation going.

    Everything I’ve just described is extremely simple to implement, cost-effective, and profitable.

    CLICK HERE http://www.talkwithwebvisitors.com to discover what Talk With Web Visitor can do for your business.

    You could be converting up to 100X more eyeballs into leads today!

    Eric
    PS: Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
    You have customers waiting to talk with you right now… don’t keep them waiting.
    CLICK HERE http://www.talkwithwebvisitors.com to try Talk With Web Visitor now.

    If you’d like to unsubscribe click here http://talkwithwebvisitors.com/unsubscribe.aspx?d=psdtutr.com

  • Hey, my name’s Eric and for just a second, imagine this…

    – Someone does a search and winds up at psdtutr.com.

    – They hang out for a minute to check it out. “I’m interested… but… maybe…”

    – And then they hit the back button and check out the other search results instead.

    – Bottom line – you got an eyeball, but nothing else to show for it.

    – There they go.

    This isn’t really your fault – it happens a LOT – studies show 7 out of 10 visitors to any site disappear without leaving a trace.

    But you CAN fix that.

    Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It lets you know right then and there – enabling you to call that lead while they’re literally looking over your site.

    CLICK HERE http://www.talkwithwebvisitors.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

    Time is money when it comes to connecting with leads – the difference between contacting someone within 5 minutes versus 30 minutes later can be huge – like 100 times better!

    Plus, now that you have their phone number, with our new SMS Text With Lead feature you can automatically start a text (SMS) conversation… so even if you don’t close a deal then, you can follow up with text messages for new offers, content links, even just “how you doing?” notes to build a relationship.

    Strong stuff.

    CLICK HERE http://www.talkwithwebvisitors.com to discover what Talk With Web Visitor can do for your business.

    You could be converting up to 100X more leads today!

    Eric
    PS: Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
    You have customers waiting to talk with you right now… don’t keep them waiting.
    CLICK HERE http://www.talkwithwebvisitors.com to try Talk With Web Visitor now.

    If you’d like to unsubscribe click here http://talkwithwebvisitors.com/unsubscribe.aspx?d=psdtutr.com

  • Hey, this is Eric and I ran across psdtutr.com a few minutes ago.

    Looks great… but now what?

    By that I mean, when someone like me finds your website – either through Search or just bouncing around – what happens next? Do you get a lot of leads from your site, or at least enough to make you happy?

    Honestly, most business websites fall a bit short when it comes to generating paying customers. Studies show that 70% of a site’s visitors disappear and are gone forever after just a moment.

    Here’s an idea…

    How about making it really EASY for every visitor who shows up to get a personal phone call you as soon as they hit your site…

    You can –

    Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It signals you the moment they let you know they’re interested – so that you can talk to that lead while they’re literally looking over your site.

    CLICK HERE http://www.talkwithwebvisitors.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

    You’ll be amazed – the difference between contacting someone within 5 minutes versus a half-hour or more later could increase your results 100-fold.

    It gets even better… once you’ve captured their phone number, with our new SMS Text With Lead feature, you can automatically start a text (SMS) conversation.

    That way, even if you don’t close a deal right away, you can follow up with text messages for new offers, content links, even just “how you doing?” notes to build a relationship.

    Pretty sweet – AND effective.

    CLICK HERE http://www.talkwithwebvisitors.com to discover what Talk With Web Visitor can do for your business.

    You could be converting up to 100X more leads today!

    Eric
    PS: Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
    You have customers waiting to talk with you right now… don’t keep them waiting.
    CLICK HERE http://www.talkwithwebvisitors.com to try Talk With Web Visitor now.

    If you’d like to unsubscribe click here http://talkwithwebvisitors.com/unsubscribe.aspx?d=psdtutr.com

Leave a Reply

Your email address will not be published. Required fields are marked *