Blog

Web UI & UX

Designing Mobile Versions of Your Webpage

With over a quarter of adults and half of teens in the UK owning smart phones, it’s becoming imperative to design your website in a way that can be viewed on someone’s Android phones, iPad, iPhone, or other mobile device. Consumers want to access websites on-the-go, and if your site will not load on their mobile phone, they will go to a competitor for the information they seek.

How do you start designing your site’s mobile version? First, it’s important to understand the unique needs of mobile browsers. Because even the best smart phone has a much lower resolution than even a small laptop computer, you need to focus on making your site as easy to read as possible: small logos, reduced images, and small chunks of text. If you choose to display simplified content on your mobile site, you should be sure there are clear links back to the full content and the main page.

Another thing to be sure of when considering your mobile web design is the quality of your code. While most computer browsers are able to guess at what you mean even if the code isn't written perfectly, the site will usually display properly. Not so with mobile browsers. You should always be validating your code prior to publishing your site, but it’s especially important when designing a mobile site.

Because there is so much variance in the way mobile sites are displayed on the various models, your best bet is to incorporate a fluid layout code. This code tailors the site’s layout to the specific resolution of the screen it’s being viewed on, so there’s no ugly white space or awkward scrolling.

Most uk web hosting companies will be able to publish your mobile site, but some companies do specialize in mobile site hosting. The benefit of using a mobile web host is that these companies come with site builders that offer special tools for optimizing your site for smart phone viewing.

Whatever host you decide to use, you should take the time to test your site on a number of devices before launching it. Double-check your code, pay attention to load times, and always keep the functionality of the site in mind. By designing a mobile version of your webpage, you can guarantee return traffic from users who want to reference your site from anywhere, and can also reach a number of readers who would otherwise never find your site.

Batch Processing with Adobe Fireworks

batch-00Batch processing with Fireworks has saved my butt on countless occasions. To be quite honest, I have no idea why their isn’t an equivalent feature packaged with Photoshop. With Fireworks it’s intuative, full-featured, and fast. Lets get started!

Unlike most of our tutorials, we won’t be started by opening up a new document. Instead, browse to File > Batch Process.


You should see a screen similar to this one:

batch-01


When I’m getting ready to batch some photos I’ll typically put everything I need into it’s own folder. In that case with the screen above I could simply browse to the folder and then click the Add All button. If you prefer you can click to highlight the images you want (Ctrl + Click to highlight multiple images) and then hit the Add button. Once you have all the images you want in the white box at the bottom hit the Next button.

We should come to a screen that looks like this:

batch-03

The options that you have available in Fireworks Batch are shown in the left column. To add one of the options simply click it and press the Add button in the center. If you highlight the option you’ve added in the left column you can configure it further.

Lets go over each individual option:

Export

If you’re working with big images that came right off a camera, this is great way to manipulate them. You can select any of the standard web export choices that come bundled with Fireworks, any custom export options you may have created, or you can choose a custom export option.  We’ll dive into some of the advanced options of image exporting in another post, but here’s a quick guide:

Access the settings by choosing custom… from the dropdown and then clicking the Edit button. From the top left you can select the type of file you’d like to export your images as, JPEG, GIF, PNG, TIFF, etc. Once you select the type you can make additional adjustments such as compression for JPEG images, color pallet for GIF files, etc. You’ll note that you see the file size (on disk) and the estimated download time in real time as you change the file type and adjust the settings. For general photos that would appear in an image gallery or something similar I typically use the JPEG file format with the quality set to 85. Once you have your settings tweaked just press “OK” to return to the batch setup.

Scale

Scale is another batch option I use frequently. Once added to the batch process your options include: Scale to Size, Scale to Fit Area, and Scale to Percentage.

Scale to Size

Set the exact height and width you want your images. If you select Variable in either dropdown Fireworks will retain the correct aspect ratio of the image.

Scale to Fit Area

Similar to the above option but with additional flexibility (my favorite). Set your maximum width or height and Fireworks does the rest. If you have a mix of horizontal and vertically oriented photos this option works great. You can also check the box to have Fireworks only scale images that are larger than your set height/width, that way you can avoid blowing up smaller images and ending up with blurry photos.

Scale to Percentage

As simple as it sounds. If you want to change a 1000px wide photos to 500px change the slider to 50%.

Find and Replace

Find and Replace can be very powerful, especially if you use Fireworks on a day-to-day basis and have hundreds of PNGs floating around. You can run this option only on Fireworks PNG files (as well as Macromedia Freehand files). If for example you wanted to change any instance of the font “Times New Roman” to “Helvetica”, this option makes it effortless. You can also change sections of text, colors, URLs, and more.

Rename

Rename is a great way of removing text from batches of files. For example, my camera adds the letter “p” to the beginning of each image file name – I can easily remove them while batching. You can also add prefixes and suffixes, or replace/remove blank spaces (to “replace” a character or blank space with nothing simply leave the “with:” field blank).

batch-04

The above options would take a file names img001 and change it to product-photo-001.

Commands

There’s loads of graphical options in the Commands section of batch processing. You can convert the images to greyscale or sepia, rotate images, sharpen or blur, and much much more.

Wrapping up your Batch

If I decide I need to sharpen some large images before resizing them, it’s important I have the batch process in the right order (sharpen then resize). You can adjust the order that batch runs the commands on each image using the arrows in the upper right hand corner. Simply select the option you want to move and click the appropriate up or down arrow.

Once you have your options configured and in the proper order, click next.

batch-06

