SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Whats the best way to create this type of footer graphic?

    Whats the best way to create this type of footer graphic? Like here http://ryanfait.com/sticky-footer/ without the browsers of course. Also, I'll need to give it a little more rounded appearance at the corners. Pen tool, or warp tool, or other? Thanks!

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    The easiest way I know to create shapes like that is to draw one on top of the other, then combine the paths. Or create them on separate layers and then merge the layer.

    But there are probably more sophisticated, elegant ways to handle it.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    SitePoint Guru kish's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Whats the best way to create this type of footer graphic? Like here http://ryanfait.com/sticky-footer/ without the browsers of course. Also, I'll need to give it a little more rounded appearance at the corners. Pen tool, or warp tool, or other? Thanks!
    Draw an oval, then convert it to bitmap. Then, crop out the edges (left, right and bottom) that you don't need. You can then get rounded corners by using the oval select tool to draw an oval around the corner, then invert the selection and press delete.

    As DaveMaxwell said, there are probably other ways to do it too :-)
    Fast Fwd Multimedia
    Web, IT & Cloud Computing Consultancy
    Currently looking for web freelancers. Get in touch!

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What program will you be using to do this? Photoshop, Fireworks, other?

    In Fireworks I would use the oval tool and some masks (rectangle tool) to create the straight left/right sides.

  5. #5
    SitePoint Guru bronze trophy Slackr's Avatar
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    679
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The pen tool is your friend, learn to use it. When combined with simple shapes a single point in the right place can give you a vector/path shape that is easily reshaped when you discover that the arc is a little too high for your liking.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot guys! Well, I've managed to create the shape, but making it have completely smooth lines is another story. I've changed directions anyways, to something I can make, so I'm good for now.

    Enough is enough! I'm taking a Photoshop class at the local community college soon. I'm a better web designer than my lack of Photoshop skills allows me to be.

  7. #7
    SitePoint Enthusiast null101's Avatar
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd use the round selection marquee, draw the oval, then use the rectangular marquee and chop off the edges.
    Scumlabs.com - Free flash games
    Play Super Mario Flash!
    Play Raiden X!

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Thanks a lot guys! Well, I've managed to create the shape, but making it have completely smooth lines is another story. I've changed directions anyways, to something I can make, so I'm good for now.

    Enough is enough! I'm taking a Photoshop class at the local community college soon. I'm a better web designer than my lack of Photoshop skills allows me to be.
    If you want to use a raster shape, then I would suggest to add an "inner glow" effect. If you play around with that a bit, you might get quite good results, especially if you use the same colour of the page background for your effect.

    Vector shapes are much cleaner in general, though.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,268
    Mentioned
    249 Post(s)
    Tagged
    1 Thread(s)
    I'd use the pen tool to draw the shape and maybe outer glow in this case.

    Or redraw the shape in yellow on another layer, make sure that it is under the blue shape and resize it (Photoshop)

  10. #10
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok open up Photoshop or whatever image-production software that you are using. Save the image. Open it up with PS. Take your magic wandtool click on the image erase all of its cntent fill in your own. LOL

    Second Option.


    Draw it yourself with pen or paper. Or draw it in photoshop with your pen tool.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  11. #11
    SitePoint Enthusiast null101's Avatar
    Join Date
    Apr 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Draw it on pen and paper?

    Stick with the pen tool.
    Scumlabs.com - Free flash games
    Play Super Mario Flash!
    Play Raiden X!

  12. #12
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think the adope is the best to create the graphics as compare to something else.

  13. #13
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I know that this has been answered and you have moved in a different direction Eric but I thought I would at my 2c

    I would have thought that the pen tool would be slight overkill and that a vector primitive would be better(?)

    Use the vector tool set to oval and drag out the rough size/curve you want.
    Change the tool to a rectangle and set the selector to 'Remove from shape'
    remove the 2 ends using a grid or ruler as a guide

    Job done, sharp and scalable edges
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  14. #14
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pen Tool is the ideal for this work.

  15. #15
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there...

    as per my thinking i have heard about a software know instant graphics pro...that is used to create both header and footer graphics...it is also used with photoshop to create and edit graphics......


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
  •