It’s been a while since I last updated this blog with new fw goodies so I hope you appreciate this one. This is a fallout elite ncr ranger helmet icon to be used as an icon replacement for any ivon want to replace in your mac / or windows. I also included a short tutorial so please read on.

So what is fallout ?

To summarize fallout : It’s a game for the xbox360/ps3/pc with a post apocalyptic theme. The technology and setting is similar to the 1950′s except it has highly advance technology ( think of 1950′s future concepts ) . The world superpowers have nuked each other destorying most of the known world. The U.S. goverment creates “vaults” capable of withstanding the nukes and being able to support life for a limited number of people. Years later people opened the door outside the vaults and realize the world is different , some people/animals/plants have mutated , and some others are forming new groups and wanting to take over what’s left.

The NCR or new california republic is one of the biggest groups in the future U.S. and the elite ncr ranger is one of their finest soldiers.

Download

Adobe Fireworks source file | Fallout Icon 512×512 icns format – click here to download > [download id="50"]

If you have a mac and you want to create your own icons for free , use img2icons

Creating the icon

In the image below , you will see the earlier concepts of the icon. You will notice in the 3rd concept to the last, it gets better because of the shadows that I have added and new details in the helmet.

In darkening areas on the helmet  i just drew a smooth curved shaped with a black background color and feathered the edges. You can control the feather amount or the object opacity in the layers panel if you wish to make it darker or lighter. Below you will see the power of a simple shape with a feathered edge. The 2nd images shows that I have changed the edge to feather,  it doesn’t necessarily need to be an abstract shape/ a circle/ etc as long as it’s a close path with a fill. The last image is the application , this image is achieved by using the same image over again in the areas on the circle , you don’t need to draw another shape and feather it. You can simply duplicate it / scale up or down / change object opacity and place it in the area you want. Another advance trick would be to edit the points of the shape to alter the look of the feathered image. Take not when using the feather trick , make sure that the feathered edge doesn’t overlap on the image unless it’s intentional. Change the canvas color to see the feathered images overlapping , this is important when you export it as a transparent image like an icon.

Paint Blue Pattern : Secret Weapon

The paint blue pattern is one of the best patterns available in Adobe Fireworks. It let’s you create a grunge effect without having to use textures from other sources. To effectively use the paint blue pattern you have to use all or some of these techniques.

1.Feather + Color Dodge / Color Burn Layer Mode – most important technique

2. Hue/Saturation Live Effect / Curves Live Effect – tweaks the color of the pattern , it’s best to try different values when you duplicate them for a varied effect.

Duplicating the feather image / scale up or down / adjust the pattern / Layer Object Opacity / Adjust points of the shape or tweak them to a different direction-  When duplicate the pattern you can scale it up or down , adjust the pattern using the fill handle and direction and adjust the layer object opacity when needed. If you look at the last image below , it looks best in the last one because i added more blue pattern duplicates, however i tried to follow step 2 to make the feathered images different from one another. So play around with the duplicates, you may even wish to add textures if you want.

Hope you like my icon and learned something from my tutorial . Till next time =)

This is my first time creating a vector artwork in the mac version of fireworks and im pretty happy with the results.

Solace 2 is a 1440 x 900 wallpaper intended for the maximum resolution of the 2011 13 inch macbook air models. Click here to appreciate the work in its full size.

Or you can download the source file [download id="49"] to learn how i made it. Just playing around with gradients and layer modes , if you have questions just comment =)

13-inch : 128GB

1.7GHz dual-core Intel Core i5 processor

4GB memory

128GB flash storage

Intel HD Graphics 3000

13 inch vs. 11 inch model

Choosing between the two models comes down to personal preference , if you’re on a budget and you want to ” hand ” carry your air all the time and you want it to be as light as possible,?get the 11 inch version 128 gb model ( 64 GB SSD is lacking, unless most of your data is in the cloud or you can manage your hard drive space well) , better yet if you can afford the 11 inch?core i7 256 gb ssd model.

I chose the 13 inch model since it beats the 11 in almost all areas except portability and price.

Better battery life : 13 inch = 7 hours , 11 inch = 5 hours ( a difference of two hours)

