SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [Tutorial] FWCS3 - Rolled Edge Sticker

    The tutorial by jahangir was written for Photoshop users, however, I am an Adobe Fireworks user from way back, so thought a similar tutorial using Fireworks may be appreciated, as the majority of users here appear to use PS :-) There are no complex commands or extensions used to work through this tutorial , so any version of Fireworks would allow you to work through this tutorial.


    ROLLED EDGE STICKER IN FIREWORKS CS3
    This is what we are going to create.



    ---------------------------------------
    Step 1:

    Create a new document – I used a 150px x 150px canvas.
    Draw a Circle of any size. I used a 135px x 124px circle



    ---------------------------------------------------------------
    Step 2:

    Select the circle. Using the Knife Tool slice through a section at the top - at an angle as shown below.



    -----------------------------------------------------------
    Step 3:

    Make sure that the sliced section is the upper most layer in the layers panel as shown below:


    ----------------------------------------------------------------------------------
    Step 4:

    Select the sliced top portion of the circle. Using the flip tools on the menu bar:


    Flip the selection Horizontally and then Flip Vertically. (Or Modify>Transform>Flip Horizontal and then again Modify>Transform>Flip Vertical)

    Your image should now look similar to view ImgA.



    To make it easier to work with this small element, you can move it away from the bottom section until we have finished styling. Use the keyboard arrow keys to move it out of position for the time being .... see ImgB above.
    ---------------------------------------------------------
    Step 5:

    Adding shading and a shadow
    Keeping the top section selected, we’ll now apply a gradient. I’ve used the following colours to match the original colour of the circle. (left to right)
    #97004B #F20079 #75003A #F20079



    Time to add a drop shadow: The settings shown, worked well for me, you can play around with the settings to see what works well for you.

    You can play around with the gradient fill also, until you have a nice rollover lighting effect. The image now looks like this:


    ------------------------------------------
    Step 6:

    Moving into position:
    Using the arrow keys to move the top slice down and over to align it with the bottom half of the circle.


    NEARLY DONE !!
    ---------------------------------------------
    Step 7:

    Finishing Up
    Here, I changed the canvas colour to white, added a touch of a drop shadow to the bottom of the circle, added some text and the final image now looks like this:



    Hope you enjoyed this, my first Fireworks CS3 tutorial

    I've included the final png file here for your convenience. [to save to your pc - right click>save as]
    Here's a pdf document explaining all the steps above if you'd prefer to print off the instructions.

    I'd love to hear if you tried the tutorial and please feel free to post up any samples you may come up with!
    Last edited by Nadia P; Nov 11, 2008 at 07:27.

  2. #2
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great tutorial, thanks for sharing!

  3. #3
    SitePoint Wizard ShayneTilley's Avatar
    Join Date
    Apr 2007
    Posts
    1,044
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'd say I'm sorted for folding circles whichever application I choose to use -- well done Nadia!
    Shayne Tilley

    My slightly left of center thoughts on
    marketing, business and life in general.

  4. #4
    whagwan? silver trophybronze trophy akritic's Avatar
    Join Date
    Nov 2006
    Posts
    2,780
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Good to see a tutorial posted here that's for graphics programs other than photoshop! Keep up the good work Nadia

  5. #5
    Non-Member
    Join Date
    Dec 2006
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the Fireworks version of my tutorial

  6. #6
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice Tutorial Nadia.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Nice tutorial Nadia - even I can follow that

  8. #8
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Good Work Nadia, Could this become a regular thing?!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  9. #9
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone, glad you liked it and hopefully FWs users will benefit from it. :-D

    Quote Originally Posted by spikeZ View Post
    Good Work Nadia, Could this become a regular thing?!
    I also posted a second tutorial: Applying Shadow effects to photos & Web Design elements, using FWCS3 which can be found here.

    I've seen many PS tutorials for this effect, but not for FWs, so

    I've a few other ideas rolling around, simple basic things that I've seen people ask about on various forums, so yes, they may be more in the pipeline

    Nadia

  10. #10
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If some day we find 90% of the websites labeled with these curled stickers, we'll know whom to blame

    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  11. #11
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This type of sticker would be a good "Contact us" sticker.At the bottom of a footer or a div.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  12. #12
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tutorial. I saw the original one done in PS and am glad someone did one up is FW. I've always preferred Fireworks.

  13. #13
    SitePoint Enthusiast LucDeacu's Avatar
    Join Date
    Apr 2005
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah always wondered how they did that, nice tutorial
    WebTouchUp.com
    Website touch-ups at flat rates! 64 hour turn-around time!
    Why get a re-design when you can get an upgrade?

  14. #14
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice effect. I hope you don't mind me knabbing it for a project.

  15. #15
    Non-Member
    Join Date
    Nov 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use more shadows I think.


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
  •