Fw PNG Week 1
Web 2.0 Button
Yeah… you read that right. Actually, this file has been collecting dust for as long as I can remember, back then Web 2.0 was cool… I just never renamed it. Anyway, have fun dissecting and learning. I’ve also included a color object in case you’d like to see how you can quickly change the color without having to edit the underlying objects.
What’s this all about?
Years and years ago, John Oxton had this awesome idea to create about 48 or so, high quality Fireworks source files and offer them for download. I’m not exactly sure what happened to the plan, but shortly after his idea, he stopped blogging. After his site shut down (the first time), I contacted him about the project, and he said I could take over if I wished.
So, several years later I decided to stop procrastinating and take the plunge already. Here’s the plan… I’ll try and post at least 1 Fireworks source file each week for as long as I can.
Notes:
- Most of these source files are recreated graphics that I’ve seen over the years. Because of that, I’m pretty sure it would be a terrible idea to use these graphics as design elements on existing or future web sites.
- All of the files will be created in Fw CS4 or higher.
- All of the files will be as close to 100% vector as possible.
- All of the files will use as few objects as possible.
- All of the files will use native Fw styles and effects.
- All of the files will use web safe fonts if applicable.
blog
Fw PNG Week 2
Apple Buy Button
I modeled this button after Apple’s “Buy Now” graphic on apple.com (as of 03/2010). These buttons used to be gray but now are blue. I prefer the gray version. Plus, it’s way easier to colorize a gray object than a pre-colored object. Enjoy.
blog
Fw PNG Week 3
Sticker Curl
Years ago I sat down and tried to create a simple page curl effect that used as few objects (commonly referred to as layers in the Ps world) as possible. I whittled it down to 3 objects:
- the curl shadow
- the curl
- the base
The illusion of depth is achieved by a simple gradient and two live filters, that’s it. Hungry-to-learn folks will also find a few extra objects. You may ask yourself, “Why didn’t he just combine this with that?”, and the answer is simple… Every Fw file that I create has to be as scalable as possible and must be easily editable.
blog
Fw PNG Week 4
Glassy Round
This week is part 1 of a 3 part series. Basically, I’m going to create three button styles with a “glassy” effect, but each button will have a different overall look or function. This week’s button is based on a tutorial I wrote for a similar looking graphic I created way back in the day. Anyway, have fun ripping it apart, and be sure to play with the color object layer.
blog
Fw PNG Week 5
Glassy Hard
This week is part 2 of a 3 part “Glassy” series. This button uses a hard bevel look to it but still keeps the glass-like feel. Again, have fun and don’t forget to mess around with the color object layer.
blog
Fw PNG Week 6
Glassy Controls
This week is part 3 of a 3 part “Glassy” series. This source file contains a set of layers to replicate the play, pause, stop, and record symbols for media player controls. Enjoy!
blog
Fw PNG Week 7
Soft Bevel
A simple beveled button created using native Fw Live Filters. Be sure to check out and mess around with the color object layer. Enjoy!
blog
Fw PNG Week 8
Two months in and we’re still rolling along with this Fw PNG week stuff! I hope I can keep this up. I’d love to make it 52 weeks, but… we’ll see how things go.
Arcade Button
I’ve been sitting on this graphic for over 5 years now. Originally my plan was to make this into a a tutorial, but as time went on and my spare time slowly dissipated I decided to just spruce the image up a bit an offer it as a source file download. Enjoy!
blog
Fw PNG Week 9
Cloud
After watching Rogie King’s excellent Using Masks in Fw video I was inspired to create an all vector cloud. It seems like clouds are all the rage these days so why not give it a shot. Here’s what I came up with. Enjoy!
blog
Fw PNG Week 10
Apple Select Button
Here’s an Apple-inspired Select button. It doesn’t have to be gray or say “Select”, the beauty of Fw is that you can easily edit it without destroying the the original… SWEET!
blog
Fw PNG Week 11
Tab Button
A simple tab-like button made with loving care in Fw. It’s all vector and all cool. Enjoy!
blog
Fw PNG Week 12
Cardboard Box Icon
An all-vector cardboard box icon complete with transparent tape across the top. I only spent a few minutes on this piece so I’m sure with a little more time someone could make something really realistic.
blog
Fw PNG Week 13
Recreated: Textpattern Hammer
This source file is part of the “Recreated” series. This week we are going to focus on the hammer in the Textpattern logo. It’s not perfect but it’s as close as I could get by just using the default textures built into Fw CS4/5.
blog
Fw PNG Week 14
Dark Button
Here’s nice little dark-style button inspired by the pop controls in the Ecoute interface. Use it how you see fit and as always, enjoy.
blog
Fw PNG Week 15
Recreated: Pastebot Arrow
This source file is part of the “Recreated” series. Here’s my take on the arrow icon in Pastebot for iOS.
blog
Fw PNG Week 16
Media Play Button
Here’s an Apple inspired overlay icon for video files. It begs to be clicked or tapped. Not that kind of tap, get your mind out of the gutter.
blog
Fw PNG Week 17
UI Toggle
This started out as a little experiment. I wanted to create a vector image with 100% native objects that could be edited from the properties inspector. I usually ungroup rectangle objects and fillet the corners with the Path panel because resizing a rectangle with roundness set usually distorted the roundness in older versions of Fw. I’m not exactly sure when they fixed this, but it works perfectly now. Inspired by iOS UI elements. Includes on and off states.
blog
Fw PNG Week 18
Sticky Note Button
A couple of simple rectangles, the pen tool, and now we have a neat little sticky note. This would be a great button to try out the 9-slice scaling tool or symbol. I would probably replace the Arial font with something more hand-drawn-ish as well. Enjoy!
blog
Fw PNG Week 19
Bevel Hard Button
This week we are going “old school” with a hard beveled button. Amiga OS MUI inspired. Enjoy!
blog
Fw PNG Week 20
QNX v1
My all time favorite GUI ever, in the history of ever-ness, is the beautiful QNX OS. Now you too can enjoy the beauty of this rarely seen OS in 100% vector glory. If you are interested, you can see more of this lovely OS at Amiga History Guide.
Fun facts:
- This UI version was created by QNX to replace the Amiga OS UI.
- William Bull created this and many other QNX UI iterations. He eventually went on to create iPod UI elements at Apple.
blog
Fw PNG Week 21
Woven Pattern
I made this source file quite a long time ago in preparation for a Fw Week post. Rogie’s metal texture video reminded me that I should post this. I used the exact same technique he did to make this woven-style pattern, only I made mine way before he made his :) Enjoy!
blog
Fw PNG Week 22
Calculator Icon
Inspired by the CSS only iOS icons, I decided to build my favorite iOS icon in 100% Fw vectors.
blog
Fw PNG Week 23
Sun Icon
Here’s an oldie from 2005. It’s an icon I created for a side business I was using outside of my super old SDS site… whoa, it feels weird typing that again. Anyway, it’s supposed to be a cartoony sun icon. Dig around in the layer palette and see if you can turn it into a moon :)
blog
Fw PNG Week 24
USB Icon
I tried to make something a little more complicated for all you hard core Fw heads out there. Lots of things going on here. Gradient panel was a big help.
blog
Fw PNG Week 25
Knob Icon
Here’s something I whipped up in a few minutes just for this weeks post… a pseudo, brushed-metal-ish volume knob using only default Fw effects. If someone were really ambition they could attach the indicator to a circular path, create animation states, and make this thing have rotation frames. Throw in a little jQuery and you’d be good to go.
blog
Fw PNG Week 26
WOW! We’re half way to 52 straight weeks of Fw PNG source files. I hope you are enjoying this series as much as I am.
Shine Button
This week we have a simple button with a subtle shine effect to make it pop that much more. Since it’s all vector, you can easily change the color, shadow, and shine effect with a few simple clicks.
blog
Fw PNG Week 27
Glass Button
I’ve done the “glass” thing earlier in the series, but this one looks a bit different and is built in a completely different way. Hopefully it will inspire.
blog
Fw PNG Week 28
3D-ish Icon
As seen on dribbble. It’s a very simple technique… more of an optical illusion than anything else. Anyway, enjoy.
blog
Fw PNG Week 29
Carved Button
This was a test image of mine to see how thin I could get borders and highlights. I used the numeric transform command to scale by 1-2% multiple times in a row. It works quite well.
blog
Fw PNG Week 30
Lens Flare
Here’s an experiment in which I tried to replicate a simple lens flare using only vectors. I’ve included a couple button types so you can see how it overlays. With some jQuery, a hover function, and this little flare you could create some very pretty things.
blog
Fw PNG Week 31
Nav Bar Button
Here’s a very simple navigation bar. There are a ton of very subtle details to give it more depth and beacon people to click/tap. I’ve also included the on/active/hovered or whatever-you-want-to-call-it state.
blog
Fw PNG Week 32
Power Button
Inspired by new fangled electronics, here’s a power button complete with green-ish glow to signify that it’s on… like Donkey Kong. Enjoy!
blog
Fw PNG Week 33
Mail Icon
Every icon set has an email icon. Since I have a few icon source files in this Fw PNG Week series, I had to include the obligatory email. Enjoy!
blog
Fw PNG Week 34
Speaker Icon
Since we’re on an “icon” roll, here’s an Apple inspired simple speaker icon. I built this one different… it’s actually a symbol. I use symbols whenever I have to rotate or transform an object. By making it a symbol I can change the size or reset the rotation without affecting the original piece. Enjoy!
blog
Fw PNG Week 35
Mint-style Button
I took a crack at recreating the button style used on the haveamint.com site. Remember, this button is for learning purposes only. Please do not use this or other recreated buttons in your projects.
blog
Fw PNG Week 36
Ubisoft Logo
Here’s my attempt at creating the Ubisoft logo. Remember, this logo is for learning purposes only. Please do not use this or other recreated graphics in your projects.
blog
Fw PNG Week 37
Playstation Button
Inspired by my PSP Phat, here’s a clear plastic button with symbols for each of the four Playstation face buttons. Enjoy!
blog
Fw PNG Week 38
Blueprint Pattern
Here’s a simple Blueprint pattern created entirely with vector objects and built-in grain texture. Use it as a learning tool and create your own blueprint art.
blog
Fw PNG Week 39
Eye Icons
While I was creating some icons for an update to my TXP admin theme, I developed a couple of vector “eye” icons that I thought would work well as a learning tool. Enjoy!
blog
Fw PNG Week 40
iOS Icon Base
Here’s a vector-only icon that could be used as a template file to create iOS icons. It’s set to 57×57 but since it’s vector you could scale it to work with the Retina @2x or iPad resolutions quite easily. Enjoy!
blog
Fw PNG Week 41
Button Button
This is my attempt to recreate the look of a button. You know, the ones that you pin to your jacket and backpack? I’ve included example color and bitmap overlay layers. Enjoy!
blog
Fw PNG Week 42
Ribbon Icon
I felt like making something pretty complicated since this series is all about learning. There’s a lot going on here: gradients, lighting, shadows. I’m no expert and I’m sure someone could do a lot better, but here’s my attempt at making a folded ribbon.
blog
Fw PNG Week 43
Texture Pattern
One of the things I love about doing this Fw PNG Week series is that I’ve learned so much. So much so that I’ve simplified the way I think about designing. This week is a great example of that. Here we have only a single object with 2 effects applied. It’s seamless and highly editable. Enjoy, I know I will!
blog
Fw PNG Week 44
Texture Button
Using the texture technique from week 43’s source file, I created a button with optional color and hover/focus/on state.
blog
Fw PNG Week 45
OS X
I loved recreating the QNX UI back in week 20, so I thought I’d give the OS that I spend the most time with nowadays a go. Here’s a Snow Leopard Mountain Lion window in 100% vector glory.
Update: I’ve re-created this object as a Symbol so it can be easily sized to any dimensions without distortion. Enjoy!
blog
Fw PNG Week 46
Cut Button
Here’s something I worked on quite a long time ago but never got used. It has some effects that have already been used in this series, but the shadow is something that some people could probably learn from. Enjoy!
blog
Fw PNG Week 47
Snow Flake Icon
It’s a little late in the season but I thought I’d take a shot at creating a snow flake with only vector lines. Here’s the result. Enjoy!
blog
Fw PNG Week 48
Amiga MWB Icon
A Magic Workbench folder icon recreated in vector with as little dithering as possible. Back in the day, SASG created a perfect 8 color pallet and then developed a huge set of icons that looked unbelievable.
blog
blog
Fw PNG Week 50
Binder Icon
Here’s a sample of me practicing on making a metal ring. I added some elements to make it look like it’s being used on a desktop calendar. Anyway, enjoy!
blog
Fw PNG Week 51
Music Icon
I’ve been working on creating some Ecoute 2 themes and in the process I developed this blank cover art placeholder. I thought people might be interested in how I built it. Enjoy!
blog
Fw PNG Week 52
Fw Icon
A fitting end to a year long project about the wonders of Adobe Fireworks… here’s a 100% vector version of the Fw CS5 logo. Enjoy!
blog
Recent Articles
- Fw PNG Week 52
Filed under: Fw PNG Week - Fw PNG Week 51
Filed under: Fw PNG Week - Fw PNG Week 50
Filed under: Fw PNG Week - Fw PNG Week 49
Filed under: Fw PNG Week - Fw PNG Week 48
Filed under: Fw PNG Week
