I’ve always wanted to do a video tutorial, but I lack the ability to plan. Much of the design I do is as I am motivated. If I am motivated, I have to jump on it — I can’t spend a day planning, I just have to do it and do it naow *Arnold voice*.

Today I had one of those feelings. As I was designing an icon for my social media icon set, it hit me. I want to start sharing what I do with others, so I did it.

In this episode, I share my technique for creating smaller crisp vector shapes like you see on the social media icon set.

Please leave a comment and tell me what you thought of the tutorial and what I can do to improve in the future. Or don’t.

#Rockthefreeworld

Comments

39 Comments

  1. Marco said 667 days ago

    That’s pretty neat Rogie, well done. I knew you’re a Fireworks user, but seeing you actually do it, is very awesome and motivates me to use it too.

    More video tutorials would be highly appreciated from my side – well done!

  2. Brian said 667 days ago

    Really great tutorial Rogie! Thanks for that!!

  3. Ed said 667 days ago

    Very good. Good start on some gamer icons :) Will use on upcoming project.

  4. Daniel Bramhall said 667 days ago

    I think you may have just converted me to Fireworks. I’m super looking forward the final icons. Good job and I also look forward to the next tutorial.

  5. Brendan Falkowski said 667 days ago

    Twenty-two minutes is a bit long, but it’s interesting to see how another Fireworks user operates. Didn’t know about the 99% trick.

  6. Michael said 667 days ago

    Awesome! Thanks for sharing, I may try using Fireworks again after seeing your techniques.

  7. Jeff said 667 days ago

    Thank for putting this up Rogie. I was actually looking for some tips for working at small sizes and was running into the PS/AI issues. I might have to give Fireworks a look as well.

  8. Sebasian Torresi said 667 days ago

    Great tutorial Rogie, i like a lot. With this video we have one more reason to use Fireworks.

    Next video tutorial the tiny icon of faces. xD

  9. Collin said 667 days ago

    Very cool! A master at work.

  10. Ryan Rushing said 667 days ago

    Wow, thanks Rogie, this is great.

    I don’t use FireWorks for anything, but watching you work makes me want to give it a shot!

  11. Yoosuf said 667 days ago

    Awesome dude, rogi is the Icon King :)

  12. Dylan Pine said 667 days ago

    Awesome tutorial – I think the impromptu nature of it made it so much more natural and less scripted. Here’s what I’d love to see a video on: pixel avatars. :) Cheers!

  13. Sam Brown said 667 days ago

    Fantastic tutorial Rogie, can’t wait for more (icons & tutorials)! :)

  14. Philipp Rappold said 667 days ago

    This tutorial is great. I totally like the approach! Give us more stuff like that :)

  15. Pasquale said 667 days ago

    Real neat dude!

  16. Rogie said 667 days ago

    Thanks everybody! I think based off the comments I’ve received, I’ll be making my next:

    1) impromptu again
    2) shorter
    3) based on other things I’ve created like pixel avatars

    Let me know any other suggestions as I don’t know what others really value about my work…perhaps I will share some techniques on JavaScript or jQuery.

  17. manolosavi said 667 days ago

    Awesome tips! Thanks!! :D

  18. danest said 667 days ago

    Make them longer not shorter. I enjoy seeing the process and how you think thought your design process. :)

  19. Benjamin said 667 days ago

    Dig this! Can’t wait to see other FW tutorials, I often feel quite alone as a FW user :)

  20. Irene said 667 days ago

    Wow Great XD

  21. Matt Bainton said 666 days ago

    Rogie, I’ve been meaning to ask you to show how you use FW for interface work. Enjoyed seeing you work.

    I’d love to see you show some basic web ui work – showing some of the FW strengths that PS users aren’t aware of.

    Also, what is the sweet tabs-on-top FF theme you’re using?

  22. Matt Bainton said 666 days ago

    hmm… that was a lot of ’show’s. Should have subbed ‘demonstrate’ for one or two. #variety

  23. Neil Knauth said 666 days ago

    Insanely amazing tutorial, Rogie.

    Thanks so much for sharing. I look forward to seeing more tutorials from you in the future.

    Keep up the awesome work!

  24. Odin Dutton said 666 days ago

    Thanks Rogie, that was great. Try setting your screen res lower next time though so we can see everything more crisp.

    Cheers

  25. Odin Dutton said 666 days ago

    Also, I’m not sure you can do it in Fireworks but in Photoshop you can set up 2 views of the 1 canvas so you can have one displaying the icon at 100% and one zoomed in.

    PS. The time of the comments must be going off server time, it says I made my last comment a day ago and really it was a few minutes a go.

  26. Rogie said 665 days ago

    @Matt, Neil and Odin Thanks guys! Looks like I will be doing more of these…

    @Odin Crazy, never have done the two views other than in preview mode. I’ll have to look more into this. Thanks for the heads up on the comments time offset — I’ll fix that right now. Also, next time I’ll definitely set my screen resolution to lower.

    Thanks for the great feedback.

  27. Sean Warton said 664 days ago

    Loving this – thanks Rogie!

  28. Travis said 662 days ago

    Very cool vid Rogie. It’s rad seeing other Fireworks users use the program. Definitely keep up the videos!

    It’s also worth noting that a lot of the vector correcting methods you used in the video are useful for cleaning up ugly anti aliasing on text, ie cleaning up the pixel rendering on a logo after converting it to paths.

  29. sjdvda said 662 days ago

    This is really great. I was always a big fan of Fireworks so this will greatly help me when I create things. :)

  30. Daniel Groves said 659 days ago

    Awesome! Explains a lot, thanks for sharing how you make your icons :)

  31. Chris said 653 days ago

    Dude, just wanted to thank you for your tutorials. Thanks for taking the time. I’m pretty adept at Fireworks, but I’ve learned some really nice little tips here. Please keep ‘em coming.

  32. Rogie said 645 days ago

    @Chris thanks for voicing your thanks. Much appreciated!

  33. Brian said 645 days ago

    Testing out to helps you out!

  34. Frederick Polk said 633 days ago

    You are super passionate about your work and speak very casually about what you do – very refreshing!
    Thank you very much for sharing!

  35. Nigel Heap said 629 days ago

    Defiantly given me a good reason to use fireworks again.

    Thanks

  36. Dan Rubin said 606 days ago

    I’m finally getting around to watching this — and I’m so happy I did.

    Thanks for sharing what you know and how you do that voodoo that you do so well.

  37. Paulo said 522 days ago

    Very nice!

  38. Michel said 519 days ago

    In Fireworks, you can work at two zoom levels simultaneously, yes!

    Simply go to Window > Duplicate Window, and you’re done! Then set zoom level separately for the two document windows. This is a very useful feature! :)

    http://twitpic.com/2n1di8

  39. Cara Jo said 337 days ago

    Wow. You’re amazing. Thank you!

Sorry, the comment form is closed at this time.