The final step of the batch process is to set the output and backup options.  I typically want to keep my original photos untouched, so I choose Custom Location and then create a new folder to hold the post-batch images. If this is a batch you’ll run frequently you can also elect to save the batch script as a JSF file for later use. Click the Batch button to run the process and Fireworks will inform you when it has completed the chore!

Has batch processing saved your butt in the past? Do you have any more advanced techniques using this feature of Fireworks? Feel free to post below!

Easy Glossy Buttons with Fireworks

Just a few short years ago the gloss, or shiny look took the world of web interface design by storm. From a visual design perspective it became synonymous with web 2.0 – the modern crème de la crème of internet buzzwords! But is the glossy button falling from grace? Perhaps, but that won’t stop us from exploring some fun Fireworks techniques as we create some glossy buttons in Adobe Fireworks.

Before we get started: I’ve switched to Fireworks CS4 for these tutorials for several reasons, the biggest being the text engine bug introduced in the CS4 product release has been fixed. This is a pretty straightforward tutorial, but in the future if there’s any major differences between CS3 and CS4 and how my tutorials relates to the versions I’ll make note of it.

Getting Started

Lets create a new file by going to File > New and setting our canvas size to 1000 pixels wide by 1000 pixels tall. Set your canvas color to white and ensure your resolution is at the standard 72 pixels/inch. Set your zoom to 100% by holding CTRL and pressing +/- or using the scroll wheel on your mouse (if you have one). Now select the rectangle tool from the vector section of the tools panel on the left. Lets draw a square in the center of the canvas. To force the shape to stay truely square, or “constrain the proportions”, you’ll want to hold down the Shift key as you draw the shape. Depending on what you were doing with Fireworks last time you used it, your new square could be any color. Lets change it to blue by selecting the black pointer from the tools panel and clicking our square to highlight it. In the Properties Panel at the bottom you’ll see the fill color of the selected object. Click the paint chip next to the paint bucket icon and enter this HEX code into appropriate box at the top of the pop-up: #0B4E80. Press Enter to save the color change. Before we move on let’s make our blue square “rounded” by adjusting the Rectangle Roundness setting in the Properties Panel. Set this as you see fit, but I’m making mine at “8″.

You should have something like this so far:

glossy-button-01

Layers of Fun

Before we go much further, make sure you’re looking at and are familiar with the Layers panel. If you press F2 on your keyboard this will toggle Fireworks Layers panel on and off. It’s important to understand how layers work in Fireworks (or any graphic design program for that matter), so if you need to brush up I suggest you press F1 to bring up the help screen, search for “layers” and read the section on “Working with Layers”. Why am I worried about your understanding of this concept so much? Because we’re going to be building the effects of our glossy button one on top of another using layers.

With the layers panel open click to highlight our blue square. Now press CTRL-C to copy our square and CTRL-V to paste a new copy onto our canvas. You won’t notice much on the state, as Fireworks will copy the new vector shape directly on top of the existing one. You will however notice a new blue square at the top of the layers panel on the right.

Now, select the ellipse tool (same place you found the rectangle tool, hold down your mouse click to see all of the shapes) from the tools panel on the left. Now draw an oval over the top half of our blue square. Change the color of the oval to anything other than blue for now, and then adjust the opacity to 50% in the property inspector.

Mine looks like so:

glossy-button-02

I use the opacity slider quite often just to align and manipulate shapes. Since I can see both vectors now along with how they overlap, it allows me to figure out where I want everything.

Glossy Button GradientMaking sure you have nothing selected already by clicking a blank area on the canvas. Now click the top blue box, hold down the shift key, and then click the oval on top so both shapes are selected. In the top menu click Modify > Combine Paths > Punch. If you did it correctly you should have two blue shapes left, the top most having the shape of the oval cut out of it. Select that shape and change the fill type from solid to linear. Your gradient will most likey start out wonkey, so click the color chip and set the left (top in this case) to #073252 and ensure the right (bottom) color is set to the original blue #0B4E80.


You should end up with something like this:

button-03

Get your Gaussian Blur On

Before we start this step change your canvas color to black. To do so, click a blank space on the canvas and adjust the “canvas color” selection in the properties panel in the lower left to the appropriate color chip. Now select the ellipse tool from the tools panel on the left and draw an oval in the middle of our square shape. Change the color of the oval to white (#ffffff), and then add a Gaussian blur by clicking the plus symbol in the filters panel at the bottom of the screen and selecting Blur > Gaussian Blur. I set my glow to 40, feel free to play around with yours as you see fit. Flatten the new blurred shape by selecting it and clicking Modify > Flatten Selection.

Marquee Effects

Select the black pointer from the tools panel on the left. If you click the towards the edge of the rear blue square (not the half square we created) you should be able to highlight it. Now copy (Ctrl+C) and paste (Ctrl+v) a duplicate square on top of the existing one. With our new square copy highlighted, go to Modify > Convert to Marquee. You now have a “marquee” or mask drawn on your canvas in the shape of our original rounded rectangle. This means that everything inside of the marquee can be manipulated with our tools, and everything outside is protected. Lets inverse this effect go clicking to select > select inverse. You’ll now notice that our marquee is drawn around not only the rounded square but also the canvas itself. We can now delete the “glow” that extends outside of our square shape. Now press Ctrl+D to remove the marquee. Click our new timmed glow bitmap that’s on top of our square and move it down behind the half-square using Ctrl+Down Arrow. While the glow is still selected, change the opacity to 80 in the properties panel. You should end up with something similar to this:

button-final

Using some of the techniques we went over in this short tutorial you should be able to create some nice modern graphic web elements. Feel free to experiment and post back here if you run into any questions!

Here’s the link to my final Fireworks PNG.

Reader Mail!

Reader MailTime for reader mail! I’m quite a bit backlogged, so I apologize on how long it took to post this. Most all questions I try to respond too via email right away though. Keep them coming! As to why there was such a long dry spell with the blog: To make a long story short I took a new job at a company 1,000 miles away in Charleston, South Carolina. At the time we moved my wife was about nine months pregnant. Our first child, a beautiful baby girl was born July 7th. Check out the Flickr album here if you’re curious. Thanks for everyone’s patience and kind words of encouragement during this lull in activity. Now on to the mail!

I’m loving what I’m seeing of your site so far and greatly appreciate the tutorials that you’re making available.  I’ll be picking up your book when it becomes available, but in the meantime might you be able to recommend a reference that deals with using Fireworks for design?  Are there any books that you consider indispensable?  Thanks, and I look forward to future postings!-Chris

Thank you for the kind words Chris! As for your question regarding Fireworks literature, sadly I can’t recommend anything. The bulk of books that have been released for Fireworks over the years typically illustrate how to use the tools individually, as opposed to  demonstrating how to use them in a workflow. If anyone has any recommendations for Chris please leave them in the comments!

I have noticed the following on some blogs:

“This is a preview of Fire Up Your Butt: Part 3. Read the full post (421 words, 5 images, estimated 1:41 mins reading time)”
Please tell me what WordPress  plugin you use for this and where can i download it.

-Boris

The plugin I use that you’re describing is called “Evermore”. You can download it here.

I have a couple of questions:

1. Will your tutorial work with FireWorks MX?

2. Will your series cover how to open WordPress Blog in my site so I am able to see my navigation buttons? Just like your site?

-Lynn

I’ll admit that I haven’t used Fireworks MX in quite a long time, but for the most part in this series we’re keeping things pretty simple. In the event my exact instructions don’t match the version of Fireworks you’re using, it could be that that particular feature or option was moved in later versions of the software. Look around the user interface to find a solution, or if you get stuck just leave a comment or contact me through my form on this site!

As for WordPress theming, this question comes up quite often. As such, I’ll be writing a tutorial on the basics of WordPress customization later on. Thanks Lynn!

If anyone else has questions just shoot me a note with the contact button above, or if it’s specific to a tutorial just leave it in the comments. Thanks everyone!

Bellabean Coffee: Part 6, Using Layers in Fireworks

bellabean_coffee_07_iconThis is the sixth part of a series of web design tutorials on Adobe Fireworks. Using a fictional company I’m documenting my design workflow from start to finish. You can follow along by starting at the beginning of the series or by downloading the most recent Fireworks PNG file here (right-click, save-as). If you’re just starting out, you can download the 30-day full feature Adobe Fireworks demo here (note: A relatively painless account setup is required to download the free demo).

Let’s get going by downloading the last PNG that we left off with here. In the last installment of this series we added a feathered photo to the background of the design using an image we downloaded at sxc.hu. In this new tutorial we’ll add a sidebar to our design to break up the space. Since we already have the coffee cup image on the right hand side of the layout we’ll add the sidebar there.

bellabean-layers.gifBefore we really get going, I want to introduce a feature of Fireworks that plays a very important role. If you’re familiar with any other popular graphics program you might already be familiar with the concept of layers. First click “Window” in the top toolbar and make sure you have a check next to “Layers” in the drop down menu. You should have two layers so far in the panel, a “Web Layer” and “Layer 1″. We’ll be talking more about the web layer in the future, so ignore that for now. Layer 1 as you can see contains each element that we’ve added to the canvas so far organized by their stacking level. You should be able to click the layer named “Coffee Cup”. You’ll note that when you do so the coffee cup layer is highlighted and the actual coffee cup image on the canvas is selected. This is pretty handy as you can now move the coffee cup around with your arrow keys or preform other actions on it that you normally would.

You can also click and drag the coffee cup object up and down in the layers panel to change it’s stacking order position. In our Bellabean example I could click and drag the coffee cup down past the first “rectangle” object. This would put our coffee cup behind the faded green bar in our masthead. Try experimenting with the stacking order of the coffee cup object if you’re not familiar with the layer concept. Be sure to fix everything back or reload the PNG before continuing though.

When you’re ready, let’s make a new layer! To make things easier to manage for now, collapse “Layer 1″ by clicking on the down arrow tobellabean-new-layer the left of the layer name. Now click the “New/Duplicate Layer” icon at the bottom of the layers panel. Fireworks will automatically name this “Layer 2″. If you double click the text that spells out Layer 2 you can rename the layer. Lets rename ours “Right Sidebar”. Much like we repositioned objects in layer 1, we can click and drag layers around in the stacking order as well. You’re new layer should already be on top of Layer 1, but it not move it there now. Now just lock layer 1 and we’ll be ready to get to work. To do this, click the white space next to the eye icon (if you have layer 1 selected you’ll see a pencil icon). You should now see a lock icon, and you won’t be able to move or interact with any objects in layer 1. Now let’s make our sidebar!

Select the rectangle shape tool and draw a rectangle on the right hand side of the body of the page. I started mine in the very corner of the solid green rectangle that sites atop the green gradient behind the coffee cup. Since we’re working on Layer 2 which sites above all of those other objects, the new sidebar rectangle will be on top of every other object for now. I made my rectangle 300 pixels wide, and positioned it exactly so as to touch the edge or the green bar and the side of the main body content.

bellabean-color-picker

If you downloaded the latest PNG and have been following along, you’re new rectangle might have inherited the same gradient that we used before. Let’s change this to a solid fill by changing the setting from “Linear” in the properties panel to “solid”. Change the color to #3D6312. How did I come up with this color? I used the eye dropper tool to select a random shade of green to the left of our new sidebar, then I clicked the new color chip in the properties panel. From there, I clicked the icon that looks like a color wheel called “Sys Color Picker”. I then moved the right hand slider down to darken the shade of green I picked with the eye dropper. I then clicked “Add to Custom Colors”, and closed the window with “ok” (these steps could be significantly different on a Mac).

This is looking a little goofy at the moment with the coffee cup behind the sidebar. Let’s fix that by unlocking “Layer 1″. We can now click on the coffee cup to select it, and cut it from the canvas with CRTL+X or Edit > Cut. If you now click our new dark green sidebar and paste (Ctrl + V or Edit > Paste), the coffe cup will be pasted on top of the sidebar in the “Right Sidebar” layer in the exact same position that it was before. Since it’s already selected and probably annoying you as much as me, use your left arrow key to move the coffee cup into the center of the column.

You should end up with something like this:

bellabean-first-column-shot-sml

Now let’s add a few finishing touches to the sidebar element before we wrap up. Select the darkgreen sidebar shape, and make a copy of it using Ctrl+C (or Edit > Copy). Now paste the copy on top of itself with Ctrl+V (or Edit > Paste). Since we cant tell that anything happened, let’s change the color of the new rectangle. The new rectangle is already selected, so click the fill color chip in the properties panel at the bottom and select black (#000000). Now press Q on your keyboard to activate the scale tool. Use the bottom-center anchor point to drag the rectangle up. Set it to the same height as the top green bar that runs the length of our page body, which is 40 pixels tall. If you can’t eyeball it just right, use the numeric transform in the lower left of the properties panel to set that bar to 40 pixels tall.

Change the opacity to 30% to finish up. A subtle touch sure, but we’ll keep building up this area in the coming weeks.

bellabean-second-column-shot

Next time we’re going to add a few more details to our sidebar, and then dive into text and typography with Fireworks. For now you can download the completed PNG here. Coming up I’m also going to address some reader mail which I’m sadly backlogged in. Thank you for the continued support and encouragement! As always I appreciate your comments, and be sure to point out any problems that I might have over looked. Thanks again.

Bellabean Coffee: Part 5, Giant photo background

Bellabean Coffee 5 IconThis is the Fifth part of a series of web design tutorials on Adobe Fireworks. Using a fictional company I’m documenting my design workflow from start to finish. You can follow along by starting at the beginning of the series or by downloading the most recent Fireworks PNG file here (right-click, save-as). If you’re just starting out, you can download the 30-day full feature Adobe Fireworks demo here (note: A relatively painless account setup is required to download the free demo).

Let’s start by firing up PNG that we left off in last time. We just added some vector details and worked with the raster cup we imported and masked. What we need now is a more interesting background. We’ll download from the same source we got our coffee mug from, SCX.hu. The photo of a coffee shop we’re looking for is located here. Once you’ve downloaded the full size file, import it into Fireworks by going to File > Import.

Once you click the canvas to place the file, you’ll note that the photo is rather large. Zoom out using CTRL – far enough to get a better view (50% worked for me).

First thing we’ll do to jazz up the photo is feathering the edges. Make sure the photo is selected by clicking it with the black pointer. Now select the oval marquee tool from panel on the left in the “bitmap” section. Draw an oval over top of the chairs in the photo, keeping your oval well inside of the edge of the photo.

Marquee Size and Shape example

This image illustrates the approximate size and shape we’re aiming for. Feel free to experiment with different sizes and shapes in the future.

With your marquee drawn, go to Select > Feather. Enter 100 for the radius, and click OK. You’ll notice the marquee shrink on you a bit. Now go to Select > Inverse, which will flip the pixels that are selected to the outside of the marquee. To complete the feather, press Delete on your keyboard. You should now have an oval shaped portion of the photo that fades to transparency all the way around.

If everything works out you should end up with something like this:

Final Feather

To work this image into the design, we’re going to use a few different tricks. First, let’s resize the image while constraining the proportions. Select the feathered photo with the black pointer and then hold down Alt and Shift. Now click and hold one of the blue corner points and drag it out to enlarge the photo. I got mine to about 1200 pixels wide. With the photo still selected hold down Ctrl + Shift and press the down arrow. This should move the feathered photo to the lowest position in the layer stacking order (behind the rest of the objects).

Select the top tan colored vector rectangle that resides behind our logo and coffee mug. Set its transparency to 80. Now selected the background photo again and use the up arrow to move it up into position. Get the top of the table that’s in the center of the photo in line with the “COFFEE” in our logo. Now select the top most green bar beneath the logo. Press Q on your keyboard to activate the scale tool. Using the center transform handle cut the height of the shape to half what it is currently. Now use the arrow keys on the keyboard to position the vector evenly between the bottom of the logo and the top of the second green bar.

You should end up with everything positioned like so:

Positioning vectors in the masthead

The text and content that will eventually be displayed below our masthead could now run into issues with the high contrast photo in the background. Lets remedy that by adding some color to the inner body. Start by selecting the lower green bar. Copy the bar with Ctrl C, and paste it in place with Ctrl V. As the new copy should be selected for you already, press down on your keyboard to move it off top and just below the original. Now press Q to activate the scale tool, and use the center handle to enlarge the height of our new vector to about three times the height of the tan masthead shape. So far so good! With the new shape still selected, change the fill property from solid to Gradient > Linear. Now click the gradient color chip directly to the right of the paint bucket icon in the property inspector. Click the lower left paint chip in the popup, and then click the green color of the bar or logo on the stage above. Click the right hand lower box and change the second gradient color to white. Click anywhere on the canvas to close the gradient properties. The gradient vector shape should still be selected, so make one last adjustment to it. Change the transparency of the shape to 90, which should show a dimmed out version of our background image through the green foreground color.

If it turned out right you should have something like this:

Bellabean Coffee 5 Final

You can download my completed PNG file here (1.5MB Fireworks CS3 PNG) and compare and contrast your version if you like. I think adding another column to the body will be in store for this project next time, stay tuned!

Special thanks to Brendon for pointing out my typo in the last post, sorry about that ;-) … and thanks to KiwiBrian for the encouragement ;-)

Quick Navigation Bar

Quick Navigation BarI’m taking a break from the Bellabean Coffee design series this week to show a quick example of my workflow with Adobe Fireworks from start to finish. In this quick tutorial I’ll demonstrate how to design a typical bar style navigation and then export the images for inclusion in an HTML document. The Fireworks PNG source file for this will be included at the bottom of this post. If you’re just starting out, you can download the 30-day full feature Adobe Fireworks demo here (note: A relatively painless account setup is required to download the free demo).

Start out with a fresh canvas by going to File > New. Set the width and height to 2000 PX each, and make sure the background is set to white (#FFFFFF) and click OK. Select the rectangle tool from the vector section of the tools panel on the left. Draw a short rectangle on the canvas that measures 790px wide by 60 px tall. Get the shape in the ballpark when drawing it, and then adjust it in the properties panel numerically (measured in pixels). You’ll find this adjustment in the lower left corner. While you’re down there set the color to #351E7B by clicking the color chip next to the paint bucket and entering the HEX code. Set “Rectangle Roundness” to 40 to complete the basic shape.

Quick Navbar 0

With your black pointer selected, click our new rounded rectangle to make sure it’s selected. Now copy the shape using Edit > Copy ( better yet use Ctrl + C), and paste it on top of itself with Edit > Paste (Ctrl + V). Fireworks will automatically place the new copy directly on top of the original. Use the down arrow on your keyboard to move the new duplicate shape down and away from the original. If you hold down Shift while you press the down arrow, you’ll engage super fast movement speed.

Head back to the tools panel and choose the rectangle vector tool again. Now draw a new rectangle that covers the top half of our duplicate. Make sure it covers the entire width and about half of the height. Now we need to select both of these boxes, use the black pointer to do so. You can hold down the shift key and click each shape to select them (note the blue boxes that indicate this). Now go to Modify > Combine Paths > Punch. If you pulled this off, you’ll be left half of a rounded rectangle, and the original above it.

Select our new shape and change the color to black (#000000), then move it up using the arrow keys into a position that covers the lower half of the original shape. You should be left with something that looks like this:

Navigation bar 01

With the black portion of the bar still selected, change the opacity of the shape to 35%. This should result in a darker version of the violet color beneath it.

Gaussian BlurSelect the circle shape from the tools panel on the left, and draw a skinny oval in the middle of our budding navigation bar. Mine ended up 710px by 20px, use the numeric properties to adjust yours so it’s close. You can also adjust the oval using the scale tool (Ctrl + Q). Adjust the position of the oval so it’s in the center of our navigation, then turn your attention to the “Live Filters” (formerly Live Effects) panel, located in the properties panel, on the right hand side). Press the Plus icon (Fireworks CS3) to select from the Live Effects, and choose Blur > Gaussian Blur. Set the slider to “10″ and click OK. With the blurry oval still selected, change the opacity to 35.

What good is a navigation bar with no buttons? Good question! Select the text tool on the left, and set it to Arial, 17, Bold, White (#FFFFFF). Click onto the left side of our bar and type out “HOME” in all caps. Leave the text as is for a moment, and select the rectangle tool one more time. Draw a skinny vertical whiteHome Button line next to our home button. Adjust the size to match my 2px wide by 45px tall shape. Now copy and paste a duplicate shape, and then use the right arrow key to move the duplicate adjacent to the original. With the second shape still selected, change the color to black (#000000). You should now have two skinny rectangles, one white and the other black, next to each other. Zoom into the area using the zoom tool, or Ctrl +. Select both of the shapes by holding down shift and clicking each rectangle. Now group the rectangles by going to Modify > Group (Ctrl + G). Set the opacity of the group to 32%, and move it next to the “HOME” text as depicted in the image shown here.

If you use the black pointer to click and select the “HOME” text, and then hold Shift and click the separator we just made, you can copy and paste a duplicate onto the canvas. Fireworks will place the copies directly on top of the originals. Use your arrow key to move them further down the bar to the right. Once in rough position, change the “HOME” text to “ABOUT”. Continue this process until you’ve entered HOME, ABOUT, OUR SERVICES, HISTORY, FAQ, and CONTACT. Adjust the space between everything with the arrows keys as you go. You should end up with something similar to this:

Navigation bar 02

Looking at this now, I’d say the text is a little big. Holding down shift, click each piece of text until they’re all highlighted. Change the font size in the properties box from 17 to 13. If the text fields are centered in the properties panel, changing the size of the font should keep them centered in each button. If after making the change they look misaligned, just click each one with the black pointer and adjust its position with the arrow keys. Here’s the final graphic:

Navigation bar 03

Navigation bar 04Now that we have everything finalized, lets export everything. First we have to draw hotspots over each button. For this we’ll need to switch to the Slice tool in the toolbar to the left. You’ll find it in the web section towards the bottom, it looks like a scalpel over a green box. Use the slice tool to draw your green boxes over each button section. Much like the vector rectangle tool you’ve been using, the slice tool will allow you to draw and adjust shapes where you need them. If you need to adjust your hotspots, just switch to the black pointer and zoom into the area that needs attention. Be careful to only cover the pixels that make up the button graphic, keeping the slice area pressed right up to the edge like shown.

The last step, exporting the images, can be done in a variety of ways in Fireworks. Since I’m a pretty hands-on kind of guy, I use this technique: Start by making sure that our button images are set to the correct file type in the properties box. Since we’re using gradients in this example, we’ll choose “JPEG – Better Quality”. Now simply right-click each button and select “Export Selected Slice”. Do this for each individual button. You’ll be asked via a system window where you want to put your new images. I make a local folder for the site, and place the images in an aptly named “images” folder within that. You should also save your original source PNG, typically in a separate folder from whats being uploaded to the web server.

Want to make rollover versions of each button? Of course you do! Simply select the underlying purple bar vector, and change it to different shade of purple, or any other color you like. You can change the color of the text as well (mind the contrast between bar and text). When you export the images again, just name them accordingly. I use this format: nav-home.jpg and then nav-home-ovr.jpg.

If you so choose, you could also automate a lot of this with Fireworks, add drop menus, and even have Fireworks export the final HTML. I’ll save that for another time though. Please leave any questions you have in the comments. Thanks!

The source file (Fireworks PNG) is located here (right-click > Save As).



Bellabean Coffee: Part 4, Masthead Details

Bellabean Coffee, Part 4This is the fourth part of a series of web design tutorials on Adobe Fireworks. Using a fictional company I’m documenting my design workflow from start to finish. You can follow along by starting at the beginning of the series or by downloading the most recent Fireworks PNG file here (right-click, save-as). If you’re just starting out, you can download the 30-day full feature Adobe Fireworks demo here (note: A relatively painless account setup is required to download the free demo).


Bellabean Coffee: Part 4 (start from file bellabean_coffee_04.png)

When we left off last time we had a nice looking coffee cup floating in our layout that we masked with Fireworks. Lots of people that use Fireworks prefer to keep everything as editable as possible, and avoid “destructive” techniques. Quite often though I know for a fact that I won’t need to revert back to where I was, so I’ll flatten masked objects. If you click our coffee cup to highlight it, you’ll see the selection includes what’s left of the photo – what the mask is covering. Go to Modify > Flatten Selection. The bounding box should now snap right to the edges of the cup, making it easier to work with. Although this is “destructive”, meaning that we can’t unmask the cup anymore, I’m not worried.

Early stage of a coffee cup shadowLet’s add some depth to the design by adding a shadow. First change your fill color to #000000 (black) and set the stroke color to none. Now draw an oval over the bottom of our cup. Make it a touch wider, with a slightly more round radius. You can eyeball this of course, but mine ended up 247px wide by 32px tall. Adjust yours with the numeric path properties in the lower left if you wish. Now, with your black oval selected hold down CTRL and press the down arrow. This should move the oval behind the cup, if it doesn’t keep pressing down. With the oval still selected we can add our blur. In the properties panel at the bottom, on the right hand side, you’ll see a “plus” symbol next to the word “filters”. These are your Live Filters. Click the plus, go to Blur then choose Gaussian Blur. Adjust the blur radius slider to 14 and click OK. You should end up with a pretty convincing shadow. Lets group the cup and the shadow together since we know they’ll always be together. With your black pointer draw a box around both the cup and the new shadow to highlight them. Now hold CTRL and press G.

To work the cup into the masthead, I’m going to shrink it down a little and move it to the right hand side of our design. With the group selected, press Q on your keyboard (or select the scale tool from tools panel underneath the black pointer). Hold the Shift button down to constrain the proportions of the cup, and then drag a corner handle inward to shrink it down. I want to get the cup about 30 or 40 pixels taller than the masthead, but don’t worry about perfection here. Drag the cup into place to match what I have below:

Mug placed in Masthead

A note on using the scale tool: You can shrink stuff as much as you like with no loss of quality (aside from some aliasing, but we’ll get into that later). However, you can’t enlarge images again without wildly distorting them. If you shrink something too much, just use Undo (CTRL Z) to revert back. Once something is a symbol (as discussed in part one of this series), you can change the size however you like without distortion (assuming you don’t enlarge bigger than the original).

Linear Fill OptionsNow that we have the sexy coffee cup our boring beige background color is looking a little lacking. Lets add some more vector shapes to punch it up. First, draw a long rectangle similar to our green bar at the bottom of the design. Make it about one third thicker and just above the green bar. Using the “Fill” selection in the properties panel at the bottom, change the fill to Gradient > Linear. More likely than not, Fireworks will set the fill to an ugly verticle gradient (CS3). Earlier versions of Fireworks default to a horizontal gradient. Either way, you can change the direction of the gradient by adjusting the direction handle that appears when the shape is selected. The circle portion of the handle can be dragged around the canvas to control where the gradient starts, while the square end of the handle can be moved to change the direction of the fill. Move the circle end of the fill handle to the left of our new box, and then click and drag the square end to the opposite side, hugging the outside edge of our coffee cup. Try to get the fill direction as horizontal as possible. If the fill keeps snapping to an unfavorable position, try moving to an extreme angle, letting go, then trying again. Now let’s adjust the colors of the gradient. To change the options for the linear gradient fill, click the color swatch. You’ll see two boxes on each side of the gradient. The lower set of boxes control the fill color of each side, while the top two boxes control the percentage of transparency. What makes this tool so nice is the fact that when you click one of the color chips you’re presented with a set of web safe colors, an input field to enter a custom HEX value, and most important of all – an eyedropper. Now click the left color chip and use the eyedropper to click the beige background of our masthead. Now click the right color chip and change the color to the green we’ve used in the lower bar and the logo. Click anywhere on the canvas to retire the gradient fill properties box. Click to highlight the box we just created, then move it behind the cup using CTRL and the down arrow. If you press Q on the keyboard you’ll once again activate the scale tool – adjust the width of our new box to make sure it doesn’t poke out on the right side of the
coffee cup or off of left edge of the masthead. You should end up with something that looks like this:

Bellabean Coffee 5: Finished Image

You can download the source PNG file for this tutorial in the state it’s shown above here (right-click, save-as). Next week we’ll start adding some navigation elements and go over some cool techniques for buttons. Who doesn’t love buttons? If anyone has any questions just me a line in the comments below.

Bellabean Coffee: Part 3, Using Raster (photo) images in Adobe Fireworks

Bellabean Coffee: Part 4This is the third part of a series of web design tutorials on Adobe Fireworks. Using a fictional company I’m documenting my design workflow from start to finish. You can follow along by starting at the beginning of the series or by downloading the most recent Fireworks PNG file here (right-click, save-as). If you’re just starting out, you can download the 30-day full feature Adobe Fireworks demo here (note: A relatively painless account setup is required to download the free demo).

Bellabean Coffee: Part 3 (start from file bellabean_coffee_03.png)

In the last segment we left off with this file, which includes a vector based masthead made up of two shapes, and a logo placed on top in the upper left which we also made with Fireworks in this tutorial here. As we’ve already learned, Fireworks is a very capable vector image editing program. But in addition to that Fireworks is also able to pull off a lot of the raster (or photo) editing tasks that are usually reserved for its cousin Photoshop. We’re going to continue our Bellabean series by finding, importing, and masking a photo.

So we’re designing a website for a fictional coffee chain store right? What are we missing in the design so far you might be thinking? Coffee of course! Depending on the budget of your particular client you have plenty of options. If this was a real company with hundreds of employees and a dedicated marketing budget chances are we’d have access to real live professional product photography. Since we’re working for a fake company we’ll use a free source, one of my favorites is www.sxc.hu. Don’t be daunted by the Hungarian domain name, the sites boasts over a quarter of a million free stock images with relatively generous licensing rights.

I grabbed this beautiful photograph by Dimitris Kritsotakis here (note: You’ll have to create a free user account at sxc.hu, which is painless. You’ll thank me later). Save this image in a separate folder, I call my folder “stock photography”. I keep this folder in a “design files” folder which has separate folders for my Fireworks files, Photoshop files, Illustrator files, Flash files, and the stock photos.

Transform HandlesOpen up the bellabean_coffee_03.png file from the end of the last lesson, and then import our new stock photo by clicking File > Import. Browse to the location you saved the file, click it, and then click open. You’ll be shown a funny icon that looks like a bent line. Click anywhere on the canvas to place the imported file. At this point you’ll probably notice that the file is extremely large! Let’s remedy that by first zooming out of our canvas by holding CTRL and pressing the – key. Zoom out until you can see the entire shape of the raster photo we imported. It should be outlined in a blue box, which you can see extending past the canvas. Now go to Modify > Transform > Scale (or CTRL + Q). You’ll see transform handles appear around the image. To ensure that you don’t mess up the proportions of the image, hold down the Shift key and move one of the corner handles in. We want to get the image about as wide as the masthead we made earlier, but don’t worry about perfection here.

We’re now at the point where we need to remove the background from our coffee cup photo. There are many, many different techniques we could use to do this, some more challenging than others. I’ve decided to take us down one of the more challenging paths, but in the event you get stuck I’ve provided a PNG file that lets you skip over the masking.

There are two different techniques we’re going to be covering here: masking, and the Bézier pen tool. We’re going to draw a shape that resembles our coffee cup with the pen tool, then use that shape as a “mask” that will hide the rest of the photo, leaving only the green cup.

If you search for “Bézier Pen Tutorial” on Google, you’ll turn up about 40,000 results. The pen tool works in a very similar fashion amongst all popular vector programs, so feel free to give it a go with any software you have access to. One video tutorial I found on YouTube is a great start, you can see it here.

Bezier Pen Tool DemoOnce you’re ready to begin, save your file, then zoom into 150% (CTRL +) and select the pen tool from the tool panel on the left. I like to start in a sharp corner when I can, so left click once right where the handle of the mug touches the right side of the cup at the top. Now we’ll create the next point by clicking a little further down, right at the apex of the curved handle. When you click this area, hold down the mouse button and then drag the mouse down. You’ll see “direction handles” sprouting out of the point you just created, with one of them following your mouse south. You’ll notice that the line that connects your first point to the second is changing. Try moving the mouse to the left and right – notice how the curve changes to reflect the direction you’re moving towards? How far you pull the direction handle also affects the shape of the curve as well. Let go of the mouse button to lock in the line. If you simply click to make a new point without dragging, you’ll get a hard corner with no curve. If the previous point you created was a curve, and you want the next line segment to be straight, simply left click the last point you made with the pen to convert it.

Go ahead and play around with the pen tool until you get a little more comfortable with its use. Remember CTRL Z is every graphic artist’s best friend! If you stray too far from the cup shape we’re tracing, feel free to start over. You can also adjust curves and the location of points with the white pointer. You can even make adjustments on a pixel by pixel level by selecting a certain point and moving it with the arrow keys on the keyboard.

Once you’re more comfortable with the pen tool, continue tracing around the cup until you’ve worked your way back to the first point you placed. You’ll know that you’re about to create a closed vector shape because the pointer will change to a little circle icon.

There’s a lot more to the Bézier pen tool than what we’ve discussed here, and in the future I’ll be expanding on its use. In the mean time learn it the way I did, by practicing! If you’d like to come back to the pen tool later, simply download this tutorial post-pen tool here (right-click, save-as).

Vector MaskMoving on, you should have an ugly outline around our coffee cup photo. Make sure the vector line work you made is selected (use the black pointer if it’s not) and then swap the stroke for the fill using the “Swap Stroke/Fill Colors” button which is located directly under the fill color in the tools panel. You should now have a solid vector shape placed directly on top of the cup in our photo.

Now we can bring this all together with one final step. Select the photo beneath the cup vector we drew with the black pointer. Now cut the photo using Edit > Cut or CTRL + X. Now, click the cup vector shape, and change the fill property in the bottom left from Solid to None. Now, you should see only a blue vector outline of our cup – without touching anything else, click Edit > Paste Inside.

Presto! We now have a masked coffee cup. Save your work at this stage and we’ll continue on in the next installment. In the mean time try creating additional vector masks. It’s a technique that is used frequently across all types of graphic design.

Bellabean Coffee: Part 4 - Completed

You can download the source PNG file for this tutorial in the state it’s shown above here (right-click, save-as). In the next post we’ll actually work that coffee cup into our design, and I’ll show you how to edit raster images, covert vector images into rasters, and much more. It’ll start to look more and more like a website I promise. If anyone has any questions or suggestions, please feel free to leave a comment below! Thanks for your kind words and support so far.

Bellabean Coffee: Part 2, Creating a Masthead with Fireworks

Bellabean MastheadThis is the second part of a series of web design tutorials on Adobe Fireworks. Using a fictional company I’m documenting my design workflow from start to finish. You can follow along by starting at the beginning of the series or by downloading the most recent Fireworks PNG file here. If you’re just starting out, you can download the 30-day full feature Adobe Fireworks demo here (note: A relatively painless account setup is required to download the free demo).

Bellabean Coffee: Part 2 (start from file bellabean_coffee_02.png)

Let’s start out by making sure our guides are turned on by clicking View > Guides and checking show guides. Now is a good time to try out the zoom function in Fireworks. Using the control key combined with either plus + or minus – allows you to zoom. You can also employ the magnifying glass tool by drawing a box around the area you want to zoom into or just left clicking the point at which you want to zoom.

Return your zoom level to 100% using CTRL+1 or CTR:L +/- . Select the square tool from the panel on the left and draw a rectangle on the stage that’s 940 pixels wide (the shape should snap to your guides) and 160 pixels tall. You should now have a box of any given color on top of or at least close to our Bellabean logo. As we discussed previously, you can use the black pointer to move the rectangle and the scale tool (CTRL Q) to resize the rectangle as you see fit.

Now, the power of layers! Make sure you’re looking at the layers panel by pressing F2. You should see the Bellabean logo that we made, and our new rectangle above it. Move the rectangle behind the logo by either selecting it and using CTR:L +/- , or clicking and dragging in the layers panel. With the rectangle selected, change the color by clicking the color chip (fill) towards the bottom in the properties panel and replace the hex value with #EFAC22. With the rectangle still selected, round off the corners by adjusting the (you guessed it!) “Rectangle Roundness” setting to 12.

You should be looking at something like this:

Adobe Fireworks Screenshot showing Bellebean Coffee Design

Now let’s cover one of the most used parts of my particular workflow in Fireworks. With our rounded rectangle selected, make a copy with CTRL C and paste it on top of itself with CTRL V. Set the color of this new round-tangle to any color you want in the pallet, and set the roundness back to 0. Using the arrow keys on your keyboard, you can position any vector image in fireworks on a pixel by pixel basis. Move our new rectangle down until it just covers the bottom of the original yellow one. Using the black pointer, select both rectangles by holding down shift and clicking the 0ther box, or dragging a box around both. Now simply select Modify > Combine Paths > Punch. Now you should have a rectangular shape with rounded corners at the top, and square corners at the bottom.

Let’s adjust the height of this shape now using the white pointer. When you select the white pointer and the click our yellow shape you’ll notice the blue points that make up our vector shape are now hollow. Click the point in the lower right hand corner, it should turn blue while leaving the others hollow. You can now control this point with the arrows on your keyboard, but what if we want to control several? Hold down the shift key and click the bottom left point. Now you can control the height of our vector without disturbing the shape of the rounded corners. With those two bottom points selected simply tap the up arrow on your keyboard until you get the height to 100px (as noted in the property inspector at the bottom of the screen). With room to spare, draw a new rectangle on the canvas right under the original yellow one, measuring 940 by 40 px. Position it so there’s a white gap (about 6 pixels) between the two boxes.

One last tool and we’ll call it a day. With our brand new box selected, choose the eyedropper from the tools panel on the left. Now click any green point in the logo to change the color of the box to our Bellabean green. We’ll get into how nice the eyedropper is later on.

Lets wrap up by saving your file. You should have wound up with something that’s similar to this:

Adobe Fireworks Screenshot showing Bellebean Coffee Design

You can download the source PNG file for this tutorial in the state it’s shown above here. In the next post we’ll look at introducing raster images to the design, so stay tuned. If anyone has any questions or suggestions, please feel free to leave a comment below!