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.

Download

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.

Download

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:

  1. the curl shadow
  2. the curl
  3. 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.

Download

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.

Download

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.

Download

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!

Download

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!

Download

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!

Download

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!

Download

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!

Download

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!

Download

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.

Download

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.

Download

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.

Download

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.

Download

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.

Download

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.

Download

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!

Download

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!

Download

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:

  1. This UI version was created by QNX to replace the Amiga OS UI.
  2. William Bull created this and many other QNX UI iterations. He eventually went on to create iPod UI elements at Apple.

Download

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!

Download

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.

Download

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 :)

Download

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.

Download

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.

Download

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.

Download

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.

Download

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.

Download

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.

Download

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.

Download

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.

Download

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!

Download

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!

Download

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!

Download

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.

Download

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.

Download

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!

Download

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.

Download

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!

Download

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!

Download

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!

Download

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.

Download

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!

Download

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.

Download

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!

Download

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!

Download

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!

Download

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.

Download

blog

Fw PNG Week 49

UMD Icon
100% vector version of Sony’s PSP media format dubbed UMD. Enjoy!

Download

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!

Download

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!

Download

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!

Download

blog

Recent Articles

More Articles