New to Fireworks? While there are many resources that are available to help you learn Fireworks, only a handful are helpful to beginners. To get you up and designing as quickly as possible, here is a list of 10 web design tutorials that will accelerate your skills. These tutorials are different from many other tutorials in that they feature images or videos to guide you through the process instead of explaining everything through text.
1. Designing a Website Template
Your website template is the visual skeleton for your website, making it the foundation or the rest of your site’s design. Media Loot provides a step by step tutorial that walks you through everything form creating a simple logo to designing the rest of the top of the gold design. It also walks you through creating the feature area below the header where many sites display rotating carousels.
Source: https://medialoot.com/blog/how-to-design-a-clean-website-template-adobe-fireworks/
2. Designing for Mobile Devices with Fireworks
With more people using mobile device to browse the Internet, more clients are asking for mobile versions of their sites. Adobe has created a tutorial on how to create movie app. While the focus is on the app, there are many user interface and user experience lessons that can be applied to a website converted to mobile format.
Source: http://www.adobe.com/devnet/archive/fireworks/articles/design_mobile_devices.html
3. Creating a Pattern Library
A pattern library is pretty much a UI design for your website. Having a consistent design is important whether you’re starting a blog or creating an eCommerce site. This tutorial is very helpful because it teaches you what makes for a great pattern library and walks you through the steps of creating a real one in the tutorial.
Source: https://www.smashingmagazine.com/2012/09/create-pattern-library-with-evernote-fireworks/
4. Real Site Creation Case Study
Examples are one thing but a real site is a completely different beast. Abuzeedo walks you through how they created a real site using Fireworks. The core focus on this tutorial is creating the layout and main page which will help many new designers.
Source: http://abduzeedo.com/web-site-design-tutorial-wellknownas-case
5. Create a Classy Portfolio
A portfolio can be a great addition to your website if you’re a professional that wants to display past work on your site. This tutorial walks you through creating a portfolio that can be browsed carousel style. Aside from the portfolio itself, you’ll learn how to design around the portfolio with text and graphical cues.
Source: http://abduzeedo.com/classy-personal-portfolio-fireworks
6. Create a Header Mini-Layout
This tutorial will be helpful if you’re looking to start a blog. It walks you through the process creating a simple header for your blog. Then, it uses vector textures to create a layout that you can use to display the latest posts on your blog.
Source: http://abduzeedo.com/mini-layout-inspired-9rules-design
7. Working with Fireworks for Interaction Design and Prototyping
Creating a new web project whether it’s an app or website requires proper planning. Creating wireframes and going through the prototyping process can help you plan, create and piece together all the various aspects of your project. Here’s a helpful tutorial from Adobe to pull it off with Fireworks.
Source: http://www.adobe.com/devnet/archive/fireworks/articles/atv_fw_interaction_design.html
8. Impress with an Eye Grabbing Header
Your website header makes a big statement about your site. In this tutorial, you’ll learn how to turn a regular header graphic into an outstanding one with some simple edits. The header may look complex in the beginning but in actuality, it can be easily created with using a few of the Firework tools. This tutorial explains everything from playing with brightness, adding various elements with the Fireworks tools, to using different color spectrums.
Source: http://abduzeedo.com/using-graphic-design-inspiration-create-cool-website-header-fireworks
9. Sample Hosting Website Layout
One of the best ways to learn Fireworks is by building real sites. This tutorial walks you through building a website in a common web hosting layout that explains multiple products and lists various features. Like previous tutorials, it goes through every aspect from the header, logo, navigation menu and various content sections.
Source: http://www.blogwebdesigner.com/how-to-create-web-hosting-layout-using-adobe-fireworks-39/
10. Basic Overview of Adobe Fireworks
It can be overwhelming trying to learn how to use a completely new design application. Thankfully, this video is created to help make you more familiar with Fireworks. In the video, the author goes through panels, layers, vector tools, filters, bitmap tools, animations, and more. You’ll get a quick overview of the features and learn how they are used so that you get a basic overview of Fireworks.
Source: https://www.youtube.com/watch?v=68XqG3wOGbk&ab_channel=ImzTech
This small collection will help you get well acquainted with Fireworks in no time. It will help to focus on the tutorials that help you build sample sites in the beginning. That will give you the fundamental knowledge to develop a template and layout for your very own site. Once you get that down, you can start focusing on designing individual elements like headers, images, portfolios and the user interface.
