Posts Tagged ‘Tutorials’

We are pleased to present below all posts tagged with ‘Tutorials’.

iOS Prototyping With TAP And Adobe Fireworks (Part 2)

In the previous article in this series, "iOS Prototyping With Adobe Fireworks and TAP, Part 1: Laying the Foundation," I looked in detail at the four major stages that all of our projects at Cooper go through, as well as our approach to Fireworks PNG organization, and the main components of Fireworks (pages, shared layers, symbols and styles).

iOS Prototyping With TAP And Adobe Fireworks (Part 2)

Now we can start actually building the prototype. First, let me try to sum it up quickly: to create a “live” iOS prototype, you only need to perform the following six steps:

Read more...

iOS Prototyping With TAP And Adobe Fireworks (Part 1)

One of the strengths of Adobe Fireworks lies in its ability to produce basic-level prototypes in HTML format for the purpose of sharing concepts, evaluating them and conducting usability tests. But did you know that you can use Fireworks in combination with other tools to create complex iOS prototypes (for both the iPhone and iPad) with similar ease?

iOS Prototyping With TAP And Adobe Fireworks (Part 1)

In this series of three articles, you’ll learn how to use Adobe Fireworks together with another tool, called TAP, to create prototypes with animated transitions.

Read more...

Using The Texture Panel In Adobe Fireworks

When you’re working in Fireworks — be it for a website design, mobile design or graphic asset for a project — one need you will undoubtedly have is support for textures. While Fireworks is an amazing tool in other areas, the usability of the textures feature could definitely be improved. In this article, we’ll look at an extension that does just that — the Texture panel.

Using The Texture Panel In Adobe Fireworks

Currently in Fireworks, you can apply textures (which are pulled from your “Textures” folder) to whatever vector shape you’re working on. Unfortunately, the way Fireworks lists textures isn’t as intuitive (or fast) as it could be.

Read more...

Reviewing Adobe Illustrator’s Extensive Gradients Toolset

While vector based artwork lets designers take advantage of small file sizes and lossless scaling it can also be limiting when trying to add depth and richness to a design. Adobe Illustrator offers a plethora of gradient tools that can help artist produce more organic and vivid pieces.

Tutorial

This extended video tutorial covers a wide variety of topics including basic gradient tools (0:30), the appearance pannel and multiple gradient fill layers (2:30), creating gradients with the blending tool (3:45), gradient strokes (6:30), gradient mesh (7:45), using gradients with type (14:00), wrapping gradients with envelope distort (16:30), and using opacity masks.

Read more...

Creating A Pattern Library With Evernote And Fireworks

A well-functioning pattern library is a beautiful thing. It is a powerful resource that you and your entire team can use to efficiently create consistent user experiences for your website or service. It cuts out repetitive design work, allowing you to focus your energy on creating new user experiences; and it creates a common UI language for your team, reducing communication issues and keeping everyone on the same page.

Creating A Pattern Library With Evernote And Fireworks

But to many designers, creating a pattern library can feel like a daunting academic pursuit, or simply useless overhead documentation. To make matters worse, getting consensus on which technology to use and how to get started is hard. After experimenting with various options, our team has found that using Evernote to house our pattern library of Adobe Fireworks PNG design files has proven to be a winning combination. We’ll outline how you can use Evernote and Fireworks to easily build your own pattern library and reap the benefits mentioned above.

Read more...

Simulating The Letterpress: From Live Filters In Fireworks To CSS Code

One of the visual effects that is a mainstay in my Web design toolkit is the letterpress effect. Used properly, it’s a quick way to make text blend better with the layout, as if it were machine-stamped onto the background. Think of what a home appliance marquee or a professional business card looks (and feels) like, and you’ll know what I’m talking about.

The Letterpress Effect: From Fireworks To CSS

Letterpress is a venerable technique of printing that involves “pressing” a plate of movable type onto a sheet of paper to produce an effect that is impressed (where the text is pressed down onto the paper) or embossed (where the text is raised above the surface of the paper).

Read more...

Interactive Prototypes And Time-Savers With Adobe Fireworks

As interface designers, we’re often required to demonstrate the look and feel (and interactions) of the interfaces we design. We often begin with a series of flat images, and while these may be pixel perfect and show some amazing detail, they lack the context of the user experience.

Interactive Prototypes And Time-Savers With Adobe Fireworks

Without context, it would be difficult for your clients to understand the flow of an app or website in the way you originally planned it. The best way to introduce context is by adding interactivity. By providing an interactive prototype (or interactive mockup), your clients can play around with it to their hearts’ content to get an idea of how the app will work and to test the interactions.

Read more...

↑ Back to top