Maximum Display Resolution: 13 inch = 1440 x 900 , 11 inch = 1366 x 768 ( bigger resolution is very important to designers , some people are complaining that text in the 13 inch version is small and hard to read, so in that case it makes text in the 11 inch even smaller. My advice to people who complain about the small text on both the 13 and 11 , get an external monitor or use the double tap gesture to zoom in, or you can even lower the resolution and yes it does make the text bigger )

Sd Card Slot : 13 inch model has an additional sd card slot.

Processor : 13 inch is much faster 1.7 ghz vs. 11 inch 1.6ghz in the core i5 models , but the ultimate versions of the 11 and 13 both have 1.8ghz core i7 processors.

13 inch 128 gb ssd vs 13 inch 256 gb ssd :

The difference between the 2 versions is that the 128 gb is 300 usd cheaper than the 256 gb version. If you have a lot of files I suggest you go for the 256 version , but if you know how to manage your files , store some online ( cloud ) or other methods like an external hd or external sd card then the 128 gb version is fine. You can use the 300 usd you save on buying other mac accessories/software. I

13 inch i5 128 gb ssd vs. 13 inch i7 256 gb ssd

The i7 1.8ghz model is built to order in the apple store and it retails for about $1,699 which is 400 usd more than the 13 inch i5 128 gb ssd . The i7 is for people who want serious power, that’s very important especially if you are into video editing and 3d or you want the ultimate perfomance macbook air . But in reality the i7 version is only a minor speed bump in the 13 inch models , so the i5 is best choice in my opinion, since you can save 400 usd and buy other stuff. There are also some issues being reported by i7 owners complaining about the extra heat compared to the i5.

Mac OS X Lion

There are over 250 new features in this version of the mac os and two of my favorites are the multi-touch gestures and the full screen mode. The multi-touch gestures makes navigating files and applications in the mac a breeze, it simply works. The big trackpad of the air + different finger gestures makes an awesome combination , and I do hope they support gestures more in safari like going from one tab to the next. The full screen mode is also a welcome addition giving you more screen space for your favorite applications. There’s an issue though when you close the lid or you wake up from sleepmode when it turns on for a few seconds, not an instant on, the cursor somewhat freezes for 1 – 2 seconds. The App Store application too is very slow. I can’t say much on the OS improvements since it’s my first time using a mac , but Im liking it so far.

Performance

It’s very fast , benchmarks indicate that both the 11 and 13 inch models doubled in speed compared to the 2010 models. The i5 if faster than the 2010 macbook pro as indicated in an article in osxdaily. I opened several tabs in safari + 5 or more widgets in the dashboard + mail + adium + skype + while using adobe fireworks at the same time editing a high resolution file and you won’t experience any performance lagging issues. Opening files is quick due to the SSD ( Samsung or Toshiba , Samsung SSD is faster than Toshiba in benchmarks but it’s no big deal ) and especially the new sandy bridge processors. Using filters like motion blur in a lot of objects in Adobe Fireworks is not a problem, it can give you results in an instant. I will try to test Fireworks and other Adobe products and let you know how the i5 can handle it. I got 5400 + on my geekbench score compared to my old windows xp pentium 4 pc with 256mb ram which is 1084 lol , but the old machine still works. I use the i5 as my main computer now and I’m confident the air can make me more productive for years to come.

Gaming + Youtube

I have tried only a few games in the i5 mostly yoville , farmville and other zynga games and it works pretty well. Except the fans start to get louder especially when there are a lot of animated objects in the game which may bother you if you want the air to be quiet. Viewing 1080 HD videos in youtube is not a problem , although there was one occassion where i saw some lines appearing while viewing a 1080 hd music video.

External Monitor + Mouse + Keyboard Setup

