Designing a Boat Icon in Adobe Fireworks

Adobe Fireworks was developed many years ago, but still offers its users a very useful range of tools when designing UIs (User Interface) and icons. It boasts a wide range of tools that aid any designer or developer in creating a product. However, due to its age and its feature freeze back in 2013, it is slowly becoming unusable on the latest Mac operating systems and is being caught up by other programs that are being developed now-a-days. Many people still use this program however due to its usability and quick and easy UI. Why is why we've explained designing a boat icon in Adobe Fireworks

We decided that we would come up with a small tutorial on how to develop a simple icon of a boat with two sails. There are many other tutorials out there that will show you a more in-depth look at what you can use Fireworks for. But for beginners designing a boat icon in Adobe Fireworks with our quick and simple guide will get your started. And you can use the skills you learn in other projects straight away!

Designing a Boat Icon in Adobe Fireworks

1, Planning your icon

Before anything, you should plan what it is you are going to create. Be it a car, logo or even a building; anything you want to design needs a plan. This will include the size of the icon that you wish to create and also doing some draft drawings. There can sometimes be different ways that a single object can look such as smoke or water. You will need to decide how you would want these to look before continuing onto designing the icon itself.

2, Starting a blank canvas

Now you can start working on designing your icon. You will need a canvas to work on. Create a new blank document and make the canvas wider than you will need. For an icon (depending on how big you want it), it is recommended that you set the canvas size to 1,000 x 1,000 pixels. This way, you have more than enough white space to work with when designing your icon.

3, Drawing out the rectangle hull

The first tool you will need to use is the rectangle tool from the Vector menu. With this, you will need to draw out a rectangle onto the canvas you have just made. Make sure that this is placed where you want the start of your design to go and not took close to any edges otherwise you might run out of space. After inserting this rectangle into the design, use the properties menu at the bottom of Fireworks and change the colour to blue.

4, Skewing the bow and stern

A boat is never just a rectangle. To transform your newly made rectangle, you need to right click on it and select Transform, then Skew. For both sides, you will need to select the lower vectors in each corner and drag them towards the middle until the edges have been brought in to where you want them.

5, Drawing the mast

Another rectangle needs to be drawn, but for this one, it needs to be rounded. Select the Rounded Rectangle tool and draw the mast. This can be however high you wish it to be and will sit above the blue rectangle you drew earlier. Right click on the newly drawn mast and then click Arrange, then Send To Back.

6, Drawing the sail

Depending on your design will determine how many sails you will need to create, but for the sake of this icon, there will be two. The first sail will need to be drawn out using the rectangle tool again. This will need to be placed where you would want your sail to go. In the below image, you can see that the sail has been made to match the height of the mast and the width of the deck below it. Once the rectangle has been added, change its colour to grey. Then by using the Subsection Arrow tool, select the top left corner vector and press delete. This will create a perfect slow from the top right corner to the bottom left.

7, Duplicating and then flipping the other sail

For the second sail, you can either use the same steps as before and generate the new sail on its own or you can use a quick and handy shortcut. By clicking on the pre-existing sail and then holding ALT while dragging it to the right, you will create a copy of it. Obviously, the new sail will be facing the wrong way to begin with. Right click this new copy and select Transform, then Flip Horizontal. The new sail is then be positioned on the other side of the mast.

There you have it. A very simple, but good looking boat icon that can be used for any future developments. This icon could be taken even further by adding the sea beneath the boat and have the sky be filled with a nice blue sky with birds. The possibilities are endless if you can think of the ideas.

As previously mentioned, there are many online tutorials that will aid in furthering your knowledge when using Fireworks, but some of them will require you to have already used or have a general understanding on how Fireworks works.