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.
- 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.
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.
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.
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.
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.
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!
A simple beveled button created using native Fw Live Filters. Be sure to check out and mess around with the color object layer. Enjoy!
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.
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!
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!
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!
A simple tab-like button made with loving care in Fw. It’s all vector and all cool. Enjoy!
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.
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.
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.
Recreated: Pastebot Arrow
This source file is part of the “Recreated” series. Here’s my take on the arrow icon in Pastebot for iOS.
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.
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.
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!
Bevel Hard Button
This week we are going “old school” with a hard beveled button. Amiga OS MUI inspired. Enjoy!
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.
- 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.
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!
Inspired by the CSS only iOS icons, I decided to build my favorite iOS icon in 100% Fw vectors.
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 :)
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.
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.
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.
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.
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.
As seen on dribbble. It’s a very simple technique… more of an optical illusion than anything else. Anyway, enjoy.
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.
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.
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.
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!
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!
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!
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.
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.
Inspired by my PSP Phat, here’s a clear plastic button with symbols for each of the four Playstation face buttons. Enjoy!
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.
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!
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!
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!
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.
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!
Using the texture technique from week 43’s source file, I created a button with optional color and hover/focus/on state.
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!
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!
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!
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.
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!
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!