Do you really need to use the $ 999 Apple Thunderbolt display ? It depends on your needs , if you can afford the price and you want the extra features like 27 inches high resolution display, facetime hd camera, 3 usb 2.0 ports , firewire 800 , high quality audio , gigabit ethernet , and this only needs one connection from the air’s thunderbolt port. You don’t even need to connect the air to a power adapter since the thunderbolt display can charge your air already. An external display is important because it gives you more screen for your favorite applications which I highly recommend if you’re a designer or your application demands a bigger display resolution. You can always choose an alternative like a buying 21 inch monitor from other popular brands, samsung, dell etc while just costing around less than 1000 usd, I bought mine last year for around 200 usd and i used the mini display port to dvi adapter to connect to the air. The external monitor doesn’t show any lagging issues when playing videos or using different applications.

I bought an apple wireless keyboard and it’s a similar size to the keyboard used in the 13 inch models. Not a big fan of the up arrow key since it’s too close to the shift button. If you can find a better bluetooth keyboard than this, go get it.

I also used a usb mouse since my apple mighty mouse hasn’t arrived yet. I love the trackpad in the air, it’s big and responsive, and the gestures are pretty awesome. But if you want to be really precise you’d better get an external mouse. Take for example in Fireworks where you use a tool that needs you to use the two fingers in the trackpad and a keyboard button which is quite challenging. Selecting a point in a vector path is really handy with an external mouse and you won’t regret ever using one.

I highly recommend this external setup for those who want the best of both worlds. Using the external mouse + monitor + keyboard to use it as your main computer at home, and unplugging all the accesories for traveling.

Protecting your air

For those who want to keep their air prestine, go get some protection, like a hard shell case or an invisible shield. The transparent shields like zagg and wrapsol protects your air from dust , scratches and other sharp objects but doesn’t protect from a hard fall. Shell cases come in different colors and materials too so pick one that you think looks nice and can absorb some impact from a fall.

Conclusion

The Macbook Air 2011 13 inch 1.7 i5 128 SSD is an amazing machine for casual users to power users alike and could be used as a desktop replacement. It offers a reasonable price with amazing features and considered one of the best or the best in the ultraportable category. My only advice to those who are into gaming , video editing or 3d , try your favorite games or 3d / video applications first in the air and see if it works well. If it does, then welcome to the air family =)

I have been out for a few months so I decided to give you guys this special fireworks artworks pack.

Before downloading the files ,   I have also created some new fireworks tutorials / buttons in another site  sipepdesign , be sure to check them out.

Here are the best tutorials I have made there :

Brushed Metal Effect in Adobe Fireworks

Creating Highlights in Adobe Fireworks

From top to left to bottom right artwork. To download the source files for the fireworks artworks pack, click here

[download id="45"]

[download id="46"]

[download id="47"]

[download id="48"]

Introducing ex5 , my first free css theme made in fireworks and notepad ++ with awesome looking graphics. Basically the theme features the basics , header , navigation, feature image , main content, sidebar and lastly the footer. Check this link to see the website in action.

ex5 Fireworks CSS Theme

The theme includes the fireworks png file that I use to create the graphics. If you open the source file in Fireworks, I separated the objects in 3 sub folders, namely, the web layer for the slices, the text for the dummy text, and Layer 1 holds all the graphics. You can see in the web layer that I sliced the main portions of the site, header, navigation, feature image , sidebar and footer , with each slice having a different color and slice name . Remember when slicing an area, always hide the text folder, since it might included in the export. Feel free to change the colors and graphics if you wish, I used vectors in the theme so you won’t be having problems in making changes.

For changes in the site coding, I suggest you use notepad ++ or a better alternative like dreamweaver etc.

Click here to download the adobe fireworks source file > ex5 fireworks source file
Click here to download the html file and images > ex5 html

And finally, see the live version of ex5 here.

Happy Newyear 2011 to everyone ! Thank you for supporting my blog and I hope you have learned a lot from my posts last year , expect 2011 to be bigger and better.

Let’s start of January by featuring a fireworks 8 designer , Lukas Koziorowski or also known as Monarxy. Lukas’ specialty in fireworks is in photomanipulation , using stock photos then adding vectors and effects to create wonderful artworks.

I really liked how we cropped out the images from their backgrounds so flawlessly , when especially fireworks lacks photo editing tools compared to photoshop.

Check these links below for the resources he used in each of the artworks. From top left to right :

Fireworks Artwork Angel ( Larger Version )

Photo Credits :

model by *Katanaz-Stock -> [link]

wings by ~Alegion-stock -> [link]

sky by *Sed-rah-Stock -> [link]

texture by =night-fate-stock -> [link]

City in Heaven Artwork ( Larger Version )

Photo Credits :

background by ^FantasyStock -> [link]

crows by *Shoofly-Stock -> [link]

hot air ballons by *Shoofly-Stock -> [link]

Stand out from the crowd artwork ( Larger Version )

Photo Credits :

model by *Katanaz-Stock -> [link]

texture by =night-fate-stock -> [link]

flower by ~gd08 -> [link]

Colors Artwork ( Larger Version )

model by *Katanaz-Stock -> [link]

parrot by ~havizpm -> [link]

There are other photomanipulations by Monarxy in his gallery , but for me the ” stand out of the crowd artwork has to be the best ” , you can check his gallery here

Always remember when you use stock photos, check the notes by the owners and read the licensing , and credit the photos properly.

The nova web template is a template specifically designed for blog sites, particularly wordpress. Site width is around 960 px , while the background is 1300 px, which is perfect for higher resolution computers. The text I used template is Arial & Verdana , which are both web safe fonts so that you are sure your content can be read in multiple browsers.

I don’t have much time to code this properly to a wordpress theme someday but hopefully I would or someone else might want to. You can use this template for your projects which would save you much time, since the design process has been done 50 percent already.

For a better view of the site, you can download the fireworks source file here > [download id="44"]

The magenta web template is a fireworks web template that serves as a guide for designers to convert their design into a fully coded website.

I’m currently working for a design team and I have been making fireworks mockups almost everyday , so I rarely have time for making png of the week downloads. Here are some tips in how I created this template in fw.

Use dummy text content – Use the lorem ipsum command to create paragraphs if you don’t have any content yet. Go to Commands > Text > Lorem Ipsum.

Turn Text Anti-alias off – This is important since browsers support web safe fonts that are anti-alias. If you want to see how your fonts look in both fireworks and web browsers, switch it from Smooth Anti-Alias ( which is the default ) to No Anti-Alias.

Use Web-Safe Fonts – Stick to web safe fonts if you want your content to be read properly in different browsers and operating systems. Here’s a good list here.

Elegant / Classic – Pick Palatino Linotype / Georgia ( my fav ).
Corporate – Pick Arial / Helvetica.
Modern / Small letters – Verdana , this font is very flexible , and especially if you want a smaller font size.

So there you go , I hope this little guide will help you create website mockups/templates in fireworks more efficiently.

Click here to view the > [download id="42"] of the web template.
Click here to download the source file > [download id="43"]

A nice cool lamp to light up your room.

This is an experiment to replicate an actual photograph of a vase and a table , i would probably say i was 75 percent successful. Then I also added some of my own tweaks in the design.

Click here to download the fireworks file > [download id="41"]

The red interface is an mp3 player concept which I used to do a lot of these stuff a few years ago. Interface concepts to full application skins, but it requires a lot of hard work and patience.

I would probably say this interface is around 75 percent complete, I still need to tweak the shadows , screws and tiny details. But you may use this for your own projects.

Click here to download the source file > [download id="40"]

The shirt template is an old t-shirt source file that I use in most of my tshirt designs in the past. Basically it’s a plain white t-shirt with some crumple effects that I added to show some texture. Change the shirt color, the crumple color , or add your own design / logo to the shirt.

Take the case of this image below , this is a sample shirt I made for my client before, notice how I changed the tshirt color a gold color whlte the crumple effect to lighter gold. Try to control the opacity of the crumple too so that it won’t be too visible in your designs.

To download the fireworks source file, click here > [download id="38"]

As of now, we only have 36 members who contribute regularly to the group with designs submitted every week. It’s a great place to see the graphical capabilities of Fireworks and also where to find talented fireworks designers.

Click here to see the deviantart fireworks group.

If you are a member of deviantart, you are welcome to join our fireworks group, please spread the word ! Thanks !

The gradient text logo tutorial is a very easy tutorial in Adobe Fireworks , and helps you create a quick text based logo for your website in just a few steps. This technique is used in most popular websites today.

Before we begin with the tutorial , let’s discuss about fonts first. There are basically two types of fonts, sans-serif and serif fonts.

Sans-serif fonts are what we call modern fonts, they dont have serif or extra details at the end of the letters or symbols. Example : Arial and Verdana Font. It’s what most designers used today for their logos.

Serif fonts have those extra details at the end of the letters or symbols , and which were mainly used in the old times. Example : Old English and Times New Roman.

Choosing between what type of font , serif or sans serif , the actual font you are going to use and trying to match your font with the overall theme of the design / website is what makes a logo good or bad so you have to choose wisely.

Font Resources :

Dafont – it’s a font resource that offers a huge variety of fonts from free, shareware to demo fonts.

Paid or commercial fonts though are the best. Why ? Font designers put extra effort on designing commercial fonts and looks better than most free fonts. Exclusive – its expensive and unique , so only those who can afford these fonts can use them in their logos. There are a lot of font foundries out there , like fontshop.com or fonts.com

If you’re a designer and truly want a font that nobody else uses , I suggest you try to create your own font for your project. Even if you will only design a few letters , you must consider font kerning, height and width of each letter and so much more. Check this font I designed for my client’s logo.

Now lets , begin the tutorial.

1.) Start a new canvas in fireworks , choose a dark background color like black , dark red , etc. *Do not use white or a light color as the background since it wont blend with the stroke color of the font.

2.) Use the Text Tool (T) and choose a font , a serif or sans-serif and any font-size. In this example I chose an Arial Rounded MT Bold Font , with a font size of 52.

2.) Select the text object, and choose white #FFFFFF as the stroke color for the text. Select the stroke color again and choose Stroke Options > and change to Stroke Inside. Follow these settings below :

Stroke Category : Pencil
Stroke Name : 1 – Pixel Soft
Tip Size : 1
Edge Softness : 1

Stick to the rounded type strokes and keep the tip size to 1 , you can use other strokes types if you wish.

3.) Select the text object a change the fill color of the text and choose gradient > linear gradient. Change the color of the right side of the gradient ( the one encircled in red ) to a black or darker color.

You will notice when you select your text object, a gradient handler appears. The one in the red circle which we will call “gradient position” and the one in the orange circle will be the “gradient extender”. The “black line” that connects the gradient position and gradient extender has to be a straight line.

4.) Lastly , its a matter of moving the gradient position further down and adjusting the gradient extender.*Notice the gradient position and extender , this decides the overall look of your gradient so play around which settings you prefer the best*.

The trick here is to make it look like the stroke color blends with the top color of your linear gradient. You may also wish to extend the gradient by playing around with the gradient extender. If you change the font size ( either increase or decrease ), you would need to change the gradient position and extender again.

And there you go, a simple gradient text logo.

Click here to download the gradient text logo source file in Fireworks > [download id="37"]

The theme I have been using since I started using wordpress was Thematic , it’s a free theme framework created by Ian Stewart with lots of awesome features and it has been praised by the web community.

Thematic

One of the main reasons why I use this theme :

Free – one of the best free themes out there. You can also buy a commercial child theme if you prefer.

Customization – The default ( black and white ) theme is ready to use as is , since the code is laid out pretty good ( you dont have to change much ). But you want to fancy it up with graphics and custom code just like what I did , just create a child theme underneath Thematic. I’m planning to make thematic child themes starting next month , it’s going to be exciting =)

Support - The themeshaper forum provides excellent support in case you have questions regarding the theme , the theme members and moderators are always there to assist you in case your having trouble. There are tons of topics there that can help you understand the thematic , try searching for them.

The themeshaper blog also has invaluable information on how to start your own wordpress themes , and with different topics from thematic to wordpress in general.

Site Design

This time , I wanted to keep my site simple and keeping the blue color always present in my site. The previous one
was nice but the graphics were too much. Somebody once told me that I needed texture in my designs so I heeded her advice , and now majority of the site has a grain texture. As usual , my design program was Fireworks , creating mockups and graphics in FW and integrating them in wordpress.

The site now is like 95% complete , with just a few finishing touches in the code. I hope you like the site design this time =)