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




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!
Really great tutorial Rogie! Thanks for that!!
Very good. Good start on some gamer icons :) Will use on upcoming project.
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.
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.
Awesome! Thanks for sharing, I may try using Fireworks again after seeing your techniques.
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.
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
Very cool! A master at work.
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!
Awesome dude, rogi is the Icon King :)
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!
Fantastic tutorial Rogie, can’t wait for more (icons & tutorials)! :)
This tutorial is great. I totally like the approach! Give us more stuff like that :)
Real neat dude!
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.
Awesome tips! Thanks!! :D
Make them longer not shorter. I enjoy seeing the process and how you think thought your design process. :)
Dig this! Can’t wait to see other FW tutorials, I often feel quite alone as a FW user :)
Wow Great XD
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?
hmm… that was a lot of ’show’s. Should have subbed ‘demonstrate’ for one or two. #variety
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!
Thanks Rogie, that was great. Try setting your screen res lower next time though so we can see everything more crisp.
Cheers
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.
@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.
Loving this – thanks Rogie!
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.
This is really great. I was always a big fan of Fireworks so this will greatly help me when I create things. :)
Awesome! Explains a lot, thanks for sharing how you make your icons :)
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.
@Chris thanks for voicing your thanks. Much appreciated!
Testing out to helps you out!
You are super passionate about your work and speak very casually about what you do – very refreshing!
Thank you very much for sharing!
Defiantly given me a good reason to use fireworks again.
Thanks
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.
Very nice!
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
Wow. You’re amazing. Thank you!