Welcome to part one of my fictional client project: Bellabean Coffee. This will be a brand new, upstart, fictional coffee shop that’s requesting a brand identity complete with a website. To get things started we’re going to explore some of the vector capabilities of Adobe Fireworks by creating a simple logo for Bellabean, and nailing down a color scheme.
Lets start by opening up the new canvas that we created in the last post (Right-click, save as).
Now lets whip up a quick and simple logo and color scheme. Select the text tool, click the canvas and type out the first part of our client’s name “Bellabean”.
So here comes the first design decision, picking a font. For this particular design I’m grabbing one named “Christopher Hand” from DaFont.com. With the new font installed, select the text we just made with the black pointer from the tools panel, and then change the font to “Christopher Hand”. While you’re at it, set the font size to 200. Now click the small color chip next to the font size, and enter the hex code #5B9D13 into the box and then hit enter on your keyboard to continue.
To finish it off, repeat the process by selecting the font tool, clicking the canvas under our previous word, and typing out “COFFEE” (all caps). Go back to the black pointer and change the font to “Arial Black” (or a similar heavy sans serif font, ie: Helvetica Black, etc). Set the size 40, and the color to black #000000. One last touch to complete the logo: Directly underneath the font name is the kerning setting. Change the value to 100. Now drag the coffee text centered underneath the Bellabean name, and presto – cozy yet corporate coffee brand x.
Since we’re going to be using the logo throughout our design, lets make a symbol out of it. Using our black pointer, drag a box around both Bellebean and COFFE to select them both. Now right click on them, and choose “Convert to Symbol”. You should get a prompt asking your for a name. Type “Bellabean Logo”, leave all of the settings alone, and click “OK”.
Now that we have our logo saved to the library, we can safely do whatever we want to the instance of our logo symbol that’s left on the stage.
Start by picking the scale tool from the panel (or pressing Q on your keyboard), making sure that you have the instance of our logo selected, then shrinking the logo to about 250 px wide using the bottom corner point in the scaling box.
Now just drag the logo to the upper left hand corner of our design, and save your file. Not a bad start for what will hopefully be a great fake coffee website!
If you’d like you can download my version of the file as it is now by clicking here, or continue on to the next step using your own version.
Hello from
