SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I make a design like this?

    I seen this website, with a cool header that looks like its flat on top.. like a ledge. How can I make something similar to that in Photoshop?

    how.jpg

    It looks like the design is flat, but they just put a lighting effect over it to make it look flat.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    It takes a bit of skill to do that in Photoshop. Do you know Ps at all? You can Google just about every Photoshop trick. It's amazing how many tutorials there are out there, but knowing what to Google is the hard bit. There's no effect 'over it' though, as far as I can tell. They've just used a lot of techniques to create that image.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've made websites in Photoshop but I'm not an expert with it. I watch the videos all the time on the internet. I have found many website with tutorials (the website I'm talking about on that link has MANY photoshop tutorials), that's how I found the website.


    But I don't know what to search for to get an effect like that. I don't even know who would know how to do that. I guess I could ask Adobe... but it's probably pointless to contact them.

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    The main aim is to create an optical illusion that looks like its on a ledge, it's not easy to get the perspective right but I have written a brief tut for you to follow.
    It's by no means an all encompassing tutorial but it should give you some ideas to be going on with.

    Shelf/Ledge Tutorial


    Set the background colour (in this case I am recreating webdesign.com's header so will use their colour scheme)


    Set up your grid to 10px x 10px and make sure that you are snapping to the grid.


    Using the Rectangle Shape tool (not the marquee tool), draw out your first main rectangle.
    Picture1.png


    Now draw out the shelf. I have done it 20px high but this can be changed later.
    Picture2.png

    Next count 20px in and do the top most rectangle
    Picture3.png

    Grab the direct selection tool and select the top left point of the ledge layer
    Picture4.png

    Drag the point in to meet the bottom of the other rectangle above it. Do the same on the other side!

    Picture5.png


    This gives you the basic shape so now we need to make it look 3D.


    Using the marquee tool, drag out a shape 10px high and the width of your canvas. Create a new layer and fill the shape with white.


    Picture6.png

    Again using the marquee tool, create a rectangle from the top of your canvas down to where the shelf rectangle starts.
    Picture8.png




    Grab the Gradient Fill tool, create a new layer and set the background to black and foreground to transparent
    Picture9.png


    Click and drag so that the gradient fills the bottom half of the marquee rectangle
    Picture10.png




    Deselect that layer and drop the opacity down to around 30%
    Go to Filter > Blur > Gaussian Blur and set it to 2


    Back to the highlight layer. Go to Filter > Blur > Gaussian Blur and set it to 3.
    change the Layer Blending mode to Overlay and drop the opacity down to around 30%
    Picture11.png


    Finally nudge the highlight layer down so it sits below the ledge and you should have something like:
    Picture13.png


    PSD file attached.
    -----------------------------------

    HTH

    Spike
    Attached Images Attached Images
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for tut spikeZ. I am going to try some now and post my examples at a later date. I'm getting to like this.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Nice tute, Mike. I found it hard to get some bits working at first, being unfamiliar with a lot of Ps. At first I couldn't even draw the blue boxes. Then I discovered the options top left. So much to learn with Ps.

  7. #7
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    You're both welcome.

    Ralph~ if you click and hold the button down on a tool with a little tiny black triangle, it will give you an options flyout for the various tool options available.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by spikeZ View Post
    Ralph~ if you click and hold the button down on a tool with a little tiny black triangle, it will give you an options flyout for the various tool options available.
    Thanks Mike. I wasn't very clear in what I said. My problem was that I kept drawing rectangles and nothing would appear on screen. After a bit of Googling I found that there are three options way up in the top left horizontal bar. I don't know what the option that was selected is for, but I had to click the icon with the little boxes on the corner for the rectangle box to draw anything.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •