The Tutorial

Start your Fireworks and create a new white canvas (I started with 540px x 400px). Draw a rectangle (438px x 184px), set its roundness to 88px, radial gradient fill (lighter at the center) and set a stroke to 3px (soft rounded color:#FEE4A9)

Draw an ellipse behind the rounded rectangle, position it precisely and cut it in half by using Knife tool. Delete the bottom part and keep the top part. Fill it with solid color (#FCC953)

Now draw a smaller white rounded rectangle (338px x 88px), position it in the middle of the first rectangle and set feather by using slider to 40px and transparency to about 45%. This way I tried to add a bit of complexity to the basic fill since Fireworks don’t have the Mesh tool like the Illustrator.

Now to add a bit of 3d perception draw two white narrow rectangles and place each on the side of that half ellipse. Rectangles are 56px x 175px each and I set feather value at 25px and transparency was set to 53%.

Now select the half ellipse in the back and go Edit> Copy/ (or just ctrl+C), select left narrow rectangle, and go Edit > Paste as mask, do the same for the right narrow rectangle to trim that excess whiteness

Cheese would not be cool without the holes. Someone might thing that I could have used plain circles but nah, better to make them with pen tool not to have a perfect circles. Draw holes with Pen tool and adjust them by using Subselection tool. Draw them and place them at your will, some bigger some smaller. Fill them with radial gradient as shown below and add the a bit of inner shadow. Go Filters> Shadow and Glow > Inner Shadow and use the settings from the image below.

After placing the holes finish up the image with nice overall shadow. I didn’t use shadow effect I used rounded black rectangle (440px x 57px) which I positioned at the bottom behind all other layers. Just set the transparency to 58% and feather to 15px. And that is it.

If I have omitted something you can always check the source file below.

Download Source File

Feel free to use this Adobe Fireworks source file as you wish, linking back if you think you should.

Original Image

I opened the image in Photoshop and started by going to New adjustment layer > Threshold as shown below.

But before proceeding with threshold adjustment select the Color Sampler Tool from the tool palette and set sample size to 3 by 3 average.

Now move the threshold slider all the way to the left and start moving it to the right bit by bit. First parts of the image that appears while sliding are the most darker ones. Pick a nice spot and mark it with the Color Sampler Tool. You will see number 1 marker. Now move the slider all the way to the left and start moving the slider to the right bit by bit. The most brightest parts begin to emerge. Pick again nice spot and mark it with the Color Sampler Tool.

Threshold did their purpose and we can now delete that layer since we have marked the darkest and brightest parts of the image. Using threshold is a neat trick to figure out the brightest and the darkest areas. Like I have said you can now delete the threshold adjustment layer or hide it if you prefer it more that way.

Now make new adjustment layer and select Curves, now you will see 3 ink dropper icons, one is for black, second is fro gray and third one is for white point.

Click on the first ink dropper and than pick that marker 1 in the image, than click the second dropper and now look on the image for the part that has some gray color in it. It is sometimes hard to spot the gray area but I clicked on the rock since I thought it has the most gray component. And at the and third eyedropper and pick that area marked with number 2 that we made using the threshold.

Of course you can experiment with different points but basically there is not much more to it. Have a look at the difference below.

This routine can be used as starting point for a more serious image manipulation in making wallpapers or compositions.

I am currently working on a project that uses gold gradients extensively so for that task I have created several really nice gold gradients. Feel free to use them as you wish, below is the download link.

Download Gold Gradients Style

In order to use this styles unzip it after download, open up your Fireworks and click on styles palette menu and choose Load Style… or Import Style Library… and browse for the extracted stl file.

Anyway If you need more information about working with Adobe Fireworks styles check this article that covers that topic more thoroughly.

Similar suggestions can be heard from many other sources. I mean I got used to applying IE6 hacks and all that but really why bother, it is time to look ahead and leave IE6 behind. There 2 big reasons.

• It is stupid.

There is no point in supporting a decade old browser that is vanishing from the web.

• It is so time consuming.

It takes so much time to apply all the hacks and tricks and still it won’t look like it should. I don’t charge extra for IE6 support but those who do I really understand them.

And if it is not enough for you to cut off IE6 support I suggest you read this article from smashingmagazine.

This is the end result

The Tutorial

Start with new canvas 400px x 400px, transparent background and draw rectangle 222px x 161px and set roundness ff edges to 16px. Fill it with gold linear gradient from left to right. I made gold gradient using 5 color stops and they are from left to right:#E6BB62, #E7BF6D, #FEE794, #EED299 and #E0AD42.

Select the rectangle and go Filters > Shadow and Glow > Drop Shadow and use the settings form the image below.

Draw new rectangle 220px x 159px give it no fill just rounded line with white stroke and 16px roundness. That will be credit card outline. Now continue with adding details. Draw small rectangle (201px x 2px), give it gradient fill from left to right. Set both color stops to white just change the opacity of the one to the right to 0% to create a nice fading effect. Copy and paste small rectangle and position the other one to the bottom.

Draw 2 circles using the Ellipse tool, one red and one yellow and position them like in the image below. I tried to mimic popular credit card logo here.

Draw 3 rectangles and position them one below other. Use the same fill as for the red circle. Rectangles are 19px x 6px. Group them together by selecting them and pressing CTRL+G

Now in order to make those 3 grouped rectangle to follow the circle form of the logo copy the red circle, select the grouped 3 rectangles and go Edit > Paste as Mask and the logo is complete. Type name of the bank to the right. I haven’t used any fancy effect just plain text.

For the silver area draw rectangle (52px x 36px), set roundness to 10px and set stroke to 1px soft rounded line (color #b4b4b4). Main thing here is the gradient fill. Use liner fill and position it at 45 degree angle as displayed in the image below. Color stops from left to right are: #CCCCCC, #DBDBDB, #F2F2F2, #D6D6D6 and #BABABA.

Now for the numbers use the text tool and type 12 digits (font is Arial regular 17 px) and add a simple glow effect by going to Add Effect > Shadow and Glow > Glow and use the settings form the image below.

You can go wild and keep adding details and maybe some textures but for the most part that would be it. I won’t go trough creating the back side of the credit card here but it is included in the source file and the download link is below.

Download Source File

Feel free to use this Adobe Fireworks source file as you wish, linking back would make me happy of course.

Image Extraction

One of the common tasks every designer faces with is removing background and extracting specific part of the image. Two most common approaches is either by using knife tool or using image channels. Fireworks does not have channels so Photoshop comes pretty handy.

In addition content-aware option which came with CS5 is really great.

Image Enhancements

Although Fireworks comes with image levels and curves it seems that in Photoshop it just works much better. Curves and levels are essential in making specific part of the image stand out or emphasize it.

Brush Tool

Brush tool in Fireworks is really stupid. I have been waiting for Fireworks developers to make brush tool better for years but that is just not happening. So if you want the brush use Photoshop. Photoshop brush is just great (btw Adobe Illustrator brush is just as good).

Great Filters

There are many filters in Photoshop that are really awesome and useful, I am talking about built-in (out-of-the box) filters, of course there are many so called third party filters. So sometimes I do one part of the task in Photoshop and other in Fireworks. Like making cool page background in Photoshop and finishing up the page look in Fireworks for example.

Of course Photoshop possibilities are endless these are just few things I like using it for. I don’t tell you now to go and buy Photoshop just if you already have it as a part of a Creative Suite or have access to it (company that you work for has a license for it) go ahead and use it. It can do miracles and after all it is like many designers like to say “industry standard”.

The only solution is to make your own. It is much easier that one could expect.
I show you how I made this texture above (Which btw you can use if you like it for free as you wish).
And below is the link to see this texture in action.
Check it out

The tutorial

Start by creating 200px x 200px new png document and draw a rectangle that is covering entire canvas (200px x 200px also) and give it a gray color (#8A8A8A).

Than populate the canvas with shapes of your choice. I have used simple doughnuts and circles. Color should be a little lighter than the background rectangle (color used is #939393). make sure the objects you use are not going across canvas border and use a nice uniform density while populating the area with objects.

Now comes the main part. Select all objects including the rectangle in the back (CTRL+A) and group them (CTRL+G or Modify > Group). Than make canvas larger 400px 400px by going to Modify>Canvas>Canvas Size and enter 400 as a height and width.

Now position the grouped objects to top left of the new enlarged canvas and copy it (CTRL+C) and paste them (CTRL+V) 3 times and position all of them one to another.

Make sure you position them exactly one to another, it is very important, use axis coordinates for help during positioning.

Now draw another rectangle 200px x 200px (color not important) and position it exactly in the middle. Set X an Y axis to 100 or use smart guides for help.

Right-click over it and select Convert Path to Markuee…

Right click again and select Crop Document

And there you go. Save it as jpg or png and it is ready for use. Nice seamless background that repeats. Perfect for web pages and other backgrounds in graphic design.

When you apply effects to an object (text, vector, bitmap…) you can group all those effects and save them as a specific style than later if you want to repeat all those effects again you don’t need to go trough applying all of them you just simply apply that specific style.

Look at the screenshot below, once satisfied with the effects applied just click on the bottom icon and save style.

It is good practice to give your styles a meaningful name but would be alright with out that.

This way you can save bunch of cool styles ready for later use. The styles you saved will be available when you reopen that document. But of course you can save those styles and use them again in some other file or simply share your styles with your coworkers or carry them to another computer (home, work…). Fireworks comes with several built in style libraries which you can access trough drop down menu you can see.

Styles you created are under current document in order to save them (export them) go to style menu and select Save Style Library give it a name and save it.

Style library is saved as file with stl extension, you can keep it for later and use it whenever you want, share it with others or whatever. In the same way you can import style libraries. You can find stl files on the internet and import them. Check out Fireworkszone and try some of the styles you can get from there. Just download stl file that you like, open Fireworks and under style menu select Import Style Library.. and browse for style library that you want to use.

I hope this quick tutorial will help you get started with Adobe Fireworks.

You can use this template for free but if you want me to give you some support or maybe do some customization I cannot do that for free. if you want me to customize it for you drop me a line and we can talk about it. This may be the cheapest way for you to get your own website since basic customization starts as low as $50.

Anyway feel free to check out website full screenshot below.

But of course you can check out how it works and download the zip package of the template if you want.
Download
View Demo

Features of this template are:

• HTML5 and CSS3 based.
• Easy to customize.
• Integrated really nice looking jQuery slideshow.
• Almost fully optimized.
• Crispy graphics and more..

For a really affordable price I can additionally provide:

• Change the colors.
• Add your graphics, logo etc.
• Make all the pages.
• Port to WordPress.
• Optimize for specific browser and more
]]> http://krstatzar.com/free-business-web-site-template.html/feed 0 http://krstatzar.com/free-business-web-site-template.html http://feedproxy.google.com/~r/krstatzar/~3/80dxEfQbDW4/design-cute-cat-character-with-fireworks.html http://krstatzar.com/design-cute-cat-character-with-fireworks.html#comments Thu, 15 Sep 2011 18:07:57 +0000 krstatzar http://krstatzar.com/?p=959 Continue reading →]]> Power of Adobe Fireworks is not only in fast web and app prototyping but also in mighty vector handling. This tutorial is going to show you how you can create cute character using some of the basic tools and techniques. Fist of all characters are not my thing but I was inspired by this cute creatures made by great designers from Turbomilk. I have tried to recreate at least something similar. I will explain how i made this cute cat you can see below.



The tutorial

Start your Fireworks and create new 500px x 500px white canvas. That should be just fine to start with. Basic outline of the head shape should be created first. Take the ellipse tool(U) draw a circle than take the Subselection tool (white arrow) and click the drawn circle. You should see the points at the top and at the bottom. Adjust these two points a little with subselection tool by moving them few pixels up and down.



The is the main head part. Color used for fill is solid #FADD99. Give that transformed circle inner glow effect. Filters > Shadow and Glow > Inner Glow and apply these settings from below.


Now to draw the ears I use pen tool. Special tutorial on using Pen tool(p) maybe some other time but it is really important to know how to use this tool. Anyway use pen tool(p) draw the ear and use the same inner glow filter as for the head.


Now using the pen tool (p) again draw another shape that will represent the inner ear. Fill this shape with some pinkish color (#F29193) and apply inner glow effect (filter) twice. As seen on the image below.


Pen tool again and draw yet another shape for that place where ear is folding. Fill this shape with a bit darker color than the base of the head (#F4B317).


That is one ear. For the other ear select all the shapes that make ear copy (Ctrl+c) and paste them (Ctrl+v). Select the three ear shapes on the top on go to menu Modify > Transform >Flip Horizontal and position the other ear to to right place.


Now to make eye(s) draw an ellipse, some 70px x 70px and fill it with linear gradient fill from #FADD99 to #F2EAC7 and apply these two filter from the image below.

Than draw circle, 60px x 60px solid fill #CEF5A6, for pupil. And apply Inner glow filter.

For a bit more details draw a star by using the star shape and set it to 36 points, fill it with white and set its opacity to around 35.

On top of that another circle, with linear fill made like display at the screenshot.

Just one more small white circle with opacity 70% and the eye is done.

Now select all the eye shapes copy and paste them and move them to the right for the other eye. And now all should look like this.

For the nose draw one circle with the ellipse tool and two more circle over it. Now select all 3 shapes and choose punch from the path palette.

Nose shape fill with radial gradient fill with white in the center and rose at the end.

Mouth are made by 3 lines drawn with pen tool. Draw mouth using 3px soft rounded line (color #9E7107).

Now to add a bit of 3d impression draw a circle and by using subselection tool transform it a bit.

Then draw another shape with pen tool and join these two shapes by selecting union paths from the path palette.

Now move this shape below all other shapes (pres ctrl + arrow down) but the head shape, set its opacity to 30% and set edge to feather 6px.

Ok the end is near. To distinguish this cat from a pig I decided to give it a spotty look. There are many ways to do that and I decided to use more natural texture. I found neat cat texture (leopard) and resized it to 400px x 400px and pasted it on canvas with cat.

Now copy and paste all the head shape elements (head and ears basic shape) and join them with union path option from the path palette. This shape will be used as a mask.

First select the newly created head shape and press ctrl+c, than select the leopard texture and go to Edit > Paste as mask.

Hide or delete the shape we used for creating a mask. Position the masked layer behind the eyes but above the basic head shape. Set its blending mode to overlay and opacity to around 40%. And there you go.

You can also use that mask shape that we used, make it visible again, move it all the way to the back and add it drop shadow effect.

Not bad I think. Sure it can be done a lot better but I think I covered lot of stuff with this tutorial. If still not sure how to do something I give you original source file so you can check it out yourself.
Free Adobe Fireworks png file with all the layers and styles. Use it as you wish without any restrictions. It is Adobe Fireworks CS5 png file, you will need at least CS3 version in order to use it properly.

]]> http://krstatzar.com/design-cute-cat-character-with-fireworks.html/feed 0 http://krstatzar.com/design-cute-cat-character-with-fireworks.html