Pencil Coming Soon Page

Before we begin a project, we first draw it up in our notebook. We do all of our creative thinking at this stage so that when we get in front of our trusty Adobe Fireworks, we know exactly what we have to do. From this, a new trend arose where pencil drawn websites are becoming more and more popular. Today I wanted to show you how to use the different border options, fonts and shapes can help us achieve such pencil drawn effect. Here’s a cool pattern we will use in our work. Simply add it to your Patterns directory found at the path below and reload Fireworks.
[code]C:UsersUSERNAMEAppDataRoamingAdobeFireworks CS6Patterns[/code]

Step 1: Let’s start with a 1200 x 550px canvas with white background.

Step 2: In the layers panel, let’s create some folders that we will use. It should look something like this:

Step 2: Create a square to fill the entire space and set our pattern from our properties panel. If you’re not sure where the patterns option is located in CS6, see this image. We can also lock this

Step 3: Now that we have something that looks like a sketch pad, let’s start our work. Select the rectangle tool and create a shape that is 950 x 200px. Set the background to solid #FFFFFF and opacity to 75%. After centering the rectangle, we can lock this layer so that it doesn’t get in our way.

Step 4: Once done, we can work on our pencil lines. For this tutorial, we are going to use using overflowing border. Since Fireworks has no such option, we just have to create custom borders using our Line Tool. With the line tool selected, create a line that is 245 x 1px. Snap that to the left end of our white rectangle.

Step 5: To give the line a little bit of a pencil drawn effect, we must take advantage of the options form our properties panel. From the Stroke Category select Crayon >> Basic, set the color to #999999 and set the border location to center. Since our thickness is only 1px, nothing will show up. Don’t worry, we will just have to play a little with the advanced option and our border will look as sexy as ever.

Step 6: By pressing Edit Stroke in our properties panel, we can quickly bring up the Advanced Options for our border. Let’s go to shape tab and check the little checkbox next to Square. We can also set the tips to 2 in the options tab.

Step 7: Since we don’t want to keep doing this continuously for every border, we are going to be saving our custom stroke. We can do this by clicking that little plus icon next to the Edit Stroke button. You can name it what ever you like, we named it “Pencil Drawing.” Remember that this custom stroke is just for this document and will not show up in any other files or windows you have open.

Step 8: Now that the hard work on the border is done, we can create the other 3 overflowing borders. Create a line using our Line Tool. From the Stroke Category go to Crayon >> Pencil Drawing (or whatever you named it). Now you should have something like this:

Step 9: We can now add some text. I used a font called Throw My Hands Up in the Air to write a basic coming soon message.

Step 10: Using the same exact technique as above, create several buttons for your social places. I set my rectangular box size to be 130 x 26px and surrounded it with some overflowing borders. Remember to add these to the layer folder we created before called “Social.” Here’s what I have after adding the boxes and some texts.

Step 11: Now we can add in our logo. You can either copy your vector logo and add borders using the technique above or if you have a bitmap image, we can make it look like it was sketched in. First we make our logo transparent. You can use the magic wand or lasso to remove any items surrounding our logo. Once that is done, all we have to do now is play with the properties panel.

Step 12: With our logo selected, click on Add Filters and go to Other >> Find Edges. This does exactly as it says, it finds the edges of our bitmap.

Step 13: Pressing Add Filters again, go to Adjust Color >> Invert. This will invert the color of those edges we just found in the step above.

Step 14: And finally by pressing Add Filters once more, we go to Other >> Convert to alpha. This will now convert all colors to black and white.

Step 15: The above steps will give a little transparency to our logo. This works in our favor and cuts down a step in our work. To make it all fit together, we can now position the logo to a location that will help it shine. Here’s where we positioned it:

You can stop here if you read this tutorial to just get the design portion. But if you want to continue and add make it easier for us to export as a website, let us continue to the next segment. For this segment, we are going to take advantage of slices and states. States can be one of the most crucial feature for a web designer. The use of states can help us provide hover effects that we see on navigations and other portions of a website.

Step 16: First things first, let’s create some sub-folders for our social layer folder. Create something similar to the image below.

Step 17: Once you have the sub folders created, move the background, border and text for the button to the “Normal” sub-folder. With all of the contents in that folder selected, we are going to Right Click and select Inset Rectangular Slice (ALT+SHIFT+U or CMD+SHIFT+U).

Step 18: Once again with all the contents in the normal folder selected, we press CTRL+SHIFT+D (mac) or Right Click >> EDIT >> Clone to create a clone of those elements. We are then going to move these cloned items to the “Hover” folder we created earlier.

Step 19: For the hover state, let us make the background of the button change color. So in the “Hover” folder, we are going to simply select the white rectangle and change its color to the respective social site color (Facebook blue, Twitter blue, Dribble orange or Forrst green). Once that is done, we are going to press the little eye next to the “Hover” folder to make all its contents invisible. Repeat steps 16-19 for all your social network buttons.

Step 20: If we hit the preview button above our canvas, we don’t see any hover effect. That is because we have yet to tell the software what change we want. To add the effect, we are going to open up our states panel. If you don’t have this on your sidebar, then go to the Windows menu and check the states option.

With State 1 selected, we are going to right click and select Duplicate State.

Step 21: Now we have a new state! With State 2 selected, click on the layers panel. Since it’s an exact duplicate of State 1, all contents in State 2 are the same. What we are going to do now is click the little eye next to our “Hover” sub-folder to make it visible again. Like so, we are going to make the “Normal” state hide.

Step 22: To make the link between the two states and to tell Fireworks that this is the effect we want for the hover of the button, we are going to open up the Behaviors panel. With our first slice selected, we are going to open up our States Panel and CTRL click the 2 states (this allows us to select both states).

Step 23: With the two states selected, we can now add the behavior. From the Behaviors Panel, click the little plus icon and select Simple Rollover. This will link our two states; thereby giving our buttons a hover effect. If you click on the preview button now and hover over our button, you will see it change color.

You can now add more slices to let Fireworks know how to break down our work and then export it as a web-page. Tut+ created a wonderful video that explains states in more detail. You can view it here.

For this tutorial, we are going to stop here. Our final product should look something like this:

Sazzad

Hey there. I’m Sazzad, a User Experience Developer from New York City. I work with many talented folks who find ways of re-inventing the way users look at the web. I am the founder of the FWPolice and co-founder of Fleech Media. You can follow me on Twitter by the handle @IamShipon1988 .

2 Comments

  • karen says:

    I LOVE YOUR FREEBIES AND YOUR TUTORIAL SECTION … wish you had a tutorial of converting to html from fireworks… im not a designer its just a hobby for me but i just cant get use to photoshop after tasting the simplicity of fireworks…

    • Hi Karen, sorry for the late response. I am working on an article for Smashing Magazine that will cover exactly that. The article will be 3 parts, first is mocking up in Fireworks, then going from the mockup to HTML/CSS and finally integrating it to WordPress. I’m half way done with the first article.

Leave a Reply

Your email address will not be published.