Adobe FireworksWhat is Fireworks?| 00:00 | Adobe Fireworks is a vector and
bitmap drawing program which allows web and
| | 00:04 | user-experience designers to produce
artwork that is used in a wide variety of
| | 00:09 | web and screen-based projects.
| | 00:11 | Web designers use Fireworks for rapidly
creating scalable artwork using various
| | 00:15 | design and prototyping tools, easily
mocking up layouts with multiple pages and
| | 00:21 | symbols, creating click-through
prototypes of web sites and mobile
| | 00:24 | applications, and slicing, optimizing,
and exporting graphics in numerous
| | 00:29 | web-friendly formats.
| | 00:31 | User-experience designers use Fireworks
for creating wireframes which can then
| | 00:35 | be handed off to designers,
applying behaviors to objects that simulate
| | 00:39 | interactivity, and exporting click-through
prototypes as HTML and CSS for client approval.
| | 00:46 | Fireworks can be used for many types
of screen-based projects, and it allows
| | 00:49 | designers to create flexible
and engaging artwork like this.
| | 00:54 | Fireworks also allows you to import
artwork from various creative suite
| | 00:57 | applications like Photoshop and
Illustrator and then optimize that artwork into
| | 01:01 | formats compatible with Flash,
Dreamweaver, Edge, and other web tools.
| | 01:06 | For designing screen-based graphics,
Fireworks is the designer's tool of choice
| | 01:10 | when it comes to creating pixel-perfect
graphics that can easily be deployed
| | 01:14 | across multiple projects, browsers, and devices.
| | Collapse this transcript |
|
|
IntroductionWelcome| 00:04 | Hey there! This is Ray Villalobos, and welcome
to Fireworks CS6 Essential Training.
| | 00:08 | Fireworks is one of my favorite programs, and
I'm really passionate about the way it works.
| | 00:13 | I love how you can come in from
Photoshop or Illustrator and understand the
| | 00:17 | program immediately, because a lot of
the tools that you use in the wheels chair
| | 00:21 | in Photoshop are exactly the same in Fireworks.
| | 00:23 | I'll start by showing you how to set
up the Fireworks interface and organize
| | 00:27 | your workspace with grids and templates.
| | 00:29 | You can organize web sites in
Fireworks in a number of different ways, with
| | 00:33 | layers, multi-size pages, and
different types of symbols so you can reuse
| | 00:38 | elements and build
interactivity in your mock-ups.
| | 00:40 | You can even preview your pages and
export a wireframe in PDF or as a clickable
| | 00:45 | web site so your clients can quickly
approve or mark-up your prototypes, and you
| | 00:49 | can get the coding quicker.
| | 00:51 | The CSS Properties panel makes
it easier than ever to create
| | 00:54 | cross-platform compatible code for
CSS features like gradients, drop
| | 00:58 | shadows, and rounded edges.
| | 01:00 | Finally, I'll talk about JQueryMobile
Integration, which makes Fireworks the
| | 01:04 | best place to create themes
for jQuery Mobile projects.
| | 01:08 | Fireworks is the type of program that
has a passionate group of followers.
| | 01:12 | Once you try it, you'll probably
wonder why everyone's not using it and
| | 01:15 | what took you so long.
| | 01:17 | So without further ado, it's my pleasure to present
to you, Fireworks CS6 Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library, or if
| | 00:04 | you're watching this tutorial on a DVD-ROM,
you have access to the exercise
| | 00:08 | files used throughout this title.
| | 00:10 | So if you'll open up the Exercise folder.
| | 00:14 | So in some of these folders you'll find
files that I have opened when I begin a movie.
| | 00:18 | In some of the movies you'll
find folders that have a site and a
| | 00:22 | site-finished version.
| | 00:23 | When you see these, drag the site
folder over to the Desktop--I like to hold on
| | 00:28 | the Option key on a Mac to make a copy
of it--open up the site folder, and start
| | 00:33 | working with the files.
| | 00:35 | So this is a Fireworks file you can open.
| | 00:37 | This is an HTML document that you can
just open with your favorite text editor.
| | 00:41 | Once I'm done with the project, I also
have a site-finished folder with all the
| | 00:46 | files once I finish working
with them on that particular movie.
| | 00:51 | In this course I'm using a
text editor called Espresso.
| | 00:54 | I really like Espresso because it has a
very nice live view that allows you to
| | 00:57 | see changes I made in the
code as soon as I type them.
| | 01:00 | You can also use a text editor on the
Mac called TextWrangler, which is an
| | 01:03 | excellent free editor.
| | 01:05 | You can get at this URL or
also in the Apple App store.
| | 01:09 | If you're on a PC, you might also try
Aptana Studio which is an excellent text
| | 01:13 | editor available for Macs and PCs.
| | 01:16 | If you're a monthly member or annual
member of lynda.com, you don't have
| | 01:20 | access to the exercise files, but you can
follow along from scratch with your own assets.
| | 01:25 | So let's get started.
| | Collapse this transcript |
|
|
1. Understanding the InterfaceLearning Fireworks menus and shortcuts| 00:00 | Like any program, Fireworks comes
with a comprehensive set of menus that is
| | 00:04 | organized to help you take advantage of
different features in the application.
| | 00:07 | I wanted to take a second and discuss the
different menus as well as some of the shortcuts.
| | 00:11 | A lot of the menu items available on Fireworks
will be things you've seen in other programs.
| | 00:15 | You have the Standard File and Edit
menus as well as some menus you may have not
| | 00:19 | seen before, like the
Commands and the Filters menu.
| | 00:22 | Out of the different menu options,
you'll probably spend a lot of time in the
| | 00:25 | Window menu turning panels on or off.
| | 00:27 | Of course, when you see a menu with a
triangle next to it, it means that there
| | 00:31 | is a submenu underneath that option.
| | 00:33 | If you see three dots next to a menu,
it means that after selecting that menu
| | 00:36 | option you'll be presented with an
additional dialog box asking you some
| | 00:40 | additional questions about your choice.
| | 00:42 | If you find yourself going to a menu
often, you should take advantage of the
| | 00:46 | keyword shortcuts next
to some of the menu items.
| | 00:49 | So if I want to save this document, I can
hit Command+S on a Mac, or Ctrl+S on a PC.
| | 00:54 | Of course, Fireworks also has a
context-sensitive menu you can access by
| | 00:58 | right-clicking or Ctrl-clicking on a one-button
mouse where you'll usually find
| | 01:02 | the most relevant command
for the task you're performing.
| | 01:05 | So if I right-click on top of this
text, you'll see some of the options
| | 01:08 | available for changing the text styles.
| | 01:11 | Fireworks menus are pretty standard,
but make sure you take the time to check
| | 01:14 | out some of the options and
learn about the shortcuts.
| | 01:17 | And definitely take advantage of the
context-sensitive right-click menu since
| | 01:20 | they will be oftentimes the only menu you need.
| | Collapse this transcript |
| Getting around your document and the Application bar| 00:00 | At the very top of every window,
you can see the Application Bar.
| | 00:04 | This very small piece of real estate
has a couple of important shortcuts you
| | 00:07 | might find interesting.
| | 00:09 | So let's take a look at the Application
Bar, and also learn how to move around
| | 00:12 | documents and customize a workspace.
| | 00:15 | The Application Bar is usually
inside the application frame.
| | 00:18 | If you're on a Mac, remember that you
don't necessarily have to run in this mode.
| | 00:22 | You'll also have the option
of running in standard mode.
| | 00:25 | If we go to the Window menu and select
Use Application Frame, right now it's on.
| | 00:30 | You can turn that off, and you can see
that we can move these windows around
| | 00:33 | independent of each other.
| | 00:35 | But I like the application frame
because I think it makes things a little
| | 00:38 | bit cleaner and easier.
| | 00:39 | So I'm going to go to the Window
menu and select Use Application Frame.
| | 00:43 | Now all of our panels are docked
together into one single window.
| | 00:46 | One of the first things you'll notice in
the Application Bar is a Hand tool, and
| | 00:50 | a Magnifying Glass, as well as a Zoom level.
| | 00:52 | The Hand tool is also in the Toolbar,
but frankly, you'll probably never click
| | 00:57 | on them in the Application Bar.
| | 00:58 | It's much easier to learn the
keyboard shortcuts for the zooming tools.
| | 01:02 | To zoom with Fireworks, hold down the
spacebar and the Command key together,
| | 01:06 | Ctrl+spacebar on a PC, then
click on the workspace to zoom in.
| | 01:11 | When you are in this mode, you can
also zoom in by dragging a selection
| | 01:14 | rectangle around any item.
| | 01:17 | To zoom out, add the Option key or
the Alt key on a PC and click on the
| | 01:22 | workspace to zoom out.
| | 01:24 | To move around a zoomed-in document,
just hold the spacebar down by itself and
| | 01:28 | then click and drag to move around.
| | 01:30 | If you click on the Zoom level on the
Application Bar, you can change the zoom
| | 01:34 | to one of the pre-selected
options from this pop-up menu.
| | 01:38 | These options are also in the
View menu under Magnification.
| | 01:43 | In this pop-up menu, you can also see the
keyword shortcuts which are really handy.
| | 01:46 | You can see that you can hit
Command+1 to get to 100% view.
| | 01:52 | Command+0 will fit as much as possible
within the size of the current window.
| | 01:57 | If you have an element selected,
you can zoom into that object by
| | 02:00 | hitting Command+Opt+0.
| | 02:03 | Command+Plus and Command+Minus will
also let you zoom in and out of documents.
| | 02:08 | On the right-hand side of the
Application Bar, you'll find the Workspace
| | 02:11 | Switcher where you can switch
between different workspace layouts.
| | 02:13 | So let's try some of these out.
| | 02:15 | If we go up here, you can see that
right now we're in Expanded mode.
| | 02:18 | If we click on that and switch to Iconic
mode, you can see that we switched to a
| | 02:22 | much more compressed version of the interface.
| | 02:26 | Here's the Iconic mode With panel Names.
| | 02:28 | I really like to start out in Expanded mode.
| | 02:31 | The way things are arranged in
Fireworks is fully customizable.
| | 02:35 | You can drag and move panels around
to any position and reposition them by
| | 02:41 | moving them around and docking
them into places in the interface.
| | 02:44 | So you can see, there is double blue
border that appears when I drag to this
| | 02:47 | section, and now my Toolbar
has moved into that position.
| | 02:51 | So this is all moving together now.
| | 02:54 | I want to click right here, and
we're back to its original position.
| | 02:58 | Now my panels on the side became undocked,
and I'll just move those over to the side.
| | 03:04 | I can undock these individual tabs and
dock them back into position as well as
| | 03:11 | moving around within their groupings.
| | 03:15 | We can also collapse some of these
panels by clicking on this little icon right
| | 03:19 | here, which will take them to Iconic mode.
| | 03:22 | If your workspace ever gets too messy,
you can use one of these options in the
| | 03:25 | Application Bar to put
things back in main condition.
| | 03:29 | If you find that the way the program is
organized doesn't suit your needs, you
| | 03:32 | can simply save your
favorite layout into this menu.
| | 03:37 | The last thing to the right of the
Application Bar is the Help menu.
| | 03:40 | Now let's do a search for
solutions to problems on Adobe's web site.
| | 03:45 | Just type in a question and hit the
Enter key and the Adobe web site will
| | 03:49 | come up with an answer.
| | 03:51 | Although the Application Bar
duplicates a lot of what is already available in
| | 03:54 | some of the menus, it does put them in a
convenient and easy-to-access location.
| | 03:58 | I also like the way that the Fireworks
interface is fully customizable. It lets
| | 04:03 | you modify it for specific
parts of your workflow.
| | Collapse this transcript |
| Working with panels| 00:00 | Fireworks uses panels to give you
access to common commands and tools.
| | 00:03 | Let's go a little deeper into some of
the panel options and see how we can
| | 00:06 | organize our workflow.
| | 00:08 | Before we talk about the different panels,
go over to the Workspace Switcher and
| | 00:12 | choose Expanded mode.
| | 00:14 | This will reset the interface to make
sure we're looking at the same layout.
| | 00:17 | In this view, Fireworks shows you the
panels you use most often with the application.
| | 00:22 | You can turn the panels on or off by
going to the Window menu and choosing
| | 00:26 | one of these options.
| | 00:27 | There is a large selection of panels
in this area, including some panels that
| | 00:30 | are less commonly used, for example, the
Document Library panel, which is useful
| | 00:34 | when working with symbols.
| | 00:36 | Related panels are organized
together into panel groups.
| | 00:40 | You can switch between these groups
by clicking on each one of these tabs.
| | 00:43 | If you don't like the way panels
are arranged, just move them to a
| | 00:47 | different position.
| | 00:48 | You can move them within the
panel groups, out of the panel groups.
| | 00:54 | Sometimes I like to have my Layers
panel right next to our panel groups so that
| | 00:58 | it's own the panel and it takes up the
whole height of this window right here.
| | 01:03 | Whenever you move around a panel
into a dockable position, a double blue
| | 01:06 | border appears and you can let go of the
mouse and see that panel dock into that position.
| | 01:10 | You can also change the size of panels by
clicking and dragging on the edges of the panels.
| | 01:16 | In some instances, you may want
to see different panels be wider.
| | 01:20 | To the right of each panel group, you'll
see the panel's option pop-up menu that
| | 01:24 | allows you to pick different
options for that panel group.
| | 01:28 | At the very top of the panels, you
might see a double triangle that lets you
| | 01:32 | switch that panel group to an Iconic mode.
| | 01:35 | When you're in this view, the panel
will expand from this icon temporarily.
| | 01:41 | Remember that when you customize your
interface just the way you want it, you
| | 01:45 | can save your workspace with either
the Workspace Viewer or by going to the
| | 01:51 | Window menu, under Workspace Layouts.
| | 01:55 | I really love panels and customizing
often even while working within a project.
| | 02:00 | Adobe understands that everyone likes
to do things in a different way, and I
| | 02:03 | really love the way that you can
adjust everything and make your workspace
| | 02:07 | seem just right for you.
| | 02:09 | Moving things around and saving
workspaces can save you a lot of time while
| | 02:12 | working on different parts of a project.
| | Collapse this transcript |
| Using the Tools panel| 00:00 | Of all the panels available to you,
the Fireworks tool panel is one that you
| | 00:03 | might end up using the most.
| | 00:05 | You'll definitely spend a lot of
time here, so let's take a look.
| | 00:08 | The Toolbar in Fireworks is
organized into six different sections:
| | 00:12 | Select, Bitmap, Vector, Web, Colors
and View, and the tools are grouped by
| | 00:22 | function into those sections.
| | 00:24 | So the Selection tools are for
selecting, resizing, and exporting.
| | 00:28 | The Bitmap and Vector tools are, of
course, for dealing with bitmaps and vectors.
| | 00:33 | The web tools are unique to Fireworks,
and they help you deal with breaking of
| | 00:36 | graphics and setting up
hotspots for online graphics.
| | 00:39 | Under the Colors section, I wanted to point
out the improved Color palette in Fireworks.
| | 00:44 | It has changed
dramatically since the last version.
| | 00:47 | The palette is larger and better
organized, and you now have tools for
| | 00:50 | copying RGB colors as well as switching
between color modes on the Filling Stroke palette.
| | 00:56 | There are now separate controls for
Stroke and Fill Opacity and a few additional
| | 01:00 | options when choosing gradients.
| | 01:05 | Some of the tool positions in the panel
have different versions or options for
| | 01:09 | each tool, and you can switch between them.
| | 01:12 | If you see a triangle underneath the
tool, you can click and hold down the
| | 01:16 | mouse button until you see a Tool pop-up
where you can choose the different
| | 01:19 | versions to the tool.
| | 01:20 | This tool has a Crop tool
and an Export Area tool.
| | 01:26 | If you hover over a tool, you'll
see the tool's keyboard shortcut.
| | 01:29 | The Selection tools have two keyboard shortcuts.
| | 01:31 | You can use the V key or the
0 key to switch to that tool.
| | 01:37 | If a tool is already selected, when
you hit the shortcut you'll get the
| | 01:41 | alternate version of that tool.
| | 01:43 | For example, if I hit the V key
repeatedly, I can switch between the Pointer
| | 01:47 | tool and the Select Behind tool.
| | 01:50 | Learning these shortcuts
will save you some time.
| | 01:53 | I'll be talking about some of the
different tools in other movies, but one spot
| | 01:56 | that's really useful is at the
very bottom of the tool panel.
| | 02:00 | Under the View section, you can see the
icons or switch between different screen modes.
| | 02:04 | Clicking on those will let you switch
from Standard mode to Full Screen with
| | 02:10 | windows to Full Screen mode.
| | 02:15 | More useful is learning the keyboard shortcut.
| | 02:17 | The F key will also let you
switch between these different modes.
| | 02:22 | You can dramatically improve your
workflow by learning how to quickly access
| | 02:26 | some of the tools via their shortcuts.
| | 02:27 | Make sure you spend some time with the
Toolbar and check out some of the new
| | 02:31 | changes to the Color tools.
| | Collapse this transcript |
| Working with the Properties panel| 00:00 | The single place you'll spend most
of your time in with Fireworks is
| | 00:03 | the Properties panel.
| | 00:05 | It's a multi-function context-sensitive panel.
| | 00:08 | It is the Swiss Army Knife of
Fireworks, so let's take a look.
| | 00:11 | If you don't have anything selected, the
Property panel shows the Document options.
| | 00:16 | So right now, you can switch the Canvas
Color, you can change the Canvas Size,
| | 00:23 | and you can modify the
Compression options for this document.
| | 00:28 | When you click on an object in the
workspace, the palette adjusts to show us
| | 00:32 | just the options for that particular object.
| | 00:35 | So you could see when I choose a
vector object, then I can change things like
| | 00:39 | the color of the vector object.
| | 00:40 | I'm choosing a color from right here
and create a gradient by choosing another
| | 00:45 | Gradient tool and picking
a couple of other colors.
| | 00:51 | I can add an outline to this vector
and change the Opacity and maybe the
| | 00:57 | layer mode over here.
| | 01:00 | When you click on a text element, you
can see that most of the sections stay the
| | 01:04 | same, but the second area changes to
show the text options, like Leading,
| | 01:09 | Kerning, the Font Style, and the Weight.
| | 01:17 | And you can switch the Color right here.
| | 01:20 | The Properties palette also changes,
depending on the tools you have selected.
| | 01:23 | I want to go to Select menu and choose
Deselect to make sure nothing is selected.
| | 01:28 | So if you click on these different
tools, you should see some default options
| | 01:32 | for each of the tools I click on down there.
| | 01:34 | So if I click on the Text tool, I can
modify the font in the Properties panel,
| | 01:39 | and that will become the
default font for this document.
| | 01:48 | Looks like I just clicked in the area
outside the workspace, so it wasn't showing.
| | 01:52 | So you could see that now my default font for
this document is Arial Regular at 18 points.
| | 01:59 | In CS6, the Properties panel is
the best way to work with color.
| | 02:03 | There is a Color Swatch area that
allows you to get the color from a Solid to a
| | 02:09 | Gradient to a Pattern in
just a couple of clicks.
| | 02:17 | And right now, it might be hard to see
because I have Color Burn as the mode.
| | 02:20 | But I can just change everything
about a vector object very quickly--and
| | 02:26 | especially color is
super-easy with Fireworks CS6.
| | 02:29 | One last thing you can do with the Properties
panel is collapse it to make it a little smaller.
| | 02:33 | So if I just click on this area with the
double arrows, you can see that it gets
| | 02:36 | to be a little bit smaller.
| | 02:38 | If I click on it again, it becomes just
a little bar, and if I click on it one
| | 02:43 | more time, it goes back to its original size.
| | 02:46 | Most of the time, the Properties
panel is the only panel you'll ever need.
| | 02:49 | I use it a lot in conjunction to
right-clicking on the workspace to see the
| | 02:53 | pop-up menu that appears and
almost never go anywhere else.
| | Collapse this transcript |
|
|
2. Working with FilesOpening documents and setting up the workspace| 00:00 | In Fireworks, you might spend a
lot of time using the tools and the
| | 00:03 | Properties panel, but the workspace is
where you'll do all the work that will
| | 00:07 | show up in your projects.
| | 00:08 | So let's take a look at some
of the options in this area.
| | 00:10 | First time you deal with the workspace
is usually when you're creating a new
| | 00:13 | document, so let's go ahead and do that now.
| | 00:15 | I'm going to go over to
the File menu and select New.
| | 00:18 | And usually, the first thing you do is
type in some values for the Width and
| | 00:22 | Height of the project.
| | 00:23 | So I'm going to type in here 600
pixels wide by 900 pixels tall.
| | 00:27 | You don't usually mess with Resolution
because the standard web resolution is
| | 00:31 | 72 pixels per inch.
| | 00:32 | You don't usually mess with the
measurement systems either. Most the time you're
| | 00:36 | working in pixels when doing things online.
| | 00:39 | Next, you might want to
change your Canvas Color.
| | 00:41 | I like to set my Canvas as Transparent,
but you can also set a custom color by
| | 00:45 | clicking on this and then clicking on
this pop-up panel and choosing one of
| | 00:49 | the colors from here.
| | 00:51 | You can also type in a HEX
value or an RGB color right here.
| | 00:56 | You might also want to look into
this Templates button right here.
| | 00:59 | If you click on that, you can
go to one of these presets that
| | 01:02 | Fireworks provides.
| | 01:03 | So you can go to some of the
most commonly-used templates for
| | 01:08 | different projects.
| | 01:09 | So one of the ones that I like is
this Grid systems template, where you can
| | 01:12 | choose a Grid system with pre-built
grids for different kinds of projects.
| | 01:17 | I'm going to hit Open.
| | 01:18 | So here's a document that has a
bunch of preset grids that I can use to
| | 01:22 | create my web site.
| | 01:23 | So I'm going to go ahead and close that.
| | 01:26 | At the very top left of the Workspace,
you might notice some Preview icons.
| | 01:32 | Well, these Preview icons can take a
look at what the document will look like
| | 01:36 | when it's been compressed by
the current Compression Settings.
| | 01:39 | Sometimes it takes a
minute to refresh the image.
| | 01:43 | It might take a while, especially
if your document is very complex.
| | 01:46 | So if you see the bottom left-hand of
the screen, it's telling you the size
| | 01:50 | of this document is going to be, and then
the speed at which this document will download.
| | 01:55 | You can set the Optimize options in
the Optimize panel so you can switch this
| | 01:59 | from PNG to JPEG and you can mess
around with other settings like Quality.
| | 02:05 | I'd have to wait a little
bit for it to take over.
| | 02:08 | I'm being very dramatic with my quality
here, so probably not something you'll
| | 02:12 | want to do on a real project.
| | 02:14 | You can also use the 2-Up and 4-Up
button to compare compression settings.
| | 02:18 | So this is what the original document
looks like, and on the right-hand side you
| | 02:22 | can see how it is now compressed.
| | 02:24 | At the bottom right of our Workspace,
we also have Animation Controls.
| | 02:28 | If your document has animation, you
can preview the animation by clicking on
| | 02:31 | these different buttons.
| | 02:32 | So you could hit Play, Rewind, or Fast-Forward.
| | 02:35 | If you have animation, you can click on
these buttons to preview and play your animation.
| | 02:39 | And you can also see an additional
area here to control the Zoom Ratio of
| | 02:45 | the current document.
| | 02:47 | But it's always easier
just to use the command keys.
| | 02:50 | Remember that Command+1 will zoom
you to 100% view, Command+0 will fit
| | 02:54 | everything on screen, and some of
the other keys will also work, like
| | 02:58 | Command+2 will go to 200%.
| | 02:59 | Once you've created a document, you
can save it as a template by going to the
| | 03:04 | File menu and selecting Save As Template.
| | 03:08 | The document will be placed in that
Templates menu that we saw earlier and will
| | 03:12 | be accessible anytime you begin a new document.
| | 03:16 | So the Workspace has a few useful
options, and it's a good idea to explore some
| | 03:20 | of the things in there.
| | 03:21 | It's especially a good place to
quickly preview and find out how your
| | 03:25 | compression will affect your document.
| | Collapse this transcript |
| Organizing documents| 00:00 | Opening multiple documents presents a
series of tabs and an opportunity to
| | 00:04 | organize your workspace a bit further.
| | 00:06 | Let's take a look at some of the options for
optimizing how you approach your workspace.
| | 00:10 | If you have multiple documents on
Fireworks, a tab for each document will appear
| | 00:15 | at the top of your workspace.
| | 00:16 | You can switch to the different
documents by clicking on the tabs, and you
| | 00:20 | can reorganize the tabs just by clicking
and dragging them around the workspace area.
| | 00:24 | When you modify a document--so let me
just grab this document and I'm just
| | 00:28 | going to take this and scoot it over--
you'll see that a little star appears to
| | 00:32 | the left of the document--shows that this
document has been modified and needs to be saved.
| | 00:37 | I haven't changed this one, so you
could see that there is no star next to it.
| | 00:40 | You can drag a Document tab to
the right of the original document.
| | 00:43 | So if I grab this tab and I scoot it
over to this part right here, you could see
| | 00:48 | two documents side by side.
| | 00:50 | This is the original mockup
version of this document right here.
| | 00:53 | So you can compare how the
mockup looks with the final document.
| | 00:58 | You can also copy elements from one of
these documents to the other document
| | 01:02 | just by clicking and dragging them around.
| | 01:04 | Just click this rectangle and move it over.
You can see that it just copied over.
| | 01:09 | I can do the same from this document
and move that object right here, just by
| | 01:13 | clicking and dragging.
| | 01:14 | So it's really nice that I'll be able to
have documents side by side, especially
| | 01:18 | when you're working on maybe a
different version of a document or a wireframe,
| | 01:23 | bringing it into another document
that's going to be the final project.
| | 01:26 | So I'm going to go ahead and reset my Workspace.
| | 01:28 | I'll drag this tab over next to this tab,
and they'll be on two separate tabs.
| | 01:36 | One of my favorite things to do when
setting up my workspace is to open a new
| | 01:40 | window for an existing document.
| | 01:42 | I'm going to go to the Window
menu and select Duplicate Window.
| | 01:45 | This creates a separate version of my document.
| | 01:48 | I'm going to drag it out just by
clicking and dragging on the tab.
| | 01:51 | I can place this on a separate window.
| | 01:55 | And I'm going to go ahead and
put this view right here at 100%.
| | 01:59 | I'll hit Command+1 just to get to 100%
view, and I'll go ahead and tag it to
| | 02:06 | the right of this document.
| | 02:07 | So now I have two versions
of the exact same document.
| | 02:10 | And what happens when you do this is
that if you zoom in to one of these
| | 02:13 | documents and you make some changes
to the documents, it will affect the
| | 02:17 | other document as well.
| | 02:18 | So you could see that as I make changes
to the zoomed-in version of my document,
| | 02:23 | those changes will also affect
the full-size view of my document.
| | 02:27 | So it's a really good way of getting
an idea of what my document is going to
| | 02:31 | look like, even when I'm zoomed in.
| | 02:36 | You can also use this with the second
document set to Preview, so you could see
| | 02:40 | how the graphic will look
like after it has been optimized.
| | 02:43 | Unfortunately, though, this is a bit slow.
| | 02:47 | So even when I move this graphic over,
my preview will update in the other
| | 02:51 | window after a little bit.
| | 02:52 | But it's a good idea if you're trying
to optimize a graphic and you want to see
| | 02:55 | how it's going to appear when previewed.
| | 02:58 | Working with tabs and new document
windows offers a couple of dynamic workflows
| | 03:03 | that really help when working on sites.
| | Collapse this transcript |
| Importing graphics| 00:00 | If you're more familiar with other
members of the Adobe CS Suite, or if you're
| | 00:04 | working with people who draw in other
applications, you might need to import
| | 00:08 | graphics into Fireworks.
| | 00:10 | It does a really great job of
bringing things in from other Adobe products.
| | 00:13 | So let's check it out.
| | 00:15 | If you're working with Adobe Illustrator,
the easiest way to import graphics is
| | 00:19 | to just have both programs open and
Copy and Paste between the programs.
| | 00:22 | So I'm going to select everything
from this document and just go to the
| | 00:27 | Edit menu and select Copy and then switch
back to Fireworks and just paste the graphic.
| | 00:34 | You can see that everything came in pretty well.
| | 00:37 | Let's take out the layers palette.
| | 00:43 | And you can see that
everything came in as different paths.
| | 00:47 | The document kept its look pretty
consistently across the different programs.
| | 00:52 | So most of the time when I'm working
with Fireworks, I'll often just copy and
| | 00:55 | paste between programs.
| | 00:57 | If you do the same thing from Photoshop,
it works pretty well, but the objects
| | 01:00 | will come in as bitmaps.
| | 01:01 | Let me go into Photoshop CS6, and you
see that I have this graphic right here.
| | 01:05 | That's an iPhone that I want on my project.
| | 01:08 | And if I click on any of the layers, I
can select that layer by going to the
| | 01:12 | Select menu and choosing Select All.
| | 01:16 | And then I can go to the Edit menu and
select Copy Merged, and I'm going to go
| | 01:20 | back into Fireworks.
| | 01:21 | I'm going to paste that.
| | 01:23 | And it does a pretty good job
of bringing the graphics in.
| | 01:26 | However, it doesn't do a good
job of importing the transparency.
| | 01:30 | If you need to import transparency,
there's a couple of ways you can do it.
| | 01:33 | You can save this document under
Save for Web and then save this as a
| | 01:38 | PNG-24 with Transparency.
| | 01:41 | That will maintain the transparency
when you save it from Adobe Photoshop.
| | 01:46 | Or you could just import the PSD
graphic directly into the program.
| | 01:49 | So I'm going to go back in to Fireworks,
and we can import a file by either dragging
| | 01:54 | and dropping it from the Desktop, or by just
going to the File menu and selecting Import.
| | 01:58 | So I'm going to go into my Desktop and
look for my exercise files and find the
| | 02:03 | Exercise folder for this movie.
| | 02:05 | And I'm going to click on
iPhone.psd and then click on Open.
| | 02:10 | Now, here we have some options as well.
| | 02:12 | Here you can choose whether you want
to maintain editability over appearance.
| | 02:16 | In that case, it will try to keep all
the layers separate, but sometimes it will
| | 02:19 | merge things together or convert them
into bitmaps as it feels like it needs to.
| | 02:24 | Or you can choose to maintain
Photoshop layer appearance or some of these
| | 02:29 | setting, so you can flatten
everything to a single image.
| | 02:31 | You should still keep the Transparency but
just bring everything as one single thing.
| | 02:35 | So I'm going to say OK.
| | 02:39 | And once you click on OK, you'll have
the option of placing this document.
| | 02:43 | This is actually pretty cool because
you can drag your stuff and select your
| | 02:45 | rectangle, and you can actually
place the document within that selection.
| | 02:50 | And as you can see, it brought in the
transparency from Photoshop and even
| | 02:55 | brought in every one of the
layers as a separate element, so that's
| | 02:58 | actually pretty cool.
| | 02:59 | You can see the iPhone layer came in,
and that layer was even logged in
| | 03:03 | Photoshop, so it even
brought that in automatically.
| | 03:07 | So there's this little part that has
a little bit of a shine on the edge.
| | 03:11 | And here is the part that you would
want to replace to put in your own
| | 03:14 | interface right there.
| | 03:16 | You can do the same thing with
Illustrator files and you also have some control
| | 03:19 | as to how they come in.
| | 03:20 | So if you go to File > Import, and I'm
going to import the same graphic, that is
| | 03:24 | the buildings graphic.
| | 03:26 | You can get a little more picky
about how that graphic is imported.
| | 03:29 | So you can ask it to remember the
layers or just ignore all the layers together
| | 03:33 | or bring all the layers in a space, which
might help with animation. So I click OK.
| | 03:39 | And again, the nice thing about this is
something that doesn't happen when you
| | 03:41 | drag and drop a document
or when you copy and paste.
| | 03:44 | When you import, you have this option
of dragging and selecting the area that
| | 03:48 | this is going to be placed into.
| | 03:50 | So it resizes the document to
that area, which is kind of nice.
| | 03:54 | Firework's importing options
are just a dream come true.
| | 03:57 | It really does an amazing job of bringing
things in, especially from other Adobe products.
| | 04:02 | My favorite way to import is usually
just to copy and paste, but occasionally,
| | 04:06 | you'll want to do more complex importing.
| | 04:09 | I especially like the feature of
clicking and dragging an area, especially when
| | 04:13 | you're bringing really big images where
you want the images to be resized into
| | 04:17 | a specific position.
| | 04:18 | Fireworks really gives you a lot of leeway
in how you bring things into the program.
| | Collapse this transcript |
| Saving and exporting files| 00:00 | Saving files in Fireworks is a pretty
common task, and you'll do that often
| | 00:04 | enough, but where Fireworks
really excels is in exporting graphics.
| | 00:08 | So let's go over saving files and take
a look at some of the Export options.
| | 00:12 | Saving files is done from the File menu.
| | 00:13 | You have the option here to save
the file as a template as well, which
| | 00:18 | means that when somebody opens up this file,
they'll open it up as an untitled document.
| | 00:23 | They can also select New From Template,
and it will appear in this folder which
| | 00:27 | has other Presets for useful
beginning points for your projects.
| | 00:32 | When you go to the File menu and
select Save As, you can save in the default
| | 00:36 | Fireworks format or choose from
this list of other formats to save in.
| | 00:41 | When you select something other
than the default Fireworks PNG format,
| | 00:45 | the Options button will light up,
allowing you to check a few options for
| | 00:49 | that particular format.
| | 00:50 | The Fireworks PNG format
is not a regular PNG file.
| | 00:54 | It has all the information about
layers, settings, and other document info.
| | 00:58 | You don't ever want to use a Fireworks
PNG and upload it to a web server for use
| | 01:03 | in a web page because it won't be compressed.
| | 01:06 | Because of this, Fireworks tries
to rename all original files with an
| | 01:11 | extension called .fw.png.
| | 01:13 | You can turn this off in this panel right here.
| | 01:17 | But I think you should definitely leave that on.
| | 01:19 | It will make life easier for you,
especially when you're trying to tell
| | 01:22 | the difference between an original
Fireworks document and your compressed PNG graphics.
| | 01:28 | You can also choose Export from the File menu.
| | 01:32 | And you have a lot of
different options here as well.
| | 01:34 | Fireworks is designed to help you export
web graphics, so these are really important.
| | 01:38 | Usually, you'll be exporting images
only, but you can choose to Export HTML
| | 01:43 | so that the graphic can appear on a page,
slices if they're pressed and in the document.
| | 01:47 | It's actually going to hit
that pop-up when you do that.
| | 01:50 | And select just the current
page or all pages together.
| | 01:55 | You can also click on this check
box to put images in a subfolder.
| | 01:59 | That way you can add an images
folder to this particular web page that
| | 02:03 | it's going to create.
| | 02:04 | The HTML or CSS Fireworks generate,
there's probably nothing you'd want to use
| | 02:09 | in a production environment, but
it's actually quite useful for creating
| | 02:11 | mock-ups for web sites.
| | 02:13 | I want to choose the Option here to
Export Slices, and I'm going to select make
| | 02:18 | sure that All Pages are selected.
| | 02:20 | I'm going to go to my Desktop, and
I'm going to save this project to the
| | 02:22 | Desktop, so I'm going to hit Export there.
| | 02:24 | Let's wait a few minutes.
| | 02:26 | And once it's done, we should get
a series of pages on our Desktop.
| | 02:32 | So I'm going to right-click on this
file and select Open With Safari, and you
| | 02:37 | can see that this looks like a normal web page.
| | 02:40 | And because I have built some
slices with interactivity, I can see my
| | 02:43 | roll-overs, and I can click on this to
get to The Artists page and click on some
| | 02:49 | other sections to see
those other sections as well.
| | 02:52 | So although the code that it's going to
generate is not particularly useful for
| | 02:55 | that production environment, it's
definitely something that you can use to show
| | 02:58 | your clients how the
project is going to look like.
| | 03:01 | One of the new features in Fireworks
is the ability to Export CSS Sprites.
| | 03:05 | So that's also one of the options right here.
| | 03:07 | You can go to CSS Sprites and
control how your sprites are going to be
| | 03:11 | exported and saved.
| | 03:12 | Sprites are single graphics that give
you the ability to speed up how your site
| | 03:16 | works by limiting the amount of HTTP
requests that get made to your server by
| | 03:21 | combining a series of
graphics into a single element.
| | 03:24 | We'll cover this in another movie.
| | 03:26 | If you choose to export images,
Fireworks will save the file with whatever
| | 03:30 | settings that you have on your Optimize panel.
| | 03:33 | So here's the Optimize panel and these
pages will be saved as PNG32 files or
| | 03:37 | the graphics that are in those pages are also
going to be saved in this PNG32 file format.
| | 03:42 | So I can switch that by choosing one of
these options here or just clicking on
| | 03:46 | this and switching to one of these
other settings so that I can go to JPG here
| | 03:49 | and control my JPG settings if I want to.
| | 03:51 | And then all the graphics will take
on whatever is in the Optimize panel.
| | 03:55 | I'm going to leave it as PNG32 because
that's the best default to use for web graphics.
| | 04:02 | Fireworks has always done a great
job of providing a myriad of expert
| | 04:05 | options for your projects.
| | 04:06 | I really like the way that I can
preview my prototypes by letting it write
| | 04:10 | some of the HTML for me.
| | 04:12 | And although I would never use that
HTML in the production environment, it's a
| | 04:15 | great way to test interactivity.
| | Collapse this transcript |
| Optimizing and previewing graphics| 00:00 | Although connection speeds have
risen dramatically in the last few years,
| | 00:03 | optimizing graphics is still really important.
| | 00:06 | Much of a web site's speed is tied
directly to the amount of graphics on a web page.
| | 00:11 | So minimizing your graphics has a
dramatic effect on your site speed.
| | 00:15 | The Optimize panel in Fireworks
handles most of your compression.
| | 00:19 | In addition to having a pop-up with
common defaults, you can also choose a
| | 00:23 | specific format and just choose
some of the sub-options from these
| | 00:26 | different pop-up menus.
| | 00:27 | One the web, the primary
graphic formats are PNG, JPG, and GIF.
| | 00:33 | Although Fireworks lets
you save in other formats.
| | 00:35 | You'll almost always want to
work in one of these three.
| | 00:38 | Each one of these formats has
different advantages and disadvantages.
| | 00:42 | GIF is by far the oldest graphics
format and was created by a company
| | 00:45 | called CompuServe in 1987.
| | 00:48 | Unfortunately, the graphic format is
limited to only a total of 256 colors.
| | 00:52 | If I go over here at the Preview button,
you can see that because it only
| | 00:56 | has 256 colors, our gradients aren't
particularly smooth.
| | 01:00 | Because it has so few colors, GIF
will actually generate very small files,
| | 01:05 | but because of the gradient problems, it's
not really a good format to use for the web.
| | 01:09 | Unlike any other format, GIF files
can also be animated, so you'll see that
| | 01:14 | there's an option here for Animated GIF.
| | 01:17 | So it can be one way of building simple
animations, especially for devices that
| | 01:20 | don't support Flash.
| | 01:22 | GIF files often work best for graphics
with just a few colors, but it's not a
| | 01:26 | good format to use when
you need to compress photos.
| | 01:29 | To do that, we usually use
a graphic format called JPG.
| | 01:32 | JPG is a lossy graphic format, which
means that as part of the way that the
| | 01:36 | files are compressed, JPG actually
changes the information in the original files
| | 01:42 | in order to organize them in a
way that creates smaller files.
| | 01:45 | So I'm going to go over to a photo
here and switch the quality of this
| | 01:49 | compression of this image to
something really small, so you could see some
| | 01:52 | of what JPG is doing.
| | 01:54 | Let me go ahead and
click on this Preview button.
| | 01:57 | So you could see what JPG is doing,
it's actually compressing the image by
| | 02:02 | changing some of the information in the image.
| | 02:05 | And as you could see, this
does create very tiny files.
| | 02:07 | This file is now 34.45K in size, and
if I take it to 100% quality, you'll see
| | 02:15 | that it's much bigger.
| | 02:16 | So the more I reduce my quality setting,
the better compression I'll get but the
| | 02:20 | more JPG will change the
original and make it look worse.
| | 02:24 | The JPG format works really
well for photographic data.
| | 02:26 | Let's take a look at what would
happen if I try to save this as a GIF.
| | 02:30 | Because of the limited amount of
colors, you get to see a lot of banding,
| | 02:33 | especially in the gradients of this photo.
| | 02:35 | So this is definitely not a good format for GIF.
| | 02:38 | It's much better for JPG as long as you
stay with a good enough quality setting.
| | 02:42 | So even at 64%, the photo looks pretty good.
| | 02:45 | You could see maybe a
little patterning over here.
| | 02:48 | Because of the patterning, JPG is not
particularly good at saving images that
| | 02:53 | have a few colors or saving images with text.
| | 02:56 | So one of the options that you can use
for improving quality, especially when
| | 03:00 | you have text in your JPG is by
selecting this Enable selective quality option.
| | 03:06 | You can try to make it select areas
around text, and it will do a better job,
| | 03:10 | but it's still not a great format if
you have a lot of textual or graphic
| | 03:15 | information. 'Til finally, the PNG
format was created as a result of licensing
| | 03:19 | issues with the GIF format.
| | 03:21 | Thankfully, the result was a much more
flexible and reliable format where it
| | 03:25 | just supports a total of 256 colors
or what we call an 8-bit color palette.
| | 03:31 | PNG supports up to 32 bits per Pixel
with 8 bits reserved for transparency.
| | 03:36 | It gives you a magnificent range of
colors with very smooth gradients.
| | 03:40 | So you can see when I switch to the
PNG format, our photo looks really nice.
| | 03:44 | It looks as good as a JPG.
| | 03:46 | However, it won't compress as well as a JPEG
with the PNG format because it is a lossless format.
| | 03:52 | PNGs cannot be animated, unlike GIFs,
and although compression with PNG is much
| | 03:58 | better than GIFs because it doesn't
offer that lossy compression, it's never
| | 04:02 | going to be as good as
JPG when compressing photos.
| | 04:05 | So graphics that this would be really
good will be something like this, an image
| | 04:09 | that has soft transparency.
| | 04:11 | You could see that there's a little bit of
a drop shadow with this graphic right here.
| | 04:15 | So GIF is not going to do a good job
even if we do a single Alpha Transparency.
| | 04:20 | And hit the Preview button here so
you could see the transparency in GIF.
| | 04:24 | It's not going to give you the soft edge,
especially in this wide area right here.
| | 04:28 | If I go to PNG32, you could see that this
image will blend really well into backgrounds.
| | 04:35 | So PNG should really be your format
of choice for most web graphics, unless
| | 04:39 | you're using photos.
| | 04:41 | You can limit the amount of colors in
the PNG as well, and so let's switch this
| | 04:45 | to a PNG8 mode, which will
give you a little bit of banding.
| | 04:48 | But sometimes when you don't have a
lot of colors in the image--if this was
| | 04:52 | maybe a logo with not a lot of colors--
you can switch the amount of colors that
| | 04:57 | the PNG saves with and have as good
compression or better as a GIF file.
| | 05:03 | In addition to using the Preview tab to
see how compression affects your images,
| | 05:06 | you can use the Image
Preview option under the File menu.
| | 05:10 | Here you can change to the
different graphic formats and set all of the
| | 05:17 | different compression settings
that you can't do in the Optimize panel.
| | 05:21 | There's one more Exporting
option you should know about.
| | 05:24 | If you're working on a specific part
of an image and you need to do a quick
| | 05:28 | export, you can go to this Crop
tool and select the Export Area tool.
| | 05:32 | From there, you can drag yourself a
little rectangle with an area of an image
| | 05:37 | you want to export and double-click
to see this image preview.
| | 05:41 | And from here you can export just that
image and choose different file formats.
| | 05:45 | Maybe my image went
somewhere. Sorry about that.
| | 05:48 | So my image has moved out a little bit.
| | 05:50 | So you could switch over here to get
different graphic formats and then select
| | 05:54 | Export, and export only that
particular part of the graphic.
| | 05:59 | So here we choose Images Only and
select Export to export this to our Desktop.
| | 06:04 | Learning to compress graphics can have
a dramatic effect on the size of your
| | 06:07 | pages, and Fireworks definitely excels
at providing a lot of options for both
| | 06:12 | optimizing and exporting graphics.
| | Collapse this transcript |
|
|
3. Drawing with FireworksSetting up rulers, guides, and grids| 00:00 | Grids and Guides are an essential
tool in every designer's arsenal.
| | 00:04 | Most of the stuff we do have to follow
some sort of structure, and Fireworks has
| | 00:08 | some outstanding tools to help
you use and create Guides and Grids.
| | 00:12 | So let's check those out.
| | 00:12 | So in the Properties palette, you'll
see that every time we click on an object
| | 00:16 | in Fireworks, you can see that at the
very bottom to the left-hand side of the
| | 00:20 | Properties panel, you can see the X and
Y position of this object as well as the
| | 00:25 | Width and Height, which are pretty useful.
| | 00:27 | A lot of times, though, you can
really help yourself out by turning on the
| | 00:30 | Rulers, which are found in
the View menu under Rulers.
| | 00:33 | So I'm going to turn that on.
| | 00:34 | You could see that we can see vertical
and a horizontal little tick marks on the
| | 00:39 | Rulers that help us figure out our position.
| | 00:41 | So you could see I'm putting my mouse
right next to him up there and over here
| | 00:44 | on the left-hand side.
| | 00:46 | So that's kind of useful, but to make
it even more useful you may want to go to
| | 00:49 | the View menu and turn on tool
tips, if it's not on already.
| | 00:53 | What that does is as you grab and move
a document, you can see right underneath
| | 00:58 | your pointer little X and Y position marker.
| | 01:01 | So if I don't have that on,
let me go ahead and turn that on.
| | 01:03 | It's probably not on by default, so
now you can't see that information right
| | 01:07 | underneath my pointer.
| | 01:09 | So I find tool tips even more
useful than the ruler tick marks.
| | 01:13 | I turn those back on again.
| | 01:14 | If I go over here, and I draw an
object, you can see that line drawn on the
| | 01:18 | object, but I can also see the
width and height of that object.
| | 01:21 | So tool tips make the rulers even more useful.
| | 01:25 | You can change the origin of the
rulers by clicking on the corner where they
| | 01:28 | meet, right here and dragging
this marker up to a certain point.
| | 01:32 | So you can move them, say, to this position.
| | 01:35 | This position becomes a new zero, zero point.
| | 01:37 | You can see the ruler
starts at zero right here now.
| | 01:40 | And it is zero over here.
| | 01:41 | So everything is now
related to that original position.
| | 01:45 | Now you could see that my X position
for this element is at -1, so I can reset
| | 01:51 | it by going to one here
and maybe move it up to 21.
| | 01:56 | So when you reset the rulers, that
can be very useful when you're creating
| | 02:00 | position element with CSS.
| | 02:02 | A lot of times, you create position
elements relative to other elements.
| | 02:06 | So by resetting your rulers, you can more
easily create those position CSS elements.
| | 02:12 | To reset the rulers back to their
default origin, just double-click on
| | 02:15 | this origin point right here, and that will
make the rulers be at their original position.
| | 02:20 | The rulers can also help you
position horizontal and vertical guides.
| | 02:24 | To create those, we just click and drag
these blue lines from the ruler and we
| | 02:28 | can just drop them anywhere on the work area.
| | 02:31 | Notice how the tool tips are
actually telling us the X and Y position of
| | 02:35 | this when we drop them.
| | 02:36 | And this nice because objects will
snap to this guides as you draw them.
| | 02:40 | As you could see when I'm drawing this
rectangle, if I get close to the guides
| | 02:43 | it kind of snaps to that position,
and that can be really useful when
| | 02:46 | positioning objects or moving them around.
| | 02:49 | You can reposition a guide by
clicking on it with a Selection tool.
| | 02:52 | So I'll switch this selection
tool and set it close to the guide.
| | 02:56 | When I do that, you can see that the
pointer switches to this up and down
| | 02:59 | pointer with some horizontal lines.
| | 03:00 | And if I click on this guide, I
can move it up or move it down.
| | 03:04 | And this is kind of a cool tip too.
| | 03:06 | You can position a couple of guides and
if you hold down the Shift key, notice
| | 03:09 | that you'll get this really interesting
tidbit of information that tells you the
| | 03:13 | distance between the guides.
| | 03:14 | And that can be useful when you're
trying to position some guides at a specific
| | 03:17 | distance from each other.
| | 03:18 | So just holding down the Shift key
will give you this additional information.
| | 03:22 | To delete a guide, just move it back to
the ruler or away from the screen, so I
| | 03:25 | can just click on this and
kind of move it up into the ruler.
| | 03:28 | And I'll get rid of that guide and pull
that up to the left there and that gets
| | 03:33 | rid of all the guides.
| | 03:34 | If I also double-click on a guide, so
let me grab another guide and put it back
| | 03:37 | in there, and notice if I hold the
Shift key while I'm dragging the guide,
| | 03:41 | you'll also get those tips that give
you the distances right there that is
| | 03:45 | really useful for positioning them.
| | 03:47 | So I can also double-click on these
guides and then position them numerically.
| | 03:51 | I'm really picky about
exactly where I want them.
| | 03:56 | If you go to the View menu, you
can choose to Lock Your Guides.
| | 04:00 | By locking the guides you will no
longer be able to click and drag them around
| | 04:03 | the layout and there are some
other options in there as well.
| | 04:06 | You can also turn off Snapping to Guides.
| | 04:09 | Sometimes while you're drawing the
guides will kind of get on the way, so you
| | 04:12 | can turn off the snapping so you can
more accurately place objects by just
| | 04:16 | selecting this option right here.
| | 04:18 | And finally, you can choose to Clear All
Guides to get rid of all the guides at once.
| | 04:22 | Sometimes Guides can be a little annoying,
so clearing them will just let you be
| | 04:26 | able to work on the document
without any kind of snapping.
| | 04:29 | Now, there's also the option of turning on
something called Smart Guides right here.
| | 04:34 | Smart Guides are Automatic Guides that
get created as you move towards objects.
| | 04:38 | So let's see if I can grab this
Rectangle tool and then start drawing something.
| | 04:42 | You'll notice that as soon as I get
close to an object, it tries to give me a
| | 04:46 | temporary pink guide that
aligns to those objects.
| | 04:50 | That can be really useful when
drawing, but can sometimes be annoying.
| | 04:53 | So you can control how those work by
going to the View menu and selecting Smart
| | 04:57 | Guides, so you can choose
to Show them or Snap to them.
| | 05:01 | So you can make them visible by using to
Show or Hide the smart guides, so I can
| | 05:04 | get rid of that and no longer have
those guides telling me, although, they're
| | 05:08 | still snapping, the objects
are still snapping to each other.
| | 05:11 | And then go to the View menu and go to Smart
Guides and choose to turn off the Smart Guides.
| | 05:15 | And what that will do is it will
prevent objects to snapping to those Smart
| | 05:19 | Guides that get automatically created.
| | 05:21 | I'd like to have the Smart Guides on.
| | 05:23 | Sometimes when I'm drawing they can
be a little annoying, so I may turn
| | 05:26 | them off temporarily.
| | 05:27 | So really, all these things
sometimes become annoying.
| | 05:30 | So I'll turn them on and off
depending on what I'm doing in the project.
| | 05:35 | You might want to learn some of the
command keys here, especially for hiding the
| | 05:38 | guides because when you're working
quickly on things, you might find that
| | 05:43 | usually just turn things on and off temporarily.
| | 05:48 | So I create myself some guides and I
want to just hide them temporarily,
| | 05:51 | I can hit Command+; or Ctrl+;
| | 05:54 | on a PC, and just be able to see what
my layout looks like without any guides
| | 05:58 | and then just turn them back
on by hitting Cmd+; or Ctrl+;
| | 06:01 | on a PC.
| | 06:03 | So any of those shortcut tips might
help you become a little bit quicker and
| | 06:07 | more efficient when drawing things.
| | 06:09 | So turning on and off those things can be
really useful, especially with the command keys.
| | 06:14 | One note about Guides, they are
specific to pages, so if you want to use the
| | 06:18 | same guides across a series of pages,
you'll need to set up a master page which
| | 06:22 | you can do from the page's pop-up menu.
| | 06:24 | So if you go to pages I want to set, I do
have a master page on this particular layout.
| | 06:29 | If you want to set Grids that affect
all your pages, then turn them on, on the
| | 06:33 | master page, and then they
will appear in other layouts.
| | 06:36 | I'll talk more about layouts on
master pages in another movie.
| | 06:39 | Once you have a nice Grid system setup,
you might want to save your pages as a
| | 06:43 | template or go on a special folder.
| | 06:45 | So just remember you can go to the
File menu and select Save As Template.
| | 06:48 | And you can look at some of
these templates right here.
| | 06:51 | There's all ready some grid systems, but
if you're going to be creating a layout
| | 06:54 | that you are going to use often, you
may want to create your own setup with the
| | 06:58 | Guides and Grids that you want, and
save them as a template so that you can
| | 07:01 | reuse them on other projects.
| | 07:03 | So you could see that Fireworks gives
you a lot of options for creating Grids,
| | 07:07 | Guides, and playing around with your rulers.
| | 07:09 | If you're a designer, you're really
going to enjoy using some of these.
| | 07:12 | You'll definitely be quicker if
you learn some of the shortcuts.
| | Collapse this transcript |
| Drawing lines and shapes| 00:00 | Whether you're creating mock-ups, real
art work, or prototypes, you'll spend a
| | 00:04 | lot of time with the Vector Drawing tools.
| | 00:06 | So let's take a look at how we can
draw simple objects with Adobe Fireworks.
| | 00:09 | So I'm going to go to the File menu
and create a New file and just pick
| | 00:13 | dimensions for this particular scene.
| | 00:14 | So I'll make it 500 Pixels
by 500 Pixels and hit OK.
| | 00:21 | And then I can start drawing
with these different drawing tools.
| | 00:23 | Now, the simplest one of the drawing tools
is going to be this Line tool right here.
| | 00:26 | If I click on that then I can just click and
drag a line into my canvas or my workspace.
| | 00:32 | You could see that whenever I draw an
object or anything in Fireworks, the
| | 00:35 | Properties panel adjusts so that I
can see the options for that object.
| | 00:39 | You can see that I can change the Width of the
line here by just clicking and dragging this.
| | 00:44 | Change the styling for the line by choosing
from a selection of predefined settings.
| | 00:49 | So I can go to some very funky
Calligraphy style lines here or choose
| | 00:55 | something like some Crayon.
| | 00:57 | And that didn't seem to do very much.
Let's try switching to another color.
| | 01:02 | And maybe you could see the
edges being a little rough.
| | 01:05 | Go back to Soft Line.
| | 01:07 | We can also change how soft the edge is,
and add a little bit of texture to our line.
| | 01:16 | If I'm drawing something like a
rectangle, I'll click on this Rectangle tool,
| | 01:20 | and I'll click and drag around here.
| | 01:22 | If I choose a rectangle, I can choose
whether the line is inside the stroke,
| | 01:26 | outside of the stroke or in the
center of the stroke by clicking on these
| | 01:29 | little icons right here.
| | 01:30 | You can also switch the roundness of a
rectangle by clicking on this Roundness
| | 01:34 | section moving that slider up and your
rectangles will be a little more rounded.
| | 01:40 | Anytime you draw with any tool in
Fireworks, if you hold down the Shift key
| | 01:44 | you're going to draw only perfect shapes.
| | 01:46 | So if I do that with the Rectangle
tool, I'll be drawing perfect squares.
| | 01:50 | If I switch over to the Ellipse tool, it
will be perfect circles as opposed to ovals.
| | 01:56 | So if I hold on the Shift key now and
I move my mouse, you'll see that it's
| | 01:59 | only perfect circles.
| | 02:00 | Fireworks also has a super rich library
of shapes that you can use for drawings,
| | 02:04 | and let me go ahead and get rid of this.
| | 02:06 | So go to Select menu and choose Select All.
| | 02:08 | This is really one of the shortcuts
that you will want to learn, Cmd+A or Ctrl+A
| | 02:13 | on a PC will let you select all the objects.
| | 02:15 | So instead of me going to Select >
Select All, just hit Command+A on this Mac.
| | 02:20 | You can use Ctrl+A on a PC, and then I can
hit the Delete key to delete the objects.
| | 02:24 | So you could see, that there's a lot of
other shapes right here that you can use.
| | 02:28 | So, for example, we have this arrow
shape and if I click and drag, I'll draw an
| | 02:31 | arrow and every one of these shapes has
a lot of these different control points.
| | 02:36 | So if I click on this and drag this,
you'll see that I'll pull this extra
| | 02:39 | piece of the arrow out, and I can
control the thickness of the shapes like
| | 02:43 | this with this control point.
| | 02:46 | And some of these other things will let
me control the roundness, for example,
| | 02:49 | of this shape, the width and height
of where this arrow is going to be.
| | 02:54 | So any of these different smart
objects here will have a lot of options.
| | 02:58 | So let's do a Doughnut now.
| | 02:59 | And again, I'll do Command+A
and Delete to delete that shape.
| | 03:03 | And I'll draw this Doughnut
and I have a few control points.
| | 03:06 | Another thing that you want to know
about is when you're drawing an object and
| | 03:09 | you want to adjust one of these points,
if you hold on the Command key or the
| | 03:12 | Ctrl on a PC, you'll
temporarily switch to a Pointer tool.
| | 03:15 | Instead of having to go to the Tools
palette here, and then click on this to
| | 03:20 | adjust, I can just, with any drawing
tool, hold down Command key and get to a
| | 03:25 | Pointer tool really quickly.
| | 03:27 | And that lets me adjust these points.
And I'll hit Delete key to get rid of that.
| | 03:32 | Again, go back to the rectangle.
| | 03:34 | I want to show that normally you draw
from top-left to bottom-right, but if
| | 03:39 | while you're drawing you hold on the Option
or the Alt key, you can draw from the center.
| | 03:44 | So if I click again, you'll see that I'm
drawing from the center, not the top left.
| | 03:49 | If while you're drawing, you change
your mind about the position of the object,
| | 03:52 | you can hold down the spacebar and
you can move the object around and then
| | 03:56 | continue to draw by letting the spacebar go.
| | 04:00 | One option you have with rectangles is the
ability to modify the roundness of the objects.
| | 04:04 | If I click on here and drag that in,
you'll see that my rectangle has round edges.
| | 04:11 | The cool thing is as I resize the
object, it will still maintain a
| | 04:15 | proportional roundness.
| | 04:18 | Another really useful
shape is the Polygon Shape.
| | 04:21 | So let me go ahead and get that.
| | 04:23 | This Polygon Shape right here allows
you to draw any kind of polygon, so I'll
| | 04:26 | come over here and draw myself, this
object then I can control different points
| | 04:31 | like the scaling here.
| | 04:32 | I could see that I can add
additional sections or remove sections from
| | 04:36 | this drawing like this.
| | 04:38 | This is getting messy, so let me
Command+A and hit Delete and do this again.
| | 04:42 | So polygon, control the amount of
sections on this polygon, go over here and
| | 04:48 | split this up in to
something that looks like an arrow.
| | 04:52 | And a related tool is the Star tool down here.
| | 04:55 | If I click and drag on that, you'll
see I get a star and I can control the
| | 04:59 | roundness of the edges with this
pointer, right there and the radius of the
| | 05:04 | inside and the outside of the star.
| | 05:06 | And let me make my line a little smaller there.
| | 05:10 | I'll take off this texture.
| | 05:13 | And you can add and delete points
by dragging this up and down there.
| | 05:18 | And that lets you create some star bursts.
| | 05:20 | So you really see they have a
lot of adjustment tools here.
| | 05:24 | And I'll get this thing a fill and
maybe get rid of this line altogether.
| | 05:28 | So I'll go here and I'll choose
Nothing, it gets rid of the actual outline.
| | 05:34 | And I get a nice little star
burst that I can mess around with.
| | 05:37 | So there it is in Auto Shapes
Properties under the Window menu.
| | 05:40 | If you go to Window and you go to Auto
Shapes, you could see that you actually
| | 05:44 | have more Auto Shapes than are in this
particular pop-up menu. You have 3D boxes.
| | 05:49 | The way to use this is drag any of
these shapes over to the workspace, and then
| | 05:54 | you still have all these
control points that you can use.
| | 05:56 | Let me go ahead and give these thing an
outline because you can really see these
| | 05:58 | better with a little outline.
| | 06:02 | And try Pointer tool here and you
could see the shape a little bit better
| | 06:08 | when I turn it around. You
were seeing it from the front.
| | 06:11 | So just rotate it, and then you can adjust
some of these points by moving them around.
| | 06:18 | I'm going to try this one.
| | 06:20 | It looks like it's just
drawing a perfect cube there.
| | 06:26 | Let's try this one.
| | 06:32 | This one actually lets you adjust the
Offset here so that's a little more useful.
| | 06:39 | These couple of ones are really going to
look good when you have an outline,
| | 06:42 | so just make sure you do that.
| | 06:43 | So at least I have to drag from here,
and drag that around, here's the Offset,
| | 06:48 | you can see perspective, so you
can make one of these sides bigger.
| | 06:54 | So take a look at those, those are
quite useful, occasionally, I would say.
| | 06:59 | You don't always have to draw a tube,
but if you've got to draw a tube, check
| | 07:03 | out the Auto Shapes they're really cool.
| | 07:07 | So you could see that drawing shapes
is pretty straightforward, and Fireworks
| | 07:11 | does give you an amazing
array of drawing options.
| | 07:13 | Don't just go by this
particular tool panel here.
| | 07:16 | Take a look at some of these Auto
Shapes because they can be quite useful when
| | 07:19 | you need certain things.
| | 07:21 | There's all kind of elements there and
there is even ways of adding things to
| | 07:24 | this particular Auto Shapes menu.
| | 07:26 | We'll talk about that when we talk
about Extensions in another movie.
| | Collapse this transcript |
| Selecting and grouping objects| 00:00 | Although you'll seldom think about it
once you've learned them, you'll be doing
| | 00:03 | an awful lot of selecting and
duplicating elements in Fireworks.
| | 00:06 | So let's take a look at a couple
of ways that tools can help you.
| | 00:09 | Fireworks' default pointer is
for making regular selections.
| | 00:11 | So that is this tool right here which
you can access by hitting the V key or the
| | 00:15 | 0 key whenever you're in another tool.
| | 00:17 | If we click on an object, we can
select it, and if we click and drag on the
| | 00:22 | object, we could move it around our workspace.
| | 00:24 | If you want to add to that selection, you can
hold on the Shift key and click on another object.
| | 00:30 | This set of windows is grouped as an
individual object here and I can move
| | 00:33 | that building around.
| | 00:34 | You can also drag a selection rectangle
and any part of an object that I move on
| | 00:39 | top of will automatically be selected.
| | 00:42 | Even though it looks like I just
chose that building, it actually moved the
| | 00:45 | group of buildings in the background,
as well as this background here because
| | 00:49 | part of my selection included those objects.
| | 00:52 | So I can deselect this background by holding
down the Shift key and clicking on the background.
| | 00:56 | And I just have the building group
in the background, as well as this
| | 01:00 | particular building here.
| | 01:01 | So I'm going to hold on the Shift key
and click on that to select just that one
| | 01:05 | building, and then I can move it around.
| | 01:08 | There's also some selection
commands under the Select menu.
| | 01:11 | So I can go to Select and choose Select
All to choose everything or go to Select
| | 01:15 | and select Deselect to choose nothing.
| | 01:19 | Those can be useful sometimes, so
make sure you learn the command keys.
| | 01:23 | Now, a lot of these other selection
tools really belong to Bitmap Selection
| | 01:27 | tools, so we'll talk about that
whenever we get to the section on bitmaps.
| | 01:30 | If you've got a selection going, you
can hide the edges of the selection
| | 01:34 | by going to the View menu and
selecting Edges so you can turn the edges of
| | 01:39 | that selection off.
| | 01:41 | The item is still selected and you can
move it around, but the edges are hidden.
| | 01:45 | That could be a little confusing
sometimes if you're making selections and the
| | 01:49 | objects that you've selected are hidden.
| | 01:51 | So I've Shift-clicked on a few items
here and I can move them around, but I
| | 01:54 | can't see my selection handles.
| | 01:56 | Sometimes that's useful because a lot
of times you're drawing things, you're
| | 01:59 | selecting things, and it's kind of
confusing where the edges of those things that
| | 02:02 | you've selected are so you might want to
turn that on or off depending on if you
| | 02:06 | want to see those edges or not.
| | 02:08 | Most of the time, I keep them on unless
the edges of the items become annoying.
| | 02:12 | And I turn those off, so that looks
pretty good there, and just Shift-click to
| | 02:16 | grab all those buildings
right there and move them around.
| | 02:19 | There's also another tool for making
sub-selections which is right here.
| | 02:22 | So if I click on that tool, then I can
click on the individual points of any
| | 02:26 | one of these drawings.
| | 02:27 | So if I click and then click on this
point, then I can choose that point and
| | 02:31 | drag that point around so I can make
this have a much taller sort of antenna.
| | 02:37 | And let's switch back to the Ellipse
tool, so if I draw an ellipse and I
| | 02:43 | choose the sub-selection tool, then I
can click on these individual points and
| | 02:47 | move them around and I can also click on these
handles to reshape that particular element.
| | 02:52 | Now, if I do that with the Rectangle
tool, it's not going to allow me to
| | 02:58 | reshape this object.
| | 02:59 | It's actually going to give me an error.
| | 03:00 | This is what it says, "To edit
this rectangle it has to be ungrouped."
| | 03:04 | Rectangles by default are grouped
elements, much like these buildings in the
| | 03:08 | background and that's because with
rectangles, one of the things that we could
| | 03:12 | do is change the roundness of the
rectangle, which gives us these handles.
| | 03:16 | If we try to, again, edit that
object with the sub-selection tool, it's
| | 03:20 | not going to let me.
| | 03:21 | The reason for that is that it wants to
keep this roundness parameter adjustable
| | 03:26 | even when I reshape this rectangle.
| | 03:28 | So if I reshape the rectangle, I
want to make sure that my edges for that
| | 03:32 | rectangle are going to be
proportional and consistent with what the
| | 03:36 | roundness setting is.
| | 03:37 | So if I want to edit that
rectangle, I need to first ungroup it.
| | 03:41 | So to ungroup an element, you could
just right-click and select Ungroup.
| | 03:45 | It's also available through one of the menus.
| | 03:48 | So it's under Modify.
| | 03:49 | So Command+G or Ctrl+G on a PC
groups, Command+Shift+G un-groups.
| | 03:55 | That's really mostly the way that I do
things other than right-clicking in this program.
| | 03:59 | I want to click on this rectangle
that it has rounded edges and hit
| | 04:02 | Command+Shift+G, Ctrl+Shift+G on a PC.
| | 04:06 | And then I can grab the points with
this particular tool here and move that in,
| | 04:11 | move the individual points around.
| | 04:13 | So sub-selection allows you to choose
sub-selections of a shape where this
| | 04:19 | Regular Pointer tool just
chooses the entire shape.
| | 04:21 | There's also an additional
tool that is not visible.
| | 04:24 | If you click and hold down the pointer
on the Selection tool, you can choose
| | 04:27 | the Select Behind tool.
| | 04:29 | If I click on that, I'll be able to
select items behind other items just by
| | 04:34 | clicking through them.
| | 04:35 | So the first time I click on top of this
particular building, it chose the building.
| | 04:40 | The next time I clicked, it chose the
building that's behind it or the group of
| | 04:43 | buildings behind it.
| | 04:45 | Those buildings are all grouped together.
| | 04:47 | And if I click on it again,
it'll choose the background.
| | 04:50 | This is actually quite
useful when making selections.
| | 04:53 | Sometimes you'll have objects on top of
objects, and you're really not interested
| | 04:56 | in the object you're clicking on, but
you're interested on the object behind.
| | 04:59 | So sometimes it can be hard to get to.
| | 05:02 | This one is particularly easy.
| | 05:03 | You just click on it right there, but if
you're in this tool then you could just
| | 05:06 | go through the backgrounds and the
forecasts by clicking through them, and that
| | 05:10 | can be quite useful, so even doing
things like selecting has a rich set of
| | 05:14 | options in Fireworks.
| | 05:15 | If you want to be really efficient
though, you really need to learn some of the
| | 05:18 | shortcuts like Command+A and Command+G
so that you can select everything,
| | 05:22 | deselect everything or
group and ungroup objects.
| | Collapse this transcript |
| Applying fills| 00:00 | Once you have an object, your next step is
usually to style it with a Fill or a Stroke.
| | 00:04 | In this movie we're going
to take a look at Fills.
| | 00:07 | We can apply Fills from either the
Tools panel, which is right here, or from
| | 00:10 | the Properties panel, which is down here,
so we have to have an object selected
| | 00:14 | in order to see that.
| | 00:15 | Most of the times you'll probably use
the Properties panel. Sometimes it's just
| | 00:18 | really depends on which is the closest to your
mouse position at the time, so really pretty similar.
| | 00:23 | So you can see that Fireworks has a nice
set of swatches that are very large and
| | 00:27 | organized chromatically.
| | 00:28 | You can set an Opacity also directly
from the Fill here, so we can change
| | 00:33 | that to maybe, say 20%.
| | 00:35 | And now you could see maybe some of those
background a little bit through the object.
| | 00:39 | So if I move this around, it's very
actually weak, so maybe make it a little
| | 00:44 | more Opaque here, so 80%.
| | 00:46 | You can see some of the objects
through this particular object.
| | 00:48 | And also, you can also set an
Opacity for the entire object here.
| | 00:52 | In Fireworks, you can set an opacity
for every element that you have selected.
| | 00:56 | You can also set an Opacity for the
Fill of the element and a separate
| | 01:00 | Opacity for the Stroke.
| | 01:01 | So just be careful with your opacities,
because this is sort of an opacity, on
| | 01:05 | top of the opacity that you already have.
| | 01:07 | Let me switch that back to 100%
for right now. Move this back.
| | 01:13 | Switch it back to 100%.
| | 01:16 | You can also see that we can copy or
modify the values for a color based on
| | 01:20 | this Hexadecimal or RGB box right here.
| | 01:23 | So if I put in a value there--so
let's put 55 for this--that color changes.
| | 01:28 | If I click on this, I can actually copy
this value and then paste it into a CSS
| | 01:33 | layout that I'm doing for an HTML page.
| | 01:36 | So if I paste this, you can see that it's
giving me the RGB value. Let me zoom out.
| | 01:42 | I want to go right here and actually
change my Opacity back to 50%, and then
| | 01:47 | come back here and copy the RGB value.
| | 01:50 | And I'm going to paste it.
| | 01:52 | If I choose Opacity, I'm actually going to get
an RGBA value so that's kind of useful for CSS.
| | 01:58 | Fireworks has a lot of
neat CSS features like that.
| | 02:01 | Now you also have a lot of options down
here from going to different types of Fills.
| | 02:06 | So if I click on this object, I can make
it have no Fill whatsoever, by clicking
| | 02:10 | on this button, or I can very
quickly go to the Solid Fill and choose a
| | 02:14 | completely different color or click on
the Gradient Fill and then click on a
| | 02:18 | couple of swatches here for Gradients
and apply that Gradient to that object.
| | 02:23 | You can see that that is just a
really quick way to access colors.
| | 02:26 | I can even click and select the
Pattern Fill here and select from one of the
| | 02:30 | preset patterns in this particular pop-up menu.
| | 02:33 | So we'll go back to just a plain color.
| | 02:37 | And let's see. Something closer to
the original. Kind of like that maybe.
| | 02:42 | Let's take a look at some of
the options for the Gradient Fill.
| | 02:44 | So I'm going to go to Gradient Fill.
| | 02:45 | You could see that I could
choose--I have a swatch right here.
| | 02:49 | I can also choose the Opacity of that
swatch right there by clicking on that
| | 02:52 | and moving to a different Opacity setting,
and hopefully you could see how that
| | 02:57 | affects the object.
| | 02:58 | That color is actually partially
showing some of the background, so let me go
| | 03:02 | back to that dialog box.
| | 03:04 | You can see that I can also change the
direction of the Gradient by typing in
| | 03:08 | a new direction here.
| | 03:10 | You may have to move this
thing, this pointer around.
| | 03:12 | So once you change the direction, you'll probably
want to move this origin pointer around
| | 03:16 | so you could see how that Gradient
gets reapplied to that position.
| | 03:19 | So go back into this Gradient Fill here.
| | 03:23 | If you click on one of these elements,
you can barely see this, but there is a
| | 03:27 | very soft blue outline to
this particular Gradient.
| | 03:30 | That just tells me that this is
the Gradient that I have selected.
| | 03:33 | So you can move that Gradient to the right or
to the left to have it affect more of the shape.
| | 03:39 | So I'll move it back over here.
| | 03:41 | You can also use this pop-up menu right here.
It's a little pop-up object to move this around.
| | 03:46 | If you want to do it numerically, you
can also type it right there, and we can
| | 03:52 | hit Enter to apply that change to the gradient.
| | 03:55 | On the toolbar next of the Eyedropper
tool, you can also click on the Paint
| | 03:58 | Bucket tool or the Gradient tool.
| | 04:00 | The Gradient tool will bring these
handles that you can just use and drag around
| | 04:04 | to change the direction and strength of
your gradient and kind of the position
| | 04:09 | just by dragging around the
beginning and ending points of the gradient.
| | 04:13 | You can control the edge of the fill,
so let me switch back to the pointer tool
| | 04:16 | here and I'll just switch to a plain color.
| | 04:20 | So say switch back, and actually
notice that when I click on this tool, I
| | 04:26 | have an eyedropper.
| | 04:27 | If I move that eyedropper anywhere in
the background, I can choose a color
| | 04:32 | from that background.
| | 04:33 | So I'm going to reset that
building's color to the color of one of these
| | 04:35 | buildings by clicking right here.
| | 04:37 | That moves it back to what it used to be.
| | 04:39 | So there's a lot of other options right here.
| | 04:42 | One of the options is
changing the edge of the Fills.
| | 04:44 | So I can change this Fill from an antialias,
which means it's the soft fill
| | 04:48 | around the edges to a feathered fill,
and that will give me a much softer
| | 04:53 | edge on this building.
| | 04:55 | So if I deselect, you could
see that the edge is really soft.
| | 04:57 | So I can control that by moving this
up and down and make it a really, really
| | 05:02 | soft-feathered edge or just a very hard edge.
| | 05:05 | If I move it all the way to 0,
eventually, it will become antialiased there.
| | 05:09 | This is what it used to be at the beginning.
| | 05:12 | If you don't want it to have some of
these edges that happened, you can just go
| | 05:14 | to a Hard Fill and that way, the
shape will always be totally hard.
| | 05:18 | So if I click on this, switch it to Hard,
then you're not going to notice that
| | 05:23 | little transition between the Pixels,
until it's always going to be a hard,
| | 05:27 | which might be kind of useful for this
kind of shape, if you don't want to have
| | 05:30 | some of those edges on the artwork.
| | 05:32 | You can also a add Texture to any item,
so I'm going to click on this building
| | 05:36 | and add a Texture by changing this
percentage, which is at the beginning 0, to
| | 05:41 | something really strong like 85%.
| | 05:45 | And I'll change some of these Textures here.
| | 05:47 | See that is a really aggressive Texture.
| | 05:50 | I can Soften it by just changing the strength
of the texture and I'll make it almost nothing.
| | 05:57 | So you can barely see it
kind of in the background.
| | 05:59 | It adds a little bit of
a pattern to my gradient.
| | 06:01 | I can also choose to make some of that
background transparent, so I'll turn that on.
| | 06:05 | You can see that it's even a little
bit weaker, so I'll make it stronger.
| | 06:09 | Some of the pattern becomes a
little bit transparent when you do that.
| | 06:12 | So let's try some of these other ones.
| | 06:13 | So these are really cool,
actually, for web layouts.
| | 06:20 | There's a couple of additional
panels that can help you with color.
| | 06:23 | If you go to the Window menu,
you can turn on the Swatches panel.
| | 06:27 | And this is actually a little bit
of a panel group, so you could see
| | 06:30 | swatches are right here.
| | 06:32 | There's another one called Color palette,
and that one allows you to mix colors
| | 06:36 | in a number of different ways.
| | 06:38 | There's also the Related, kind of
Related styles which we'll cover later.
| | 06:41 | So let's go back to swatches.
| | 06:43 | You could see that I have another sort of
well of colors that I can pick through here.
| | 06:47 | And if I have a custom color that I've
made, maybe by typing in some Hexadecimal
| | 06:51 | values here, then I can actually add
that color to my swatches just by clicking
| | 06:55 | on the Swatches palette, somewhere where
it's empty and that will add that color
| | 06:59 | to my swatches so that I can
then use that color somewhere else.
| | 07:02 | So if I want to make this building that
color, then I just go to that swatch in
| | 07:06 | the Swatches panel and pick that.
| | 07:08 | You can also go to the Color
palette tool and create a mix of colors.
| | 07:13 | I think I probably like the
one called Blender the best.
| | 07:16 | You can choose two colors.
| | 07:18 | So let's pick that one.
| | 07:20 | We'll pick something else here like a
blue and actually let me pick it from here.
| | 07:24 | And from here, we'll pick up another one.
| | 07:28 | And Fireworks will try to blend this
color for you and give you additional
| | 07:31 | options that are in between those colors.
| | 07:34 | So I'll pick one of these options here
and my background color becomes whatever
| | 07:38 | I have and this is kind of
a neat way of mixing colors.
| | 07:40 | There's a lot of things you can
kind of play around within here.
| | 07:43 | So here, you have a selection of
color swatches, and it's showing you the
| | 07:47 | different levels of strength
for each one of those swatches.
| | 07:50 | You can pick some of these colors
from here, or you can pick them just by
| | 07:53 | dragging this around and some of these
other points in and out of the strength here.
| | 07:58 | So you can go to the selector and that
just gives you more straightforward way
| | 08:03 | of selecting colors either by Hue,
Lightness, Saturation, Hue/Saturation values,
| | 08:08 | CMYK, so all kinds of color modes.
| | 08:10 | If you want any color that is not
available in one of the swatches, this would
| | 08:13 | be a great place to pick them.
| | 08:15 | So sometimes it's really convenient
to choose colors by any color mode that
| | 08:19 | you're more comfortable with, like
the HLS or the HSB or CMYK or RGB.
| | 08:25 | If you want to be really granular about
your color picks, those are very, very
| | 08:28 | specific ways of picking colors.
| | 08:31 | So, one of my favorite Fireworks tips
is that you can actually copy and paste
| | 08:35 | styles from one object to another.
| | 08:37 | So if you have an object selected--
I'm going to go ahead and make this have
| | 08:40 | no stroke, and I want to make another
object of the same color--actually, let
| | 08:45 | me make it harder by creating a
gradient here, something that looks
| | 08:48 | dramatically different.
| | 08:50 | So let's say that I want to use that
same gradient on this building, because
| | 08:53 | it's such a fabulous gradient, I could
go over here and try to simulate what
| | 08:58 | I've done on this particular shape.
| | 09:00 | But it's easier to just go to the Edit menu
and select Copy and then click on anything else.
| | 09:05 | Go to the Edit menu again
and select Paste Attributes.
| | 09:08 | I haven't memorized this particular
command key, just because it's so gnarly,
| | 09:11 | Command+Shift+Option+V, which you know,
you have to have like six fingers or
| | 09:15 | something to do that.
| | 09:16 | So I just usually go to the Edit menu
and select Paste Attributes, and that'll
| | 09:20 | copy and paste not the object, but
the styles from one object to the other.
| | 09:26 | So Fills are a great way to add a
lot of character to your objects.
| | 09:29 | I love the Fill options in Fireworks.
| | 09:30 | It really gives you just a lot of
different ways of picking colors and I'm
| | 09:34 | glad for this particular tip that lets you copy
and paste styles from one object to another.
| | Collapse this transcript |
| Styling strokes| 00:00 | Strokes are another important
part of creating artwork.
| | 00:02 | And if you thought Fills had a lot of
options, Strokes have about just as many
| | 00:06 | options in Fireworks.
| | 00:08 | I really like the way the program
keeps them available, but not show all the
| | 00:12 | options in one place.
| | 00:13 | So let's take a look at how that works.
| | 00:15 | So I'm going to choose an
object here, one of these buildings.
| | 00:18 | You can modify the stroke in either
the Tools palette, you have some options
| | 00:22 | here as to where you want your stroke.
| | 00:23 | However, most of the time you're going
to be using the Properties panel anyways.
| | 00:27 | So first I'm going to just give this
thing a thicker stroke with a different
| | 00:31 | color, so we could see it.
| | 00:33 | And you could see that one of the
options that we probably want to adjust is
| | 00:36 | whether we want the Stroke to
be Outside or Inside our object.
| | 00:41 | Actually I can put the
Stroke Inside the object here.
| | 00:44 | Let me go ahead and make it a little
less wide there, or I can put it in the
| | 00:48 | center of the stroke.
| | 00:49 | I could do the same
things on this Tools palette.
| | 00:52 | Those tools are available right here.
| | 00:53 | I can go to No Stroke, Stroke Inside, in
the Center or Outside, and I can also do
| | 01:00 | my colors right here,
including typing in RGB colors.
| | 01:04 | Just as with the Fill tool, if I move
my mouse position outside this panel, I
| | 01:09 | can choose a color from the background.
| | 01:12 | Right now, you can't see anything,
because it's the same color as the object, so
| | 01:14 | let me go ahead and color this object
something else, and a lot of times you can
| | 01:19 | get to them right here.
| | 01:20 | Now Strokes also have separate Opacity
settings, so you can set the opacity for
| | 01:25 | the Stroke separate from the Fill.
| | 01:27 | See that I have a very weak stroke right here.
| | 01:30 | And let me go ahead and move that back.
| | 01:33 | So right now it's at 20,
I'll move it back to 100%.
| | 01:38 | And Opacity has a
setting for the overall object.
| | 01:42 | So if I set an Opacity for my Stroke
here, say I'll set the Opacity to 50%,
| | 01:48 | you can see that the opacity for the whole
object is still 100%, so I can control that here.
| | 01:53 | And now this opacity will be on top
of the opacity already on the object.
| | 01:58 | So just watch that, you set the
opacity where you want it, so let me move
| | 02:03 | that back, back to 100.
| | 02:08 | So in addition to modifying the width
of the object as well as the position of
| | 02:11 | the Stroke, you can also control the edge.
| | 02:14 | And there's this pop-up menu right here
with a bunch of Presets so that you can
| | 02:18 | go to different kinds of Strokes.
| | 02:21 | And there are a lot of options here, so
you can go to Oil, Spatters, and get a
| | 02:28 | lot of different effects by controlling these.
| | 02:30 | So let me go back to just
the plain basic soft line.
| | 02:34 | And then here you can control the edge,
how soft the edge is, so whether you
| | 02:37 | want it to be really hard or really soft.
| | 02:39 | Let me zoom in to that so you
could see it a little bit better.
| | 02:42 | And I'll give it a little bit more thickness.
| | 02:49 | You can see now my Stroke is
totally hard or somewhat soft.
| | 02:53 | You can also add Texture to the Stroke.
| | 02:55 | So if you come right here, you
increase the amount of Texture and then modify
| | 02:59 | the Texture so that it's
something, shows up a little better.
| | 03:01 | You could see it right there.
| | 03:04 | There's a lot of options here, all
kinds of grids and dots, just like you have
| | 03:07 | with the Fill panel.
| | 03:09 | So if you go to this pop-up, at
the very bottom, you have this thing
| | 03:12 | called Stroke Options.
| | 03:13 | So you could click on that and just
get very granular on all these different
| | 03:17 | options that you have down here.
| | 03:20 | But you can also click on this Advanced tab.
| | 03:21 | If you really want to access Stroke
Options, this is the place to do it.
| | 03:25 | It just lets you modify the Stroke in
any particular shape and way that you want.
| | 03:29 | One of the tabs that I
really like is Sensitivity.
| | 03:32 | This gives you a lot of options for
adjusting your Stroke if you have a Wacom or
| | 03:36 | other pressure-sensitive tablet.
| | 03:38 | By applying this Pressure field my
Wacom tablet would adjust to the Pressure of
| | 03:41 | my Stroke, so I drag that around.
| | 03:44 | If you have a pressure-sensitive tablet,
some of these things are great options
| | 03:46 | to add to your Strokes.
| | 03:48 | So I'm going to click so that you could
see the results of the Stroke down here
| | 03:52 | and how it would look based
on some of these elements.
| | 03:54 | So right now, you actually probably
want to make this Stroke a lot thicker to
| | 03:58 | see some of those options.
| | 03:59 | So even though that's a
crazy thick stroke right there.
| | 04:02 | I'm going to go back to Stroke Options,
Advanced, and go to the Sensitivity tab,
| | 04:08 | and you could see here that the Stroke
will begin very strong and go very weak.
| | 04:13 | And by adding this randomness, I kind
of randomize how the Stroke gets bigger
| | 04:17 | and smaller as the pressure sensitivity changes.
| | 04:23 | Once you have the Stroke you like, you
can add it to the custom list by hitting
| | 04:26 | this little button right here.
| | 04:28 | And that way, you can add something
to this list of things that you see in
| | 04:31 | Fireworks as a Preset.
| | 04:33 | So if you get crazy with the Stroke
and you want to use it in other projects,
| | 04:36 | just go and hit this little Plus sign.
| | 04:37 | If you find a stroke and you want to
delete it, just hit the garbage can right
| | 04:41 | here and it'll delete the custom stroke.
| | 04:43 | So I like when most programs keep
things simple, but I really love how
| | 04:46 | Fireworks does a good job of making
everything you're going to need, 90% of the
| | 04:50 | time, immediately available to you,
while still allowing you to go crazy and
| | 04:53 | access a wide range of options and
you could really see that in the Stroke
| | 04:57 | options of the program.
| | Collapse this transcript |
| Applying opacity, blending modes, and Live Filters| 00:00 | When you select objects, the
Properties panel shows to the right-hand side
| | 00:03 | several options for adding special
effects like Blending, Opacity, and live Filters.
| | 00:08 | So let's experiment with some of those options.
| | 00:10 | So I'm going to click on these
series of windows right here.
| | 00:13 | See that the first thing that we could do
here is adjust the opacity of the object.
| | 00:17 | So if I reduce the opacity down, that
object becomes partially transparent and
| | 00:21 | you can see more of the background.
| | 00:23 | So if I move that around you could
see that it's a little bit see-through.
| | 00:26 | I'm going to undo, so I'll
set that back up to 100%.
| | 00:31 | You can also change this area right
here called Blending Modes, and there are a
| | 00:35 | lot of options there as you can see.
| | 00:38 | So that controls how an object reacts
to another object behind it by using
| | 00:42 | mathematical formulas.
| | 00:43 | If you're familiar with Photoshop layer
Modes, these are exactly the same thing.
| | 00:46 | When you apply a Blending mode,
you're applying a mathematical formula that
| | 00:50 | decides how pixels on an element
will affect those pixels underneath that
| | 00:53 | element, so different things about a
pixel color will affect the color behind it.
| | 01:01 | And you could see that there are a lot
of different ones that you could use here.
| | 01:05 | They're really best experienced than explained.
| | 01:08 | But, for example, if you use the
Multiply mode the color in the foreground will
| | 01:13 | multiply against the color of the
background, which means that the resulting
| | 01:16 | colors are going to be darker.
| | 01:17 | Screen, on the other hand--
so, let's look for Screen.
| | 01:21 | It multiplies the inverse of the
object color by the color underneath, which
| | 01:26 | results in a bleaching kind of effect.
| | 01:28 | I could describe all the mathematical
functions, but there are so many of them,
| | 01:31 | they really most of the time they
just kind of experiment with them.
| | 01:34 | After a while you kind of get used to
what each one of them does, so you just
| | 01:38 | try out the different options.
| | 01:40 | Some of the things like Opacity and
the Color of the objects affects how these
| | 01:44 | pixels blend with each other, so in
addition to just trying out different modes,
| | 01:48 | make sure you play around with the
opacity settings and also the color of the
| | 01:51 | object, and you'll see how
those different functions work.
| | 01:54 | One of my favorite Blend Modes that I
haven't seen in other programs is the Erase mode.
| | 01:58 | It's at the very bottom of the list.
| | 02:01 | So if I go to Erase mode, you actually
see that this object acts as a mask and
| | 02:05 | what it's doing is it's
showing you the background color.
| | 02:08 | So right now the background color in
this particular document is transparent,
| | 02:12 | but if I go to the Modify menu and
select Canvass Color and I'll switch it to
| | 02:16 | something Custom, we'll be able to see
that background color appear behind the
| | 02:22 | objects, so this is actually making
like a hole in our entire drawing.
| | 02:26 | It is going through all the different objects
and all the different layers and making a hole.
| | 02:30 | So let me modify the Canvas back.
| | 02:31 | That's the mode I really haven't seen in
other programs, but it's kind of useful
| | 02:36 | when you're trying to just knock something out.
| | 02:39 | I will set it back to Normal.
| | 02:41 | In addition to Blending Modes, Fireworks
also offers a super huge library of Filters.
| | 02:46 | These are called Live Filters, because
they can be adjusted after you apply them.
| | 02:50 | So if we go to Adjust Color and we do
something like say Color Fill, then this
| | 02:55 | will allow us to fill this entire object
with a specific color, and as I said, I
| | 02:58 | can still mess around with the opacity settings.
| | 03:01 | So I'm applying this color, but only at
a 28% strength, which shows some of the
| | 03:05 | original gradients and
colors that I had on that object.
| | 03:08 | You can also use Blending Modes to
control how the pixels and the color affect
| | 03:12 | the pixel in the background, so you can
get even more effects by messing around
| | 03:15 | with some of these values right here.
| | 03:17 | The nice thing is, once I apply a
Blending mode, I can turn it on and off.
| | 03:23 | I can hit this eye key right here, and then I
can go back and readjust my settings here.
| | 03:27 | So back to 100% and then try
something else like Darken.
| | 03:33 | Because photos have so many more
pixels, these filters will actually affect
| | 03:38 | photos a lot more than they will vector objects.
| | 03:41 | So in addition to the Color Modes, you
could see that I can apply all kinds of
| | 03:44 | other stuff, like adding Noise to an
object if I want to and add just a little
| | 03:48 | bit of Noise to the object,
that can be good for some effects.
| | 03:52 | You can tell it whether or not you
want it to have color in each one of the
| | 03:56 | pixels that it adds and you can apply
effects that are sometimes more useful,
| | 04:00 | like Drop Shadows, so I can say give me a
Drop Shadow right here and it creates a
| | 04:04 | Drop Shadow for the effect.
| | 04:05 | It can control the Position of the
Dark Shadow in relationship to the object.
| | 04:11 | Then the strength of the Drop
Shadow is right here, so you can make it
| | 04:13 | stronger or weaker.
| | 04:15 | Control the Feathering of the
shadow, so there's a softer shadow,
| | 04:19 | and of course, also the Angle.
| | 04:21 | And in a lot of the other effects
you'll see these same type of controls:
| | 04:25 | Angles, Strength, Color, et cetera, et cetera.
| | 04:30 | Once you have applied the filter,
you can actually change the order that
| | 04:33 | these filters are applied and sometimes that
makes a difference in the way that they show.
| | 04:37 | So, for example, I move my Color Fill
underneath my Drop Shadow, and now my Drop
| | 04:42 | Shadow has a little bit of that color fill.
| | 04:45 | So moving the filters around within
this little window will give you a
| | 04:48 | few additional options.
| | 04:49 | You could spend half an hour messing
around with some of these options, until
| | 04:53 | you get your object just the way you want it.
| | 04:55 | Another nice thing about some of the
Shadow Modes is that they really do
| | 04:58 | translate well to CSS.
| | 05:00 | So when we look at the CSS Properties
panel, you'll see that we can actually
| | 05:03 | grab some of those values and
incorporate it into our CSS projects.
| | 05:07 | You can delete Effects by just clicking on
them and then hitting this Delete button.
| | 05:11 | You can also save your effect as Styles,
so if you click on this button right
| | 05:15 | here, you can save that effect that
you've applied to this element as a Style.
| | 05:20 | And notice that you can also see the
different things that affect that style
| | 05:24 | which are not only the effects down
here, but also the Fill and Stroke color.
| | 05:28 | So you can say I want to really apply
this effect to another object, but I don't
| | 05:31 | want to change the other
object's Color or the Fill type.
| | 05:34 | I just want to apply maybe some of
these Noise factors and stuff like that, so
| | 05:38 | you could really have a lot of control
here about how that effect is applied to
| | 05:42 | other objects as you select them, so
then you can pick it up from this pop-up
| | 05:47 | menu right here, and we could
delete it right there, if we want to.
| | 05:51 | So we'll talk more about styles in
another movie, but I wanted to show you that
| | 05:54 | you can save some of the
presets that you've done.
| | 05:56 | Remember that you can also copy and
paste Styles by going to the Edit menu and
| | 06:00 | selecting Copy and then go into another
object and go into the Edit menu again
| | 06:04 | and selecting Paste Attributes.
| | 06:06 | That copies all the Effects and the
Colors choices that you've made on
| | 06:09 | that original object.
| | 06:10 | You know, some things are better
experienced than explained, and I've shown you
| | 06:14 | how to use some of these filters, but
this is really scratching the surface.
| | 06:18 | So take the time to experiment with
some of these, and I think you'll find them
| | 06:21 | very useful in your artwork.
| | Collapse this transcript |
| Using styles| 00:00 | The Firework Styles panel gives you
options for using and saving Style Presets
| | 00:04 | that you can use on many projects.
| | 00:06 | Styles are a combination of presets
from an object's Fill, Stroke, Effect, and
| | 00:11 | can even have Font Information.
| | 00:13 | If you don't have the Styles panel already open,
just go to the Window menu and select Styles.
| | 00:19 | So I'm going to choose an object like
this bar right here and go to my current
| | 00:23 | document pop-up here under the Style
menus and choose one of these other styles.
| | 00:27 | So I'd like to use the Plastic Styles a
lot, and you can click on any of these
| | 00:31 | and you'll see that style
applied to your document.
| | 00:33 | If we go back into this pop-up and go
back to Current Document you could see
| | 00:38 | that style appears right here.
| | 00:39 | So if I choose Other options, those
options will all be added under the
| | 00:46 | Current Document Styles.
| | 00:47 | And you can of course create your own
version of a Style by picking a few options here.
| | 00:54 | So I'm going to choose just a different
gradient for this, then maybe I'll add
| | 01:00 | an Inner Glow Filter here.
| | 01:06 | Once I have the style just the way I
want it, I can add it to this list by
| | 01:09 | hitting this New button right here.
| | 01:11 | So here I can give it a name, and I can
control which of these options I want
| | 01:18 | to save in this style.
| | 01:19 | So if I don't want to apply that Inner
Glow, I just want the Gradient, I can
| | 01:22 | turn that off by hitting this
button right here, and I'll hit OK.
| | 01:27 | That appears under my Current Document Styles.
| | 01:30 | I can also save a style
underneath each one of these categories.
| | 01:33 | So if I go to Plastic Styles, and I'm
going to click on this one right here and
| | 01:37 | just create a different version of
this gradient and try another color here.
| | 01:43 | Yeah, that blue looks good.
| | 01:46 | Then I'll apply a filter, again
I'll do an Inner Glow, a little softer.
| | 01:52 | So now if I want to save that style let
me scroll all the way to the bottom here
| | 01:56 | and I'll hit this button and
now I can add this style, hit OK.
| | 02:03 | This adds the style to this option in
this pop-up menu, so I can go to any of
| | 02:08 | these Presets and add
Styles to those Presets as well.
| | 02:11 | So if you go back to the Current Document,
you should see that New style appear
| | 02:15 | on that list as well.
| | 02:17 | So those are few things you
can do in this Style pop-up.
| | 02:20 | You can Rename the Styles.
| | 02:21 | So if I click on one of these, let me
go ahead and pick up another one of these
| | 02:24 | buttons, and I'll click on this one.
| | 02:26 | If I click on the Options pop-up, you
can see that I can Rename the Style.
| | 02:30 | You probably don't even know that
the name exists most of the time.
| | 02:33 | Another way you can see it is when you
roll over these buttons, you could see
| | 02:37 | the Style Name appear right here.
You can also Redefine the Style.
| | 02:42 | To do that you need to apply a Style
like I've done here and then modify
| | 02:45 | the Style slightly.
| | 02:50 | And then while this original style is
still selected, you can come over here
| | 02:54 | to this pop-up and Redefine the Style,
and it will take up the new properties
| | 02:59 | that you've changed.
| | 03:00 | Now, you can also have
styles that have Text information.
| | 03:04 | So you see there's a lot of
different Text styles right here.
| | 03:06 | I go to this and I click on this, you see
that the new style takes over my text element.
| | 03:12 | One of the nice things that I could do
is Redefine this style so that it doesn't
| | 03:17 | always affect the font choice
or the font size of my objects.
| | 03:21 | So let me go ahead and do that.
| | 03:22 | I'm going to go to Style options here.
| | 03:25 | And then I am going to say I want you
to Effect the text, but I don't want you
| | 03:29 | to change the font or the font size of
the text that I have already selected.
| | 03:33 | So I'll actually click all these off and then
come over here and just to apply that Style.
| | 03:39 | You could see that everything gets
applied, but it doesn't modify my text at all.
| | 03:43 | Sometimes you do want to make sure
that you maintain those text options
| | 03:47 | within the Style itself.
| | 03:48 | Let's go back into the Current Document.
| | 03:51 | You can also replace one Style with
another by just clicking an option dragging
| | 03:55 | on top of another Style that modifies the old
style, with whatever we dragged on top of it.
| | 04:01 | You can also break the link to
the current Style right here.
| | 04:05 | And what that does is make sure that
this item that I have selected no longer
| | 04:08 | has any Style applied to it.
| | 04:10 | So if I redefine this Style again just
by dragging another copy of something
| | 04:14 | else to it, it won't affect
the item that I'm currently on.
| | 04:17 | So it breaks the link
between the style and the object.
| | 04:21 | You can also choose to Save Styles by
going to this Pop-up menu and select
| | 04:25 | Save Style Library.
| | 04:27 | That will save the styles as a .stl file
that you can import into other projects.
| | 04:32 | So if you can export styles, that
also means that you can import styles.
| | 04:36 | And there's a lot of web
sites like this Fireworkszone.com
| | 04:39 | that have a lot of different
styles that you can use in your projects.
| | 04:43 | So you can go maybe this, 131
Ultimate web 2.0 Styles for the Fireworks and
| | 04:47 | download an STL file to
import into your current project.
| | 04:52 | One more thing you can do with
Styles is to change the size of this
| | 04:56 | preview right here.
| | 04:57 | Sometimes you may want to see a larger preview.
| | 04:59 | So you can choose Large Icon, and you'll
see the Style is a lot clearer in this view.
| | 05:04 | I love the built-in style library
that Fireworks provides for you.
| | 05:07 | A lot of them translate
really well to online work.
| | 05:11 | The ability to save and add Style is
also really useful, but I think the
| | 05:15 | options that Fireworks already gives you are
going to be sufficient for most of your projects.
| | Collapse this transcript |
| Styling with patterns and textures| 00:00 | I like the option that you have
in Fireworks to apply patterns.
| | 00:03 | But I'm not too crazy about the
patterns that are available with the program.
| | 00:07 | So let's take a look at Pattern Fills and
how we can add some of our own patterns.
| | 00:10 | To add a Pattern Fill, just select an element.
I'm going to click on this background here.
| | 00:15 | Right now, it's a gradient.
| | 00:16 | And I can go to this option in the
Properties panel and choose a Pattern just
| | 00:21 | by clicking on that.
| | 00:23 | You can choose another Pattern just
by clicking on this other pop-up and
| | 00:27 | choosing something else.
| | 00:28 | See that Firework shifts
with a number of patterns.
| | 00:32 | But I'm not really
excited about too many of them.
| | 00:35 | So you have one option just by going
down here all the way to the bottom
| | 00:38 | and selecting Other.
| | 00:40 | So from here I'm going to click on the Desktop.
| | 00:42 | Click on Exercise Files and then
find the folder for this movie.
| | 00:45 | And in that folder I have a
pattern called wood-bamboo.
| | 00:49 | This is just really a picture of my floor.
| | 00:52 | And once I add that pattern, you could
see that it appears as a pattern in this
| | 00:57 | particular document.
| | 00:58 | So with Patterns, remember that
you can always customize them.
| | 01:01 | I'm going to choose something else for a second.
| | 01:03 | And when you add a pattern, you can see
these little handles that you can move around.
| | 01:07 | And these handles allow you to move
the position, the orientation and the
| | 01:13 | repeating of the pattern, so you can
further customize any pattern you have by
| | 01:17 | moving these three handles around.
| | 01:18 | So Patterns are no more than graphic
files, so you can actually add your own
| | 01:23 | patterns by adding any sort of PNG, JIF,
JPEG, or any other kind of file format.
| | 01:28 | I usually stick with PNG, if it's a
simpler pattern, because they compress better.
| | 01:32 | But if it's a more complex
photographic pattern, I usually go with JPEG.
| | 01:37 | So it's very common to use
seamless patterns on web designs.
| | 01:39 | And with these Fireworks options, you
can definitely add your own patterns from
| | 01:43 | any file that you have
created for your web projects.
| | Collapse this transcript |
| Drawing vector shapes| 00:00 | The Pen tool is probably the most
versatile drawing tool in Fireworks.
| | 00:04 | It lets you draw curves or straight
lines using mathematical equations that will
| | 00:08 | render just about any curve you can dream of.
| | 00:11 | It was popularized by a French
automobile designer named Pierre Bezier and
| | 00:15 | hence, a lot of software is
known as the Bezier Pen tool.
| | 00:18 | So let me go ahead and create a new
document here under the File menu and select
| | 00:22 | New and just type in a Canvas size here.
| | 00:25 | I'll do 800x500 this time, and I
hit the Enter key to just apply that.
| | 00:30 | And here is the Vector Tools and one of
these tools right here is the Vector Pen tool.
| | 00:35 | If you're familiar with the way
Illustrator draws with the pen tool, this is
| | 00:39 | almost exactly the same.
| | 00:40 | So this is actually one of the reasons
why a lot of people like Fireworks, it's
| | 00:44 | a really good combination of what you
find in Adobe Illustrator but with a lot
| | 00:48 | of the Effects that you find in Adobe Photoshop.
| | 00:51 | So to draw simple lines, all you have
to do is just click and then find another
| | 00:55 | point in your canvas and then
click again to create a straight line.
| | 00:58 | If we keep on clicking, then we can
create a more complex shape, and if we click
| | 01:04 | on the original point that we
created, and that makes a closed shape.
| | 01:08 | So if you want to actually create a
shape that doesn't have the beginning point
| | 01:12 | and the ending point together, you can
just double-click at any point in time,
| | 01:17 | so this will end the shape
and not fill it with anything.
| | 01:19 | You can still choose a Fill here and
choose a different line color, so I'll make
| | 01:24 | that line thicker, but it won't
be a closed shape like this one.
| | 01:29 | This one can be outlined and it goes all the
way around where this one just ends somewhere.
| | 01:35 | Now instead of just clicking, if you
click and drag with the pen tool then
| | 01:39 | things get kind of interesting.
| | 01:41 | When you click and drag, you see this
Bezier curve points that allow you to
| | 01:45 | create the shape by moving these points around.
| | 01:47 | So if I keep on clicking and creating
shapes, you can see that I can adjust the
| | 01:53 | position of the curve by
modifying these handles.
| | 01:56 | So I'm going to hold down the command
key for just a second just to get the
| | 02:00 | selection tool, the direct selection tool.
| | 02:02 | You can see that I can click and modify these
after the fact to adjust them even further.
| | 02:06 | If I let go off the Command key and
that will be Ctrl on a PC, then it'll
| | 02:12 | continue to draw the shape and if at
any point in time while I'm drawing a
| | 02:15 | point, I want to move that point around,
I can hold down the Command key and
| | 02:20 | adjust the position of the point.
| | 02:23 | You can also change the direction of
the handle while you're drawing by hitting
| | 02:26 | the Option or the Alt key.
| | 02:28 | So by moving this point or this
Bezier curve handle this way, then the next
| | 02:33 | shape will be affected by
that new position of the handle.
| | 02:35 | So I could do that again to create
more sort of a hard shape right here and
| | 02:40 | position my points wherever I want them.
| | 02:42 | So let me close that shape, and there's
that weird-looking--I think it's a whale.
| | 02:47 | Maybe if I add another smile here, there, I
have drawn a very nice looking whale there.
| | 02:53 | You could use the Direct Selection
tool to either click and select one of
| | 02:56 | these segments and then hit the Delete
key to delete them, and if you use that
| | 03:00 | tool you can also click on anyone of these
points and move them around and modify them.
| | 03:05 | So like with other drawing tools,
you definitely want to use some of the
| | 03:09 | Command keys in here.
| | 03:11 | So if you're in this tool, while I'm
drawing, I can switch to the Direct
| | 03:15 | Selection tool by hitting the Command
of Control key on a PC and then modify
| | 03:19 | some of these points.
| | 03:23 | I almost never go from the Pen tool to
the Direct Selection tool by clicking up
| | 03:27 | here, I just simply hold on the Command key
and that allows me to choose another tool.
| | 03:32 | When you move these points, you can also
hold on the Command or the Ctrl key and
| | 03:36 | change the direction of the point
after you've already put it down.
| | 03:40 | So after I've already drawn the shape,
if I click on any one of these and I find
| | 03:44 | a Bezier curve handle, I'll hold down
the Command or Ctrl key on a PC, then I
| | 03:49 | can reshape that particular
segment by modifying this handle.
| | 03:53 | You can also reshape points if you
have this tool selected, the Pen tool, and
| | 03:57 | you go on top of a point, you can click
on that point to collapse the handles.
| | 04:01 | So if I click over here,
it'll collapse those handles.
| | 04:04 | Here's a handle right here, you could
see it to the right, and I'll click on this
| | 04:08 | and I will collapse into
essentially straight lines.
| | 04:11 | So there is more of a quadratic, I guess whale.
| | 04:15 | If you instead, notice that if I move
from my pointer on top of one of these
| | 04:19 | points, it gives me the
Pen tool with a minus sign.
| | 04:22 | This means that if I click on this
point, I'll also be able to delete that
| | 04:25 | point by clicking on it.
| | 04:27 | If I hold down the Option key while I
have this on, then I can actually draw new
| | 04:31 | handles by clicking and
dragging outside this point.
| | 04:35 | So I can drag a handle out of these
points by holding down the Option or the Alt
| | 04:40 | key on a PC and then getting my handles back.
| | 04:44 | So I am holding down the Option right now,
and then I'm clicking, and then I can
| | 04:48 | pull a single handle or adjust the
handles separately if I want to by holding
| | 04:53 | down the Option key or just letting the
Option key go after I click and drag and
| | 04:58 | that way I'll get the two handles tied together.
| | 05:00 | I can still move things
around with the Command key.
| | 05:03 | So, after a while, the Pen tool is so
versatile that you almost don't need any
| | 05:07 | other tool to draw any shape that you want.
| | 05:09 | But you have to really get used to
these Command keys sequences to make it
| | 05:13 | really sing, and after a while you
get to the point where you're not really
| | 05:16 | thinking about what keys you're hitting,
you're just kind of in the moment and
| | 05:20 | drawing the shape that you want.
| | 05:21 | So I'm going to get this thing a fill.
| | 05:25 | And there is another tool that you can
use right here called the Knife tool that
| | 05:29 | you can use to cut a shape in half.
| | 05:31 | So if you click on that and then
just drag a line around the shapes, you
| | 05:35 | essentially have divided this in half,
so you can't see it until I pull it out,
| | 05:39 | but that shape got divided with this tool
right here. That can be handy sometimes.
| | 05:44 | So if I want to divide this shape from
this shape, and I can hit this tool right
| | 05:48 | here and just drag myself a line in
between a couple of points, I'm not going to
| | 05:51 | be able to get those two points
exactly, so it's actually going to generate
| | 05:54 | another handle right here, you can see that.
| | 05:56 | Now I have these shapes and they're
separate from those shapes right there.
| | 06:02 | Now a lot of people find that the Pen
tool is just completely alien and they
| | 06:07 | don't really enjoy drawing with a
Pen tool, but they would still like to
| | 06:10 | create vector shapes.
| | 06:11 | So I'm going to hit Command+A to select
all these shapes, and then I'm going to
| | 06:15 | hit the Delete key right here.
| | 06:17 | And one of the sub-options on
this tool is the Vector Path tool.
| | 06:22 | Vector Path tool just simply allows you
to draw shapes with just the mouse or a
| | 06:26 | pressure-sensitive tablet and then
make adjustments to that shape with any of
| | 06:31 | the line tools that you see right here.
| | 06:32 | So you've drawn the shape, you can
actually add any of these effects that you'd
| | 06:36 | normally add to any line, and it's still
a vector shape, which means that it can
| | 06:41 | be reshaped with the Pen tool.
| | 06:43 | So I can still click on this and drag
out some selection handles, I can click on
| | 06:49 | this and drag myself, maybe one
selection handle to one side, just reshape this
| | 06:54 | while it's still maintaining some of
the properties that you apply through this
| | 06:59 | lines options right here.
| | 07:00 | Now this really sings if you
have a pressure-sensitive tablet.
| | 07:04 | You definitely want to go into this
section right here, the Stroke Options, and
| | 07:08 | go to Advance and then Sensitivity and
control how the Pressure of your tablet
| | 07:13 | is going to affect the
objects while you draw them.
| | 07:16 | So although Fireworks provides a rich
group of shapes, sometimes you need to be
| | 07:20 | able to draw just about anything you
want, more complex shapes or objects, and
| | 07:24 | with these two tools, you'll be
able to draw just about anything.
| | Collapse this transcript |
| Working with freeform tools and reshaping vector objects| 00:00 | Fireworks has a number of tools for
reshaping vector objects, so let's take a
| | 00:04 | look at some of what you can do with them.
| | 00:06 | I'm going to start off by
drawing some paths here.
| | 00:09 | I'll choose the Vector Path tool and
draw myself a path in this window here.
| | 00:13 | Once I've drawn a path, I have a number
of options for reshaping that path and
| | 00:18 | one of them is this Re-path Draw tool.
| | 00:21 | And what you do with this tool is you
find somewhere in your path that you
| | 00:23 | want to reshape and you click, and then
you can drag out a different direction
| | 00:28 | for that path and then come back and meet this
path again, and Fireworks will reshape that tool.
| | 00:33 | It does create a lot of points here, but
it's one way of reshaping your paths if
| | 00:38 | you would just want to change things
around, especially if you don't like the
| | 00:41 | Pen tool, and sometimes you kind of fail.
| | 00:43 | So you have to be really, really
careful, you can really mess this up.
| | 00:47 | There you go and that
reshapes that Vector tool like that.
| | 00:49 | We've got a couple of other options
right here underneath this menu, and the
| | 00:54 | first one is the Freeform tool.
| | 00:55 | A couple of ways that you can use this,
if you're familiar with Flash, this
| | 00:58 | is kind of similar.
| | 00:59 | You kind of just push and drag out the shapes.
| | 01:02 | It's going to be good if you just
want to make a small adjustment to the
| | 01:05 | particular shape you're working on.
| | 01:06 | If you click outside the shape, you
will get this circle and you can use that
| | 01:10 | circle to push that shape around.
| | 01:12 | Of course, you can change the Size of
the circle here and work with a smaller
| | 01:17 | circle if you want a little bit more precision.
| | 01:22 | And remember that with any tools, if you
want to modify the original settings for
| | 01:25 | the tool, just remember that you
have to first deselect everything.
| | 01:28 | You can just go to Select and
Deselect if you have something selected.
| | 01:33 | You can click on the tool and change
the parameters for how that tool works
| | 01:37 | from then on, so whatever you decide here
will be now the default setting for that tool.
| | 01:42 | So if I click on this, then I
can further modify that object.
| | 01:48 | I've some other options
here, the Reshape Area tool.
| | 01:50 | It works a lot like the Freeform tool
but it uses a couple of circles instead
| | 01:54 | of a single circle.
Not a lot of difference in the two tools.
| | 02:01 | You can see that there's an
additive and subtractive version of the
| | 02:03 | Path Scrubber Tools.
| | 02:05 | They are meant for if you're
using pressure-sensitive tablets.
| | 02:08 | You can change some of the parameters of
the pressure-sensitivity with this tool.
| | 02:12 | You can modify some of these settings
here to control how the pressure is going
| | 02:15 | to affect your drawing.
| | 02:17 | I don't use these tools very much, but
I can see how they could be useful to
| | 02:19 | someone with a pressure-sensitive
tablet or somebody who's really not
| | 02:23 | comfortable using the normal Pen tool.
| | Collapse this transcript |
|
|
4. Working with ObjectsWorking with bitmaps| 00:00 | Although Fireworks is primarily a
Vector Drawing application, it does have a
| | 00:04 | good section of tools for dealing with Bitmaps.
| | 00:07 | So let's take a look.
| | 00:08 | A Bitmap is a graphic that is
made up of a series of pixels.
| | 00:12 | A photo like this always has to be a
bitmap, but things like logos and artwork
| | 00:16 | with few colors can be
represented as bitmaps or vectors.
| | 00:20 | A vector shape is resolution independent.
| | 00:22 | So whenever possible you should use
vectors because they are scaled nicely
| | 00:25 | without losing resolution.
| | 00:27 | So Fireworks has a couple
of Bitmap Drawing tools.
| | 00:29 | I'm going to make a new document
here to show you how to work with them.
| | 00:32 | So I'll do 900 pixels by 500 pixels
here, and I'll just get a clean canvas.
| | 00:38 | You can see all the Bitmap Drawing
Tools are right here in Fireworks.
| | 00:41 | So you can draw with something like
a Brush tool just by clicking on it.
| | 00:44 | You've got a few options right here,
setting up the Color and the Size and the
| | 00:48 | type of brush that you're using.
| | 00:50 | So if I click and drag, you can see
that I can draw that shape, and of course,
| | 00:54 | you have an Eraser tool, on the canvas
you can erase that bitmap just like this.
| | 00:59 | So this is similar to any other kind
of Bitmap tool that you would encounter,
| | 01:03 | maybe something like Photoshop, but you
do have a lot of options here especially
| | 01:07 | when setting the type of brush
that you're going to be using.
| | 01:10 | So you can use a Soft brush here, and
there's all kinds of options that you
| | 01:14 | could use right here.
| | 01:15 | If you really want to go crazy, go into
Stroke Options, make sure you check out
| | 01:19 | some of these options
especially in the Advanced tab.
| | 01:21 | If you've got a pressure-sensitive
tablet make sure you add Sensitivity so you
| | 01:25 | can control the sensitivity to the
pressure that Fireworks takes into account
| | 01:29 | when drawing an object.
| | 01:31 | So when you draw a Bitmap, you're
actually creating an object that appears
| | 01:35 | in the Workspace area.
| | 01:36 | So as you can see when I switch over to
the Pointer tool, Fireworks has actually
| | 01:40 | created an object that sits
in a layer in our drawing.
| | 01:44 | So this is a separate object, that
anything else you draw, so if I draw a
| | 01:47 | rectangle, you can see that this is
also an object, but this is a Vector object
| | 01:51 | where this is a Bitmap object.
| | 01:53 | So if I want to edit a Bitmap, I have
to first select this object and then
| | 01:57 | continue to draw with any
tool in the Bitmap arsenal.
| | 02:00 | So when I draw this and I switch over
to the Selection tool, you can see that my
| | 02:05 | object here, that is a
bitmap has grown a little bit.
| | 02:08 | If I don't select this object and I--
let me go ahead and click over here to
| | 02:12 | deselect everything, and I'm going
to click on this tool and I'll also
| | 02:15 | start drawing over here.
| | 02:17 | Then if we go to the Selection tool,
you'll see that it creates a separate object.
| | 02:20 | So these are two separate bitmaps.
| | 02:22 | That's one thing they have to watch
out for when drawing with bitmaps.
| | 02:25 | If you want the bitmap to be one
contiguous shape, you want to first select the
| | 02:29 | Bitmap that you want to work with
and then continue to draw with that.
| | 02:32 | So of course, you also have the
Pencil tool that just lets you draw always
| | 02:36 | super harsh shapes.
| | 02:37 | That might be useful for if you're
creating very small icons, you might want to
| | 02:40 | go pixel by pixel, so zoom in and
use that tool to turn pixels on.
| | 02:44 | So I'm going to show you the difference
between a Bitmap and a Vector shape, and
| | 02:48 | the way that I'm going to do that is
I'll first draw a shape with this tool.
| | 02:52 | I'll just go ahead and set it to Hard Line
and 12 points and the color red is fine.
| | 02:58 | So I'll draw a shape right here.
| | 03:00 | Then I'll switch over to this tool
right here, the Vector Path tool, and I'm
| | 03:04 | going to draw another shape, and it looks
like they are pretty much set up the same way.
| | 03:08 | Now these look almost exactly the same,
but this is a Vector on the right-hand
| | 03:13 | side and this is a Bitmap on the left.
| | 03:15 | You can't really see a difference right
now but if I scale these, so if I click
| | 03:18 | on this, and I click on this tool,
which is a Scale tool or the Transform tool,
| | 03:23 | and I want to make this a little bigger.
| | 03:26 | You'll see that I start seeing a little
bit of blurriness whenever I scale a Bitmap.
| | 03:31 | And let me resize this one right here,
click on that tool again and just
| | 03:36 | drag one of the handles.
| | 03:37 | You could see that my shape is a lot
cleaner even when I make it bigger so
| | 03:42 | you can't see any of these old weird,
blurry, jaggy edges that are happening on this.
| | 03:48 | Furthermore, I can adjust this shape
pretty easily with any of the tools so I'll
| | 03:52 | switch over to the Pen tool.
| | 03:54 | I'll come over here and I'll drag
myself some handles, and I can move these
| | 03:57 | points around without losing anything
and everything is always a Vector that is
| | 04:03 | displayed at the maximum resolution
that my screen will allow at the moment.
| | 04:07 | So Vectors are generally more flexible and
better to work with in almost all instances.
| | 04:11 | The problem is Vectors can't really
represent photographic data very well.
| | 04:15 | So switch over to the Bitmap area
and you can see that this image, if you
| | 04:19 | zoom in all the way, it's really just a bunch
of pixels that are right next to each other.
| | 04:23 | When you zoom in all the way these are
all pixels of slightly different color.
| | 04:27 | That kind of information is almost
impossible to represent with Vectors.
| | 04:32 | So it's really best left for Bitmaps.
| | 04:35 | So there are a few options that we
can use when we want to do things with
| | 04:38 | bitmaps like select Bitmaps.
| | 04:40 | So we've got some selection tools right here,
the Marquee tool and the Oval Marquee tool.
| | 04:43 | These are for selecting section of bitmaps.
| | 04:45 | So maybe we want to select this face right
here, and I'm going to move it around of course.
| | 04:49 | You need to make sure that first you
click on the Bitmap object, so let me go
| | 04:53 | ahead and click on it first
and I'll click on this tool.
| | 04:56 | You will need to add the Command key
when you make a selection and you want to
| | 04:59 | move within a selection.
| | 05:00 | So I'm going to grab this again and to
move this out of the Bitmap shape, hold
| | 05:06 | on the Command key and click
and drag, you can move that out.
| | 05:09 | So in addition to this tool, you
also have the Oval Marquee tool.
| | 05:12 | It just makes shapes in the form of an
oval here, and I can move that around if I
| | 05:20 | want to, by holding down the
Command key or the Ctrl key on a PC.
| | 05:23 | And then I have some of these more
freeform kind of selection tools, the Lasso
| | 05:29 | tool and the Polygon Lasso tool.
| | 05:30 | The Lasso tool works by letting you
just make a selection with your mouse like
| | 05:35 | this, just a more freeform selection,
and if you let go it makes a shape.
| | 05:39 | Again, I can grab that and move it out,
and if I'm drawing with this tool and I
| | 05:44 | hold down the Option key, I can also
make straight shapes which can sometimes
| | 05:48 | make it a little bit easier to select something.
| | 05:51 | And again if I let go, it completes the
shape and it allows me to move that around.
| | 05:57 | That's pretty much the same
thing as the Polygon Lasso tool.
| | 06:00 | It just lets you make
selections in straight lines.
| | 06:07 | I'll just double-click to complete that shape.
| | 06:10 | So really, this tool does the same
thing as this tool, if you hold down the
| | 06:13 | Option or the Alt key on a PC.
| | 06:15 | You also have the Magic Wand tool which
allows you to make selections based on color.
| | 06:20 | So if I click on this blue area, it tries
to select some of this blue, and you can
| | 06:24 | increase the Tolerance here and it
will allow you to adjust how much of that
| | 06:28 | color gets selected.
| | 06:30 | If you turn on this Live Marquee, then
you could see the selection kind of grow
| | 06:33 | and shrink a little bit.
| | 06:38 | And then once you do that, you can
apply a number of things to the selection.
| | 06:42 | So you could see that there are some
filters that I can access right here and
| | 06:47 | some of the filters are, for example,
Adjust Color, and you could maybe change
| | 06:51 | the color of that shirt by adjusting
the Hue, increase the Saturation or
| | 06:57 | decrease the Saturation, so it can
really bright there, and the Lightness.
| | 07:01 | So there's actually a bunch of
filters that you can apply to a selection.
| | 07:05 | Now this is probably not a good
selection, not the best selection in the world,
| | 07:10 | but it did do a pretty nice job.
| | 07:11 | Of course, you have tools
like the Blur and Sharpen tool.
| | 07:15 | These tools let you
selectively make changes to an image.
| | 07:19 | So make that brush bigger and you can
maybe blur a little bit of an image, so
| | 07:26 | we kind of zoom in.
| | 07:28 | So I'll make sure that I have the image
selected and move the Intensity like all the way up.
| | 07:37 | You can see that I'm blurring that image.
| | 07:40 | There, of course, are Sharpen, Dodge, and Burn.
| | 07:43 | These are similar to what you're going
to find in Photoshop's Smudge, which I'm
| | 07:46 | not exactly sure Smudge is
the most useful of tools.
| | 07:50 | It just kind of smudges the images around.
| | 07:53 | And then you have this which is the
Rubber Stamp tool, very similar to
| | 07:57 | Illustrator, you can copy an
area and paste it somewhere else.
| | 08:00 | It's really good for giving people extra noses.
| | 08:03 | Sometimes you can use this
tool to make corrections.
| | 08:05 | Say that you want to get rid of a part
of his beard right here, it's bugging you
| | 08:09 | a little bit so you can Option-click
to set a reference point, and then you
| | 08:13 | click and drag to copy a
section to another area.
| | 08:17 | So it looks like that works really well.
| | 08:21 | For the most part I think Photoshop
has much better tools for dealing with
| | 08:24 | photos, and the nice thing about Fireworks
is that it works really well with Photoshop.
| | 08:29 | So I tend to do all my color correction
and any sort of this photo handling in
| | 08:34 | Photoshop and then just really copy
and paste it or import into Fireworks.
| | 08:40 | But in a pinch, you can get by with
some of these tools to make small color
| | 08:44 | corrections, maybe remove red eye, do
simple things in Fireworks and then deal
| | 08:49 | with the rest of the photo in Photoshop.
| | 08:53 | So I wanted to show you a difference here.
| | 08:54 | There is a Filters menu here and you
can do things like Adjust the Curves and
| | 08:59 | that just lets you make the photos
brighter and maybe add a little contrast by
| | 09:05 | playing around with these curves.
| | 09:06 | This is really cool, but these are
actually permanent changes to the photos.
| | 09:09 | So whenever you use the Filters menu up here,
you're making permanent changes to this photo.
| | 09:14 | Let me go ahead and Revert this.
| | 09:17 | It's much better to come down here to
this Filters menu, and that looks a lot
| | 09:21 | like the menu up there--has
some of the same features.
| | 09:24 | So we'll go back to Curves here and click
and drag points to make Curve adjustments.
| | 09:30 | So this adds a little bit of contrast
to the photo, and I'm going to hit OK.
| | 09:34 | Down here it adds it as a live filter.
| | 09:37 | That means that I can turn this on
and off and I can readjust my curves or
| | 09:41 | anything about the filters.
| | 09:43 | If I just double-click on that eye
right there and then move my points around,
| | 09:47 | and this becomes a filter
that I can always adjust.
| | 09:49 | So in Fireworks, you really almost
never should go up here to this menu because
| | 09:55 | it makes permanent changes to a photo.
| | 09:57 | You should always go to the Live
Filtered menu and add the filters down here
| | 10:01 | because then you can always adjust the
filters, you have more control later on over
| | 10:05 | what happens to your graphic.
| | 10:06 | Now there's even this option
called Photoshop Live Effects.
| | 10:09 | If you really like Photoshop effects,
this is really duplicating what you see in
| | 10:14 | Photoshop in Fireworks.
| | 10:15 | This is a little bit odd because most
of these can be done just through this
| | 10:19 | Pop-up menu right here.
| | 10:21 | So I really never use the Photoshop
Live Effects but if you really understand
| | 10:25 | the way Photoshop Effects work, this might
be something you might want to look into.
| | 10:30 | Fireworks does give you a set of tools
that you can use to generate and edit
| | 10:33 | Bitmaps in a pinch, but
frankly Bitmaps are not its forte.
| | 10:37 | Photoshop I think is a much better tool
for dealing with bitmaps, and thankfully
| | 10:41 | Fireworks does an awesome job
of importing Photoshop files.
| | 10:44 | So most of the time, I would say
tweak everything here if you have to, but
| | 10:48 | always bring things into Photoshop if
you need to do a lot of editing and bring
| | 10:51 | them back into Fireworks. It does
a super job of importing things.
| | Collapse this transcript |
| Working with text| 00:00 | Whether you're working on a
wireframe, mockup, or small graphic, most
| | 00:04 | documents created with Fireworks will
have text elements and those needs to be
| | 00:08 | formatted and styled.
| | 00:09 | Fireworks has a rich set of
tools for working with text.
| | 00:12 | So let's take a look.
| | 00:14 | So all text created with
Fireworks gets placed in a Textbox.
| | 00:18 | Click on the Text tool
and I click on my work area.
| | 00:21 | I can start typing text and
it always goes into this box.
| | 00:24 | So right now my text is set to be white,
so I'm going to come right here in the
| | 00:28 | Properties panel and just find a
different color. I'll use black right here.
| | 00:32 | You could see that the text is right there.
| | 00:34 | It appears in a little textbox.
| | 00:36 | If I click on that textbox, I can modify
that textbox by making it bigger or smaller.
| | 00:41 | If I make it smaller, it's going to try
to wrap that text into multiple lines.
| | 00:45 | Now you can also with the Text tool
click and drag a selection of text so that
| | 00:50 | it fits within an area.
| | 00:51 | So once I get to that edge, it's going to
fit within that width that I set when I
| | 00:57 | created the text element.
| | 00:59 | So I'm going to go back to my Selection
tool and just hit Delete to get rid of that.
| | 01:02 | Now you can tell this text to be single
line text by double clicking on it with
| | 01:06 | the Selection tool, and then you can
this little pointer at the edge switch to a
| | 01:10 | little light pointer, if I double-click
on that, it's going to switch that text
| | 01:13 | to a Single Line mode.
| | 01:14 | A lot of people like drawing in
Single Line mode, and sometimes it's really
| | 01:18 | useful for when you're just creating a
quick text, or you just want to make sure
| | 01:21 | that everything fits within one line so
you could do that really quickly there.
| | 01:24 | Once you've entered text, you can see
the Properties panel has a lot of options
| | 01:28 | for modifying the text.
| | 01:29 | So you could see things here like the
Font Type, and Fireworks reassembles the
| | 01:34 | list so that at the very top you'll
see the fonts that you've used recently.
| | 01:38 | So let me see, I'll choose Arial here,
or I can choose something else, maybe
| | 01:43 | something like Cambria.
| | 01:47 | And then I can select different styles
for that typeface, so I'll choose bold
| | 01:51 | right here, and I can change the Font
Size either by typing a value right here
| | 01:55 | or by using this little slider.
| | 01:57 | Of course, the color is right
here which we've already done.
| | 02:00 | So I'll switch it back. I'll
make it a darker gray right there.
| | 02:03 | Then underneath that you have other
options like the alignment of the text.
| | 02:07 | Right now this particular Textbox
doesn't have anything that would be aligned,
| | 02:10 | so let me not show you that quite yet.
| | 02:12 | You also have Kerning or the spacing
between letters that you can control right here.
| | 02:17 | You can control Kerning also in a
letter-by-letter basis by holding down the
| | 02:21 | Command key and then using the Left
and Right Arrows between letters to move
| | 02:25 | those letters to the left or right so
that really gives you a good typographic
| | 02:28 | control over kerning.
| | 02:30 | Of course, if you hold down the
Command key or the Ctrl key on a PC and hold
| | 02:34 | down the Shift and then adding the
Greater Than and the Less Than sign.
| | 02:39 | You also have adjustments for the Leading or
the line spacing which can be done right here.
| | 02:43 | Of course, I don't have two lines of
text there, so let me go ahead and make
| | 02:47 | this a little smaller and back into
my Pointer tool here and I'll just make
| | 02:51 | that go to two lines.
| | 02:53 | You could see that if I adjust here,
it's going to adjust there as well.
| | 02:57 | Now again like with other tools, if I
hold on the Command key and hit the Up and
| | 03:02 | Down Arrows I can also adjust the
Line Spacing between the characters.
| | 03:07 | So a lot of times with text, I will
be mocking up a paragraph of text.
| | 03:13 | So I like to use a web site and
I'll show you this web site right here,
| | 03:18 | lipsum.com, that allows you to get
any sort of length of Lorem Ipsum text.
| | 03:24 | And this is just some standard text
that typographers and designers use to
| | 03:28 | mockup, maybe a paragraph of
something that they are working on.
| | 03:31 | So here you can specify how many
paragraphs you need and you can ask it to
| | 03:35 | generate the text for you, and it's just
going to give you a page with a bunch
| | 03:39 | of random almost looking text
that you could just Copy and Paste.
| | 03:43 | I'll just copy this small paragraph here.
| | 03:45 | So Edit > Copy and then switch back
to Fireworks, and I want to make a new
| | 03:50 | Textbox here, and I'll paste that. Oops!
Let me try that again.
| | 03:55 | I think my font right now is a little
bit too big, and I'll make it not bold.
| | 04:03 | Click on the Pointer tool there, click
on the text and I will un-bold it, and
| | 04:10 | maybe I'll switch it to Arial.
| | 04:11 | So this is really something good to
use when you don't have final copy, maybe
| | 04:16 | your copywriters haven't lent you a
final copy and you just need something to
| | 04:20 | mockup the design with.
| | 04:21 | So once you have some paragraph text
you can see these centering, little icons
| | 04:27 | here actually work a lot better, so you
can center and align to the right or a
| | 04:31 | full justify right here or left
align here, so that's pretty cool.
| | 04:35 | And you could see some of these other
options here, like indent the paragraph,
| | 04:39 | the first line of the paragraph and if
you have a multiple paragraphs, so let me
| | 04:42 | go ahead and put a Carriage Return here.
| | 04:47 | You can enter the space before or after
paragraphs by moving these sliders right here.
| | 04:53 | So after the paragraph
would be after paragraph. Oops!
| | 04:57 | So I just cancel this out
by making them both the same.
| | 04:59 | Let me go the other way.
| | 05:02 | So it's space before and after paragraph.
| | 05:04 | This is the Width of the current text
object, so you can stretch text out like
| | 05:08 | this, and this will be--if you want to
select maybe a text character and make it
| | 05:15 | shift up or down--its baseline.
| | 05:19 | I want to do like a superscript.
There you go, that looks good.
| | 05:25 | And let me see if I can Undo all of
these just a few times, so Command+Z or
| | 05:29 | Ctrl+Z a few times just to get
everything back where it used to be.
| | 05:33 | So you see Fireworks has a full set of Text
Tools that you use to control your document.
| | 05:39 | Now you also have the additional normal
controls, so you can add, say, things like
| | 05:43 | Filters, Drop Shadows.
| | 05:45 | You can even add outlines to text.
| | 05:47 | There are also a lot of styles
that have been customized for text.
| | 05:52 | So if I go to the Styles panel, see
that right here I have a lot of different
| | 05:55 | Text Styles that you can
incorporate into your designs.
| | 05:58 | So I'll say Text Corporate Styles,
and I can pick on some of these.
| | 06:02 | So Fireworks does come with a lot of
Text Styles that you can apply to your text.
| | 06:08 | Sometimes I like to begin with some of
these and then just go in here and modify
| | 06:13 | maybe some of the fills or
some of the Live Effects.
| | 06:16 | And these are good starting points and
you have a bunch of different sections
| | 06:21 | even, so you have Text Corporate,
Text Creative, and Text web Styles.
| | 06:25 | So they are good starting points for
special effects, or you can create your own
| | 06:29 | with any of the normal controls that
you would have with Adobe Fireworks.
| | 06:34 | You can also attach text to a path so
if you have a path drawn--so I'm going to
| | 06:37 | go to the Pen tool right here
and draw myself a small path.
| | 06:40 | So click and drag some
points here to add me some paths.
| | 06:45 | Then I can select the path and select
the Textbox right here, and I can go to the
| | 06:50 | Text menu and select Attach to Path, and
the text will kind of follow this path
| | 06:56 | which is still fully editable.
| | 06:57 | So I can go to this Sub-selection
tool and click on any of these points.
| | 07:01 | First, I'll click over here to click this off.
I want to get just the point.
| | 07:04 | So I'll click on this point and I can
move that around and I can mess around
| | 07:10 | with the bezier curves and adjust
how my text flows through that path.
| | 07:16 | So it's pretty easy to do, and I'll
Undo that to go back to just to the
| | 07:21 | normal textbox here.
| | 07:23 | There's a couple of other options up here.
| | 07:24 | So you could see you've got the basic
Font, Size, Style, Align, and then you
| | 07:28 | have things like Orientation, Convert to Paths--
other things that you could do with text here.
| | 07:33 | One of the things that you might find
useful is Convert to Paths. That converts
| | 07:37 | the text, so I have this
section of text selected here.
| | 07:40 | If you choose Convert to Paths, it
converts the text so that it's a bunch of
| | 07:45 | paths, so it's no longer text. And if I
zoom in and use the Sub-selection tool.
| | 07:51 | So I'm switching to the Sub-selection
tool right here by just holding down the
| | 07:54 | Option key right now.
| | 07:56 | I can click on any of these points and
reshape the text as if it were shapes.
| | 08:00 | So this is really cool because you
could do anything you want to the text.
| | 08:03 | The only thing is you are no longer
be able to access the Text Editing
| | 08:07 | Tools down at the bottom.
| | 08:08 | See now this is just a vector, and
as a vector you have standard Vector
| | 08:13 | Properties down here into Properties panel.
| | 08:15 | So this is no longer text, you can't
adjust the kerning any other aspect of the
| | 08:19 | text because it's lost its text status.
| | 08:24 | You can also allow text to be inside a shape.
| | 08:27 | So I'm going to draw myself a funky shape here.
| | 08:29 | And I'm going to color that just nothing
and I'm going to select both this piece
| | 08:39 | of text and this textbox right here
and I'm going to go to the Text menu and
| | 08:44 | select Attach In Path, and that
makes the text flow within that path.
| | 08:50 | So you can kind of go around
objects if you want to this way.
| | 08:53 | And again, these things are re-
shapeable, so I'm going to come over here and
| | 08:58 | kind of control how this is shaped.
| | 09:00 | And these again are just vectors so
they are--you can redo them or attach
| | 09:05 | handles to them just by going to the
Pen tool and click on any of these edges
| | 09:09 | and that what makes it more circular kind of
text, and just make this follow any path you want.
| | 09:15 | So I'll Undo that a few times just
to get the original textbox back.
| | 09:20 | Delete this right here.
| | 09:21 | So you can see that Fireworks is really
no slouch when it comes to text. It has
| | 09:25 | a whole set of options that compete with
just about any other program out there.
| | 09:28 | I really like the text features.
| | 09:30 | You really use them a lot,
especially when working with mockups.
| | 09:33 | It's good to see that it has a
comprehensive set of features that you can use
| | 09:36 | when working with text.
| | Collapse this transcript |
| Aligning and distributing elements| 00:00 | Fireworks has some great Alignment and
Distribution Tools that make it easier
| | 00:04 | to organize objects to each other to the
stage and even space things in different ways.
| | 00:08 | So let's take a look.
| | 00:10 | If you're really interested in aligning
things, you definitely want to look at
| | 00:13 | the View menu and turn on underneath
the Smart Guides to show Smart Guides.
| | 00:19 | When you're drawing with Smart Guides on,
you can see that as I bring an object
| | 00:23 | close to another object, it finds those
object edges and tries to align them and
| | 00:28 | tries to align them automatically by
giving me these pink little guides that I
| | 00:31 | can use to bring objects together.
| | 00:33 | This is almost the perfect tool to align things.
| | 00:35 | Unfortunately, it's not going to able to
distribute the spaces in between things
| | 00:38 | evenly, and sometimes it's not perfect,
| | 00:40 | especially if you've got objects that are
maybe a pixel off to one side, and what
| | 00:45 | happens then is it will kind of get
confused as to which object you want to
| | 00:49 | align with, so that can be a little bit tricky.
| | 00:52 | So there are a few tools
available in the Modify menu.
| | 00:56 | So if I select some objects here and
go to Modify menu and you can see that
| | 01:00 | under Align, there are a few options
here, Align to the Left, Vertical Center.
| | 01:05 | So Left align aligns the objects to
the left-most objects, and that's kind of
| | 01:09 | important to look at.
| | 01:10 | So I'm going to grab these, kind of
position them like this and go to the Modify
| | 01:14 | menu, Align and say Align to Left.
| | 01:17 | Notice that they are all going
to move to the left-most object.
| | 01:21 | Same thing if I align to the right, if
I go Modify > Align > Align to Right,
| | 01:26 | then it's going to move
them to the right-most object.
| | 01:28 | And in the case of centering, it's
going to just find the center of all of them
| | 01:33 | and move them towards each other,
average kind of the centers of all of them and
| | 01:36 | bring them together.
| | 01:37 | Same thing happens when you use the
Top, Center Horizontal, and Bottom.
| | 01:42 | You can choose the Distribute Widths and
Heights, and this menu is okay, but it's
| | 01:46 | not really the best way to do this.
| | 01:47 | It's actually a whole Align panel that
you can find by going to the Window menu
| | 01:52 | and then finding the Align
Option here which is right down there.
| | 01:56 | This tool has a few extra options,
and it's really the best place to align
| | 01:59 | because it has the most flexibility.
| | 02:01 | So let me move this back in here, and I
can show you some of these options.
| | 02:05 | So if I select some objects like this,
actually this is right now a grouped object.
| | 02:10 | So let me go ahead and ungroup it.
| | 02:12 | I'm going to do Command+Shift+G, it
will be Ctrl+Shift+G on a PC, and I'm going
| | 02:17 | to kind of offset these a little bit.
| | 02:19 | So I'll select these three objects
and I can align these to the left edge,
| | 02:24 | again it does the same things, moves
all the objects toward to the leftmost
| | 02:28 | object, and Undo that.
| | 02:30 | Align to Center, so it's going to
average their centers or Align to Right, it's
| | 02:34 | going to do the same thing align
everything to the rightmost object.
| | 02:37 | You can also align to the top edge.
That's useful if you have something like this.
| | 02:42 | Click, click, click, and Align to the
Top edge move towards the topmost object,
| | 02:49 | Align to the Center averages all the
centers of all the objects, and Align to the
| | 02:53 | Bottom moves everything
towards the bottommost object.
| | 02:57 | Distributing just means bringing the
spacing in between the objects to be the
| | 03:01 | same, so you could go ahead and
hit Distribute Horizontal Center.
| | 03:04 | So if you click on any of these tools
it's going to leave the leftmost and the
| | 03:09 | rightmost object in their own spots.
| | 03:11 | So I'll move this like here.
| | 03:13 | So if I click on these three and I do
this Distribute Horizontal Center, it will
| | 03:17 | leave the left and the right objects in
the same place and move this one towards
| | 03:21 | it, and the same thing Distribute Right.
| | 03:24 | These right now, because these
particular shapes are the same exact size, this
| | 03:28 | is not going to make a huge difference.
| | 03:29 | But if they were different size
shapes, some of these tools might make a
| | 03:32 | little bit of difference as to whether you
distribute to the right edge, to the left edge.
| | 03:36 | But because these are 90 pixels by 90
pixels wide little bitmaps, it's not going
| | 03:40 | to make a big difference there.
| | 03:42 | This is really cool down here.
| | 03:43 | You can match to the size of an object.
| | 03:46 | So say that you've got these three
objects and I'm going to go ahead and group
| | 03:49 | them like I had them before.
| | 03:50 | So Command+G or Ctrl+G on a PC and I
want to draw maybe a little bar, a little
| | 03:55 | design element over here to the
left, and let's give that a color.
| | 04:01 | I messed up, and I didn't make it the
exact height of this object, so I can
| | 04:05 | select this group right here and this
object and tell it that I want it to match
| | 04:09 | this height of the object, and it's
going to pick the tallest object.
| | 04:13 | When I click on it, it's going to match
the shortest object to the tallest object.
| | 04:17 | And that brings me to another point.
| | 04:19 | Sometimes you want to group things to
make sure that the objects that are being
| | 04:22 | compared are the group, not the
individual elements, because if I undid this and
| | 04:27 | just go ahead and ungroup them.
| | 04:29 | So Command+Shift+G, ungroup them, and
select this and I said Match height, then
| | 04:35 | it's going to try to match the height
of each one of these individual pictures
| | 04:38 | to the longest thing, which
is this element right here.
| | 04:41 | It's not really what we wanted, so
definitely when you're doing distributing or
| | 04:45 | aligning you definitely want to group
things when you want to compare things to
| | 04:49 | a specific group of elements.
| | 04:52 | So this is actually pretty cool.
| | 04:53 | Match Size, I haven't really
seen this in a lot of programs.
| | 04:56 | So I could click on this and click on--
let's go ahead and make this one smaller.
| | 05:00 | I'm going to make this and do that
and I can match both of these sizes.
| | 05:04 | Now I know these are exactly the same
size, I can align them to the top, and
| | 05:08 | there I have a box that's exactly the
same size as this element right here.
| | 05:12 | The other thing that you could do is
Space evenly horizontally or vertically and
| | 05:16 | that's kind of cool, almost
like a distribute right now.
| | 05:19 | Let me Undo these objects, so again,
Command+Shift+G. So I can grab these
| | 05:24 | elements, and say that I want to
distribute evenly between these objects, exactly
| | 05:28 | like a distribute, it just
moves them towards each other.
| | 05:30 | You might be asking, "Why would I want to
do that?" Well, there is an option right
| | 05:33 | here where you can actually type in a
pixel size, so you could say I want to
| | 05:36 | space these objects so that they have
15 pixels in between each of the objects
| | 05:41 | and they were already, I think 15 pixels,
so you didn't see anything happening.
| | 05:45 | So I'm going to select them again.
| | 05:47 | And I'll do this, and
then I'll Space them evenly.
| | 05:53 | They are spaced evenly, but now they
have exactly 15 pixels in between, and that
| | 05:56 | can be really useful when you're trying
to make a grid of a very specific size
| | 06:00 | for any particular design that you're making.
| | 06:02 | So you space something evenly to a
specific pixel size right here, either
| | 06:07 | horizontally or vertically, that's super useful.
| | 06:10 | One last thing you might want to do
is center something around the stage.
| | 06:14 | So right now this little box right here says
Center Everything Relative to Another Object.
| | 06:19 | And I have two objects, everything is
going to be done relative to those objects.
| | 06:23 | I want to center this group of
pictures on the page, and what I want to do
| | 06:26 | is select all these pictures, I'm going to
hit Command+G or Ctrl+G on a PC for grouping.
| | 06:31 | Then I can turn this button on and
it's going to say now Relative to Canvas.
| | 06:35 | Now when I click Align to the Center,
it's going to align that object to the
| | 06:38 | center of the canvas.
| | 06:40 | When I click on this, it's going to
align everything to the center of the canvas
| | 06:44 | vertically in this case.
| | 06:45 | So these two tools will allow you to
center things to the canvas, and everything
| | 06:50 | else will work in relation to the
canvass when you have this extra little button
| | 06:53 | on, that can be actually quite useful sometimes.
| | 06:56 | So the Align panel is so
simple and straightforward.
| | 06:59 | If you notice it's one of the only panels
that doesn't even have an Options Pop-Up.
| | 07:02 | What you see is pretty much what you
get, and it's super useful when you're
| | 07:05 | creating space and
relationships between objects.
| | Collapse this transcript |
| Transforming objects| 00:00 | Scaling and transforming are common
tasks when preparing web graphics.
| | 00:05 | So let's take a look at of some of
the options you have at your disposal.
| | 00:08 | So the first tool you might
want to use is this Transform tool.
| | 00:10 | This is a multipurpose tool.
| | 00:12 | It's called the Scale tool here, but
when you click on it you could see that it
| | 00:16 | allows you to do a number of transformations.
| | 00:18 | First one of course is scaling, if you
just click on an object to make it bigger.
| | 00:22 | You can click and drag it on anyone of
these edges to make the object wider or taller.
| | 00:28 | If you notice when I put my mouse
close to the object, sometimes I get these
| | 00:32 | rotation handles that means that I
can click and drag to rotate the object
| | 00:35 | around its center point.
| | 00:37 | So let me click on that again, and
notice that in the middle of the object I
| | 00:43 | also have a Registration point, and any
of these Scaling Tools or any of these
| | 00:47 | Transformation Tools going to move
this Registration Points so that things
| | 00:51 | rotate or skew or move according to that point.
| | 00:53 | So now when I rotate I'm moving in
relationship to where this point is right
| | 00:57 | here and I can move that by just
clicking and dragging it to whatever corner I
| | 01:02 | want to rotate or move from.
| | 01:04 | So if I click and rotate here, I will
rotate around that point, and I'm undoing
| | 01:09 | right now to get back to the original
position here, so Command+Z or Ctrl+Z on a PC.
| | 01:14 | There is also a Skew tool.
| | 01:16 | You can get to like this, and the Skew
tool just allows you to skew things to
| | 01:21 | the right or to the left.
| | 01:23 | Again, you can move the Registration Point,
and that adjusts to that
| | 01:27 | Registration Point.
| | 01:28 | When you want to apply any of these
transformations, just double-click in the
| | 01:32 | center and that transformation will be applied.
| | 01:34 | So I'm going to Undo that,
Command+Z on a Mac, Ctrl+Z on a PC.
| | 01:39 | Then you have the Distortion Option
here and that just lets you grab some of
| | 01:44 | these corners and distort them like
if you were stretching a rubber band.
| | 01:48 | Double-click to apply, same thing with
the Registration Point, see that that is
| | 01:52 | a dramatic transformation when you skew things.
| | 01:57 | Some of these options are also
available under the Modify menu.
| | 02:01 | You could see that there is a Transform Sub
menu here, and there's a number of options here.
| | 02:06 | There is one called Free Transform.
| | 02:08 | That is essentially the Scale tool,
so if I choose that, then I can do
| | 02:12 | everything that I can do with the
Scale tool, and you might want to learn the
| | 02:15 | Command key for that.
| | 02:16 | It's really common to just use Command+T
to get to that multipurpose Transform tool.
| | 02:21 | So Command+T, and then I can stretch
things out, rotate them, and move them
| | 02:26 | around in anyway that I want.
| | 02:27 | I still have the Registration point,
that doesn't have to be on any particular
| | 02:31 | corner, it can be anywhere so I can
rotate around at this point now and
| | 02:36 | double-click to accept my changes.
| | 02:39 | You can also go to the Modify >
Transform menu here and choose a Numeric
| | 02:44 | Transform, which will give you a lot of options.
| | 02:46 | So you go to any of these types of
transformations and do things numerically.
| | 02:50 | So I'll Scale or Rotate, and say
Rotate, and then you can type an angle.
| | 02:55 | So I'm going to rotate this 90 degrees,
then I'm going to say OK and it just
| | 02:59 | rotates that graphic numerically.
| | 03:01 | Sometimes you want to be able to type
the numbers exactly on a transformation so
| | 03:06 | that how you do that.
| | 03:06 | So these are pretty easy to use, most
of the time you just hit Command+T or
| | 03:10 | Ctrl+T to get to this menu, so make
sure you learn that keyboard shortcut.
| | 03:15 | But between these Transformation
Tools and the Menus, you can transform any
| | 03:19 | object to just about any shape you want.
| | Collapse this transcript |
| Moving, cloning, and duplicating| 00:00 | A common task when drawing is to Move,
Clone, and Duplicate objects, and
| | 00:05 | Fireworks makes that really easy to do.
| | 00:06 | So let's take a look.
| | 00:08 | I'm going to go ahead and create a new
document here, 900x500 pixels, hit OK.
| | 00:13 | And I'm going to make myself a little
grid of images, so I'm going to click on
| | 00:17 | this Rectangle tool right here and
I'm going to click and drag a rectangle.
| | 00:21 | I'm not really going to be picky about
what size it is right now because I'm
| | 00:24 | going to go to the Properties panel
and just make it exactly 90 pixels by 90
| | 00:29 | pixels and hit the Enter key.
| | 00:31 | That way I know that it's
exactly the shape that I want.
| | 00:33 | So you can move an object by just
clicking and dragging on it with either the
| | 00:37 | Selection tool or the Sub-selection tool.
| | 00:39 | The Sub-selection tool lets you
edit the corners of an object.
| | 00:43 | Try to edit the corner of a rectangle.
| | 00:45 | It's always going to give you this
dialog box because a rectangle needs to
| | 00:48 | turned into a Vector Shape.
| | 00:50 | So I'll hit OK, which will lose the
corners option underneath the shape of the
| | 00:55 | object, but we'll be able to
reshape this object now how we want.
| | 00:59 | So if you click and drag an object, you
can move it around the stage. If you hold
| | 01:02 | down the Shift key, you'll only be able
to move that object in 45-degree angles.
| | 01:07 | So I can move this around 45-degree angles.
| | 01:11 | You can also move an object by using the
Arrow Keys, so if I tap on the arrow to
| | 01:14 | the right, it's going to
move it one pixel to the right.
| | 01:17 | If I tap on the Arrow Up it will move it one
pixel up and to the left and to the bottom.
| | 01:21 | If I hold down the Shift key when I do
that it moves, it in 10 pixels increments,
| | 01:25 | so sometimes you want to get somewhere a
little bit quicker than pixel by pixel,
| | 01:29 | so adding the Shift key to the
Arrows moves it little faster.
| | 01:32 | Of course, we already saw how in the
Properties Inspector we can reshape
| | 01:36 | things to a specific size.
| | 01:38 | We can also position them to a specific X
and Y position by typing in a value right here.
| | 01:44 | Whenever you want to make a copy of an
object, you can go to the Edit menu and
| | 01:47 | select Duplicate and that makes a copy
of an object, 10 pixels to the right and
| | 01:53 | 10 pixels down from its previous position,
so you could that and move it over to
| | 01:57 | the side if you want to.
| | 01:59 | Nice to have Smart Guides on, so if you
don't have them already, go to the View
| | 02:03 | menu and under Smart
Guides, make sure those are on.
| | 02:06 | I also like to have this tool Tips
option on because as I am moving it, it's
| | 02:09 | going to tell me an X and Y position
right underneath the pointer, and as I am
| | 02:14 | drawing or resizing, it's going to show
me the dimensions of the of the object
| | 02:18 | I'm drawing right underneath.
| | 02:19 | So those are really useful to have
whenever you're doing anything. They can be a
| | 02:23 | little obnoxious if you're really trying to do
precise work, so you can turn them on and off.
| | 02:28 | Another option is to go to
the Edit menu and select Clone.
| | 02:31 | If you do that, the object will be
placed right on top of the other object.
| | 02:35 | If we look at the layers palette,
you can see that we've got another copy
| | 02:38 | of this object, so we can move that to the
right if we want to and let go right here.
| | 02:43 | You can also make a clone of an
object by holding down the Option key while
| | 02:48 | you're dragging the original, and that
makes a copy of that object as well.
| | 02:52 | So if I can keep on doing that, holding
down the Option key, I can drag myself
| | 02:56 | some additional copies of those objects.
| | 02:58 | And then I can select all of them with
this tool, drag myself a selection
| | 03:02 | rectangle, hold down the Option key
and click and drag down to make myself a
| | 03:06 | little grid of images.
| | 03:07 | Now this is when the Alignment Tools
become really handy. Sometimes Fireworks
| | 03:12 | has a hard time kind of aligning things
perfectly so you can use the Alignment
| | 03:17 | Tools to bring these things in by
spacing them a certain width from each other.
| | 03:21 | I'll turn this Relative to Canvas off.
| | 03:23 | I'm going to put 15 pixels--that's
what this means right here--in between the
| | 03:26 | objects and make sure that these are
aligned properly, and I'll just delete
| | 03:30 | these because I know these are perfect.
| | 03:32 | I'll select this, and then I'll group it,
and then I'll Option-click and Drag to
| | 03:38 | make a copy right here.
| | 03:39 | And whenever I want to make another
duplicate of an object with the same
| | 03:44 | offset as the previous object, I can
hit the Command+Y button, and that does a
| | 03:50 | transformation that's exactly like the
last transformation that I have just done.
| | 03:54 | So if I keep on clicking Command+Y,
or Ctrl+Y on a PC, it's going to keep
| | 03:58 | on making copies of this group of three
objects at the same offset as I had previously.
| | 04:03 | So let me Undo one.
| | 04:05 | So now that I have three groups of
three objects, I can select them and make
| | 04:10 | sure that I space them 15 pixels evenly,
and now I have an object that's exactly
| | 04:15 | the size that I need.
| | 04:18 | Now this looks pretty good.
I am noticing just a little bit of a problem.
| | 04:21 | It looks like something is not right
here because this should be 300 pixels by
| | 04:26 | 300 pixels, instead they are 302x303.
That means that some of these objects
| | 04:31 | aren't quite aligning perfectly.
| | 04:33 | So I'm going to ungroup this right
here, and I'm just going to click on these
| | 04:37 | objects, make sure that
they are Aligned to the top.
| | 04:40 | Take a look right here.
| | 04:41 | You can see that it says 300x91.
These should be 300x90.
| | 04:46 | You make sure that they
are aligned to the top edge.
| | 04:49 | Okay, so now they are perfectly aligned.
| | 04:51 | So this is a good place to go when
you're trying to make something perfect.
| | 04:54 | It's 300x90, so it looks like one of
these objects was offset just a little bit
| | 04:59 | when I duplicated it.
| | 05:00 | So I'll just go ahead and delete these
other ones and then select these again.
| | 05:05 | So I'm going to do Command+G. When I
group them I see that they are exactly
| | 05:09 | 300x90, and then I'll Option-click and drag.
| | 05:12 | So on holding down the Option key, you
can add the Shift key if you want to make
| | 05:15 | sure you constrain them to
straight line movement here.
| | 05:19 | And then I will let go, and then
I'll hit Command+Y again, makes another
| | 05:24 | copy and just to make sure, select all these,
15 pixels in between, click on this right here.
| | 05:30 | It looks like I had it just perfectly,
and I can tell down here that the Width
| | 05:33 | and Height of all the
objects together is 300x300 pixels.
| | 05:37 | So now I know that this particular
grid is perfectly aligned and perfectly
| | 05:41 | spaced evenly by using a lot of these
tools like Movement and the Alignment panel.
| | 05:47 | By far my favorite way to clone
is Option-dragging on objects.
| | 05:51 | I usually use the Transform Again Command,
which is Command+Y or Ctrl+Y on a PC,
| | 05:56 | and I definitely do this in conjunction
with the Alignment Panels often when I'm
| | 05:59 | doing these kind of grids just to
quickly make sure that everything is
| | 06:02 | perfectly matched and perfectly aligned.
| | Collapse this transcript |
| Reshaping with the Path panel| 00:01 | So, Fireworks has an excellent panel
that is the 800-pound gorilla of path, and
| | 00:05 | object management and
it's called the Path panel.
| | 00:08 | It's full of options for modifying
your shapes, so let's check them out.
| | 00:11 | If you don't already have the Path
panel up, go to the Window menu and go
| | 00:14 | towards the bottom of the screen
and look for the Path panel right here.
| | 00:19 | So you can see the Path panel is
divided into Combine Paths, Alter Paths,
| | 00:23 | Edit Points, and Select Points.
| | 00:25 | You're probably going to
use Combine Paths the most.
| | 00:27 | Combine Paths is just a way of taking
two different shapes and making them into
| | 00:32 | maybe a single shape or finding
different relationships between the two shapes.
| | 00:37 | So I have these two
buildings as separate shapes.
| | 00:39 | If I click on Union Paths, it's going
to make it just into one single shape.
| | 00:43 | Of course, now, my windows are gone.
| | 00:46 | They're really just behind this building.
| | 00:48 | So, what I'm going to do to get them
back is I'll click on this group right
| | 00:51 | here, and I'll hold down the Shift key
and click on the group of buildings back
| | 00:55 | here and then click on the background.
| | 00:58 | I'm still holding down the Shift key,
and then I'll just right-click and select
| | 01:01 | a range, send everything to the back.
| | 01:04 | that way my lights will
now be at the topmost layer.
| | 01:07 | That's kind of cool because sometimes--
let me undo that a few times. Sometimes
| | 01:10 | you get this little kind of
white line in between two elements.
| | 01:15 | So by combining them, you kind
of make them all into one shape.
| | 01:18 | I'm going to redo this.
| | 01:19 | So I am holding down Command+Shift+C,
that redoes, normally undo, and Command+Y
| | 01:27 | or Command+Shift+C will also work.
| | 01:29 | It's Ctrl+Shift+Z on a PC.
So, combining things is really good.
| | 01:34 | Another way that you can fix that issue
with this little line--I know that these
| | 01:38 | shapes are perfectly on top of each
other, it's just that the positioning of
| | 01:41 | this particular shape on the
workspace is so that you get this kind of edge
| | 01:47 | that's not purely straight.
| | 01:48 | So you could do a couple of things.
| | 01:51 | I'm zooming out. So you can try to make
the fills instead of Anti-Alias, Hard fills.
| | 01:58 | In this particular shape, that's going
to work really well, but you're still
| | 02:01 | getting the bad edge maybe
from this shape right here.
| | 02:05 | So what you could do in some instances
is click on a shape and go to the Modify
| | 02:08 | menu and select Snap to Pixel.
| | 02:10 | That will move the shape ove--and I
think it did so in this case. It moved the
| | 02:15 | shape over a little bit so that the edge of
this shape is exactly at the end of that pixel.
| | 02:20 | So, I can click on this one and go to
the Modify menu and select Snap to Pixel,
| | 02:24 | and you'll see that it will
move to a perfect pixel position.
| | 02:29 | You can just keep on doing that with your
shapes until they're all perfectly aligned.
| | 02:34 | So Modify > Snap to Pixel, and it
just scoots it over a little bit.
| | 02:38 | Here now it's leaving even a bigger
gap, so I'm going to click on this, and
| | 02:41 | maybe just use my right-arrow to
scoot it over one pixel to the right.
| | 02:45 | Now it's looking pretty good.
| | 02:47 | But perhaps on this side,
I need to move it over.
| | 02:50 | So even though you might think your
shapes are perfectly positioned, sometimes
| | 02:54 | you have to kind of move everything
manually, and it might just be easier to
| | 02:58 | combine all these shapes
with the Path tool as one shape.
| | 03:01 | So I selected this group of shapes
here, and I have the Sub-selection tool.
| | 03:06 | I'm going to click right on this
point right there and the point down here,
| | 03:11 | and then I am just going to hit the
left-arrow to move that over a pixel and
| | 03:15 | that looks a lot better.
| | 03:18 | But sometimes, if you don't want to
mess with that, just combine all the shapes
| | 03:19 | as a single shape, so I can grab all of
these elements that are buildings and
| | 03:23 | just come over here and Combine Paths,
hit Union Paths, and it mix it all into
| | 03:29 | a single shape which is kind of nice.
| | 03:31 | It looks like maybe here, my
shapes weren't on top of each other.
| | 03:34 | So let me undo that and what I'll
do then is I'll click on this one,
| | 03:39 | Sub-selection tool, click on these
points, Shift-click on that one, maybe right
| | 03:45 | there, the left-arrow, just so that
I know that they're overlapping now.
| | 03:49 | So I can click, Shift-click, Shift-click
on all these other buildings, and then
| | 03:55 | I can hit Union Path, and now that's one shape.
| | 03:59 | I can see that there is no little
holes anywhere, and then I'm going to
| | 04:03 | Shift-click on this group of
buildings back here and this background,
| | 04:07 | right-click, Arrange > Send to Back,
and now we have one nice shape that we
| | 04:13 | don't have to worry about the
edges and everything is looking good.
| | 04:16 | So you can do other things here.
| | 04:17 | One of the ones you might
look in to is punching a path,
| | 04:20 | so making a hole on one path with another path.
| | 04:23 | It creates a compound shape.
| | 04:25 | So if you hit this Punch Paths, now
you're making this shape with a hole of this
| | 04:30 | little square right here.
| | 04:31 | So those are the two shapes that I had selected.
Let me zoom in so you could see it better.
| | 04:35 | So I have this entire building group,
and I have one of these rectangles chosen.
| | 04:40 | So if I go to Punch Paths, it's going
to make a hole with this rectangle on
| | 04:44 | to the bigger shape.
| | 04:46 | So let's see, Punch Paths right there and
now this is actually a see-through shape.
| | 04:51 | So let me move it around, so
you could see what's happening.
| | 04:53 | So I should be able to see
through this back building.
| | 04:57 | So that window is actually see-through now.
And that's sometimes what you want.
| | 05:00 | There's a lot of different
ways you can work with paths.
| | 05:03 | So let me just draw a couple of paths here.
| | 05:05 | So I'll draw this path and I'll make
myself a circle or an ellipse, and I'll
| | 05:11 | call that a different color and I'll
select both of them, and we can just kind
| | 05:15 | of go through some of these.
| | 05:17 | It's going to join the paths, but look
it actually created a couple of different
| | 05:20 | shapes out of those two paths.
| | 05:23 | Let me see if I can select.
| | 05:25 | So it actually just split the
paths, joined them together.
| | 05:29 | There are still two different paths,
it's just that they're joined together and
| | 05:32 | the intersection becomes a little hole, a
little punch-through hole that you can see through.
| | 05:37 | This next tool right here will
actually take those two paths, and split them
| | 05:41 | back apart so that they're two paths
again. It colored them all the same color, but at
| | 05:45 | least it allowed me to get to
the individual shapes again.
| | 05:48 | So, let me make this red again
and try some of these other ones.
| | 05:55 | Of course, you've already seen Union
Path, it just combines the two paths and
| | 05:58 | makes them into a single shape, and
then there is the Intersect Paths which
| | 06:02 | gives you the intersection of these two paths.
| | 06:05 | I already showed you Punch. And then
Divide Paths gives you a couple of little
| | 06:09 | paths out of the one path that you had.
| | 06:13 | Exclude Paths is going to
pretty much do the same thing.
| | 06:15 | Really, a lot of times this depends on
the two shapes that are overlapping and
| | 06:19 | what they're doing at the moment.
| | 06:21 | So sometimes, some of these look like
they do the same thing but they're not
| | 06:24 | really doing exactly the same thing.
| | 06:26 | So play around with them, the Punch
is probably one of the most useful, the
| | 06:31 | Union is probably also the next most
useful, and in addition to that, there's
| | 06:35 | all these other options for altering a path.
| | 06:37 | So, you could see that we can,
for example, try to simplify paths.
| | 06:41 | Now, if I simplify any of these shapes,
I am not going to really do that much.
| | 06:44 | So I'm going to go to the Vector
Drawing tool here, to the Vector Path tool
| | 06:48 | underneath the Pen tool, and I'm going
to draw a shape because this really does
| | 06:51 | create a lot of points when you draw with this.
| | 06:54 | So I'll make it thicker so you could
see it better, and let me go a little
| | 06:59 | slower, because the slower
you go, the more points it adds.
| | 07:03 | So let me draw some sort of shape right there,
sort of slow so that adds a lot of points.
| | 07:08 | There you go!
| | 07:09 | So with these tools, you can
change the way the paths are drawn.
| | 07:13 | This particular point is useful,
especially for when you draw things with this
| | 07:17 | shape or use any of these tools.
| | 07:19 | These tools right here, the
reshaping tools, really add a lot of points.
| | 07:23 | So if I do this to any one of these
shapes, sometimes it adds a lot of points,
| | 07:29 | so I guess not really
doing it right now of course.
| | 07:30 | Let's see. We'll use the Redraw Path tool.
Now I know that one sure adds a ton of points.
| | 07:37 | So I will kind of reshape this path
here, and you can see that we've got a
| | 07:41 | bazillion points when we try to
reshape that area right there.
| | 07:44 | So what I'll do is I'll click on this
right here to simplify this path, and bam!
| | 07:48 | You see how it just gave me a lot
less points there, and I can control the
| | 07:53 | amount of simplification it's doing with
this slider here, so a lot or just a little.
| | 07:59 | The path does changes sometimes
dramatically when you simplify things a lot,
| | 08:04 | but I know that when you draw with this
tool and you try to reshape it, it does
| | 08:07 | create so many points that sometimes you
just want to be able to create a simpler shape.
| | 08:12 | Another really useful one
is Convert Strokes to Fills.
| | 08:15 | So if I click on this, it's actually
going to outline my stroke which can be
| | 08:20 | useful sometimes when you're working
with strokes, and you want to make them
| | 08:24 | fills because maybe you want to add
some sort of gradient or something that's
| | 08:27 | not available to strokes, some
patterning or some of kind of effect that you
| | 08:31 | can't apply to strokes.
| | 08:32 | Sometimes this is a great way of
getting the actual shape of the stroke without
| | 08:36 | having to have a line there.
| | 08:37 | So those are quite useful.
| | 08:39 | A lot of other ones right here.
There's a really cool Extrude Paths.
| | 08:43 | So let's try that one out with this circle.
| | 08:45 | We'll hit this Extrude Paths, and this
is one that you really want to have an
| | 08:51 | outline to your shape because you
could see that it's a 3D extrusion of your
| | 08:55 | original, but you can't really see it
very well until you add yourself a color
| | 09:01 | here, and sometimes it
resets as you're modifying it.
| | 09:04 | So you could see that we
can add some taper to this.
| | 09:11 | You could pretty much see what
each one of these options do.
| | 09:14 | This is a really cool way of getting some
3D shapes really quickly with Fireworks.
| | 09:21 | So, the Edit Points I find a little less useful.
| | 09:24 | It allows you to choose points or modify points.
| | 09:27 | I like this tool right here,
sometimes. It's called Fillet Points.
| | 09:30 | What it does is it rounds the edges.
| | 09:33 | Some of these tools in the Path
panel are almost a little experimental.
| | 09:38 | They don't exactly have an interface,
that's because Flash has a really cool
| | 09:43 | API for creating these.
| | 09:45 | You can create all kinds of things in
Flash, and add panels to Flash yourself if
| | 09:50 | you understand the API.
| | 09:51 | But sometimes some of these
tools won't get an awesome interface.
| | 09:55 | So this allows you to convert a
corner to a rounded edge by just typing in
| | 10:00 | a number right there.
| | 10:01 | You could see that it did it right here.
| | 10:04 | The shape now has rounded edges instead of
straight edges that it used to have before.
| | 10:09 | So there it is, I undid,
and let me do that again.
| | 10:14 | So I've got this, there it is,
straight and I'll click on it again and I'll
| | 10:20 | go back to the Fillet.
| | 10:21 | I'm not exactly sure why, there must be
a fishing thing why they call it Fillet.
| | 10:26 | So I'll click on 5 corner radius, hit
it, wait a minute, and there it goes!
| | 10:31 | It rounded the edges.
| | 10:32 | That can be really useful, although it
doesn't have a great interface, sometimes
| | 10:36 | Fireworks updates the interfaces of
these, so I know that a couple of these
| | 10:40 | tools were changed in the last
version to have better interfaces.
| | 10:44 | So I look forward to some of these being added.
| | 10:46 | And sometimes you'll see that Flash
has some tools like these tools right here
| | 10:53 | that are just for selecting
different points of objects.
| | 10:57 | So you could see that as I click, I can
click on--just select the bottom points
| | 11:01 | or just select the top points of the shape.
| | 11:03 | Now, it's selecting the top points.
| | 11:05 | I'm not sure that's horribly useful.
| | 11:07 | Something good to play around with, but
I don't think anything that you're going
| | 11:10 | to be using all the time.
| | 11:11 | A lot of these are pretty cool.
| | 11:13 | I would definitely recommend
playing around with some of these.
| | 11:16 | They are really, really cool sort of
experiments--nothing that you use all the time.
| | 11:21 | You will love the Combine Paths.
Altering Paths can be useful.
| | 11:26 | The Extrude is to me really cool,
because sometimes I do want to get a 3D
| | 11:29 | shape very quickly.
| | 11:31 | Some of these End Points are things
that you're going to play around with but
| | 11:34 | maybe never use, and the Select Points, I'm
not sure that I would ever use those myself.
| | 11:39 | Some of these options are also
available in the Modify menu under Modify.
| | 11:45 | So under Combine Paths, you
can choose to Join, Split, Union.
| | 11:49 | Some of these even have shortcuts.
| | 11:51 | Joining things is something you do
super commonly, so you can try to join and
| | 11:54 | split shapes together, and there are a
few of them right here, I find that using
| | 11:58 | the Path panel is actually a better
way because you have a visual way to see
| | 12:03 | what the shape is going to do when
you click on some of these shapes.
| | 12:05 | So, I love the Path panel, use some of
it a lot, some of it very little, but all
| | 12:11 | that is really, really
interesting stuff to work with paths.
| | Collapse this transcript |
| Masking objects| 00:00 | Fireworks has a lot of
different ways that you can make Masks.
| | 00:04 | Masks allow you to temporarily
hide objects with shapes or vectors.
| | 00:08 | And in a vector mask, a vector object-like
circle or square or any other shape
| | 00:14 | cookie-cutters another object or photo.
| | 00:16 | So, we're going to use a circle
right now to create a simple vector mask.
| | 00:20 | So I've chosen the Ellipse tool,
and I'm going to drag a circle.
| | 00:24 | By holding down the Shift key, I
constrain the shape so that it's perfect circle.
| | 00:28 | Once I got that shape, I can
position it where I want to cut the object.
| | 00:32 | I'm going to go to the Edit menu,
select Cut, click on my object that I want to
| | 00:39 | cookie-cutter and then go back
to Edit, select Paste as Mask.
| | 00:42 | So you can see that my object is now in
the shape of this circle and the rest of
| | 00:49 | the background is now transparent.
| | 00:50 | As soon as you create a vector shape
like this or a vector mask like this, you
| | 00:55 | can see that there are a few
options in the Properties palette.
| | 00:58 | So one of them is to either mask with
the path outline or the grayscale value of
| | 01:04 | whatever shape I use to create the mask.
| | 01:05 | So if I click on this, you'll see
that this photo is now very transparent
| | 01:10 | because it had a very dark color.
| | 01:12 | If I switch to something that's
lighter, I can see more of the object.
| | 01:15 | So it's still a little transparent,
but I can see more of the object through
| | 01:19 | depending on the color.
| | 01:20 | Of course, I can use a gradient and with
a gradient, let's go from white to black.
| | 01:25 | You can see that it's using
that Grayscale value here.
| | 01:27 | With a gradient, I can of course pick
on these edges and move them around,
| | 01:32 | change the angle and the direction of
the gradients and move this thing around
| | 01:35 | to really control my
transparency with a lot of detail.
| | 01:40 | Once you double-click or you click
somewhere else, you deselect this Mask.
| | 01:45 | To get the Mask shape back, you can do
a couple of things, because if I click
| | 01:49 | right now, it's going to select this object
that is the original bitmap with the Mask in it.
| | 01:54 | So if I click on the Sub-selection tool
and I click on this edge of this image,
| | 02:00 | then I'll click just on the Vector
Shape and I have all my options back.
| | 02:04 | The other way that you can get to
these is by going to the layers menu.
| | 02:07 | You can see that there are two
different sort of images here,
| | 02:11 | so previews for this layer.
| | 02:12 | If I click on this one, I'll be
selecting the Bitmap and I have some
| | 02:16 | Bitmap options here.
| | 02:17 | If I click on this one, I can select
just the vector mask, and I can mess around
| | 02:22 | with the properties of that.
| | 02:23 | So I can feather my Mask if I want to,
just go to Feather here, and just apply
| | 02:28 | amount of Feather that
just gives it a soft edge.
| | 02:30 | You can see it more at the very top
of the photo, just a little soft blend
| | 02:34 | into the background.
| | 02:36 | Go back to Anti-Alias here.
| | 02:40 | If I want to move the photo inside
the Mask, that's a little bit tricky.
| | 02:43 | But if you click on this Pointer tool
and just click on the Bitmap itself,
| | 02:47 | there's a little registration point
that appears right here, and if you're very
| | 02:51 | careful and you click that, you
can move the shape inside the Mask.
| | 02:55 | Notice that sometimes
that doesn't work perfectly.
| | 02:57 | A lot of times like you'll try to click
on this point, and you'll move the whole
| | 03:00 | thing just like that.
| | 03:01 | Sometimes you just have to be
persistent and a little bit patient, and
| | 03:05 | hopefully, you'll be able to
click and move that Mask around.
| | 03:08 | Go back to my Mask options,
click on this outline.
| | 03:13 | If you're masking only by the Path
Outline, I'll click on that, you can show the
| | 03:17 | original Fill and Stroke
like this of this object.
| | 03:21 | So, I've been showing a little bit of that
gray gradient that I have going on right now.
| | 03:24 | If I choose to just outline with the
path and then show the Fill and Stroke.
| | 03:29 | So, a lot of different options here.
| | 03:33 | If you go to the Layers panel, you
can also turn this link off right here.
| | 03:37 | This link allows you to
move the shape separately.
| | 03:39 | So if I click this link off and I
click on this Bitmap part, then I should be
| | 03:45 | able to move just the Bitmap without moving the
vector mask, and if I click on this right here--oops!
| | 03:51 | I turned the link back on,
I have to click on this.
| | 03:53 | You could see the blue there, a little green outline
on the Mask, and the blue outline on the Bitmap.
| | 03:57 | So if I click on that, I should be
able to more easily move just the
| | 04:01 | Vector Shape around.
| | 04:02 | Also, I can use any of the
Transformation Tools to transform my vector mask, so
| | 04:07 | I can make my Mask smaller and
position it wherever I want, as soon as I have
| | 04:12 | only this selected right here.
| | 04:15 | But they're usually links, so I'm
going to click on the link, and now when I
| | 04:19 | click on, click off somewhere to
deselect, click on this object, they're
| | 04:22 | going to move together.
| | 04:23 | If I want to get rid of a Mask, all I
have to do is just drag the Mask, a little
| | 04:29 | preview here on to the Trash and it's
going to say, do you want to apply the
| | 04:33 | mask before removing?
| | 04:35 | I don't want to apply the Mask.
| | 04:36 | I'm going to hit Discard, and that
gets me back to my original Bitmap object.
| | 04:40 | There's another way of creating a Mask.
| | 04:42 | It's sort of the reverse of this one.
| | 04:44 | So I'll draw my shape, but this time
I'm going to click on this object on the
| | 04:47 | Bitmap itself, and I'm going to go to
the Edit menu, select Cut, click on my
| | 04:53 | shape and go to the Edit
menu and select Paste Inside.
| | 04:56 | This is kind of the reverse, you're
pasting the Bitmap into the shape.
| | 05:00 | It doesn't have to be Bitmaps, it can
be a complex group of elements, it can be
| | 05:04 | any sort of group of elements--vector
elements or bitmap elements--and you can
| | 05:09 | paste them inside other objects.
| | 05:10 | So it really doesn't matter which way you go,
either way is fine.
| | 05:14 | Sometimes you'll find that one
will be better than the other.
| | 05:17 | You can still click on this Bitmap
and get to all these vector mask Options
| | 05:21 | right on the Properties panel.
| | 05:22 | Okay, so I'm going to delete this, and
I'll show you--I'll discard this--and
| | 05:28 | I'll show you how to do text.
| | 05:29 | You can actually use text as Masks as well.
| | 05:31 | So click right here, this guy's name is Barot.
| | 05:37 | Move this to where I want it, and
I'll grab just his eyes, select.
| | 05:41 | Well, I'll go ahead and cut it, click
on the Bitmap, Edit > Paste as Mask, and
| | 05:47 | now I've got that shape of
the text masking the element.
| | 05:52 | If you click on the Text tool, and you
click on the text itself, you are still
| | 05:56 | going to be able to use some of the Text Tools.
| | 05:59 | Sometimes, you'll not be able to see say
the font size and all that stuff, but I
| | 06:03 | can still hold on the Command key and
hit the left-arrow to control my tracking,
| | 06:08 | and my kerning, the spacing between the letters.
| | 06:12 | So, I probably want this
text to be a little darker.
| | 06:17 | Actually, I need to click on
grayscale first and make sure I paint with--
| | 06:22 | The text is super opaque. So pretty cool.
| | 06:26 | You can use text just as well as you
can use any other kind of shape and the
| | 06:30 | text still remains editable.
| | 06:31 | So, maybe I change his name
to Byrot, or put back to Barot.
| | 06:37 | So you can also have Bitmap Masks.
| | 06:40 | Let me go ahead and delete this mask and
select Discard again, and I can grab an
| | 06:48 | element and actually add a mask
by hitting this button right here.
| | 06:52 | So I'll add the mask, and this is a
Bitmap Mask, which means you can use the
| | 06:55 | Bitmap Painting Tools and
start painting on your image.
| | 06:58 | I'll make my brush a lot bigger.
| | 07:01 | Then I can start painting
transparency much like you can do in Photoshop.
| | 07:04 | You can paint some transparency, and
that way you can kind of get rid of maybe
| | 07:08 | the edge of the shirt to give him a
better sort of knock out, shaped as
| | 07:13 | background, so I am going
to make it a lot bigger.
| | 07:15 | This is going to take me forever if
I do it like this. So there you go!
| | 07:19 | You can really kind of work around his hair.
| | 07:22 | So I'm painting right now.
| | 07:23 | You can see the shape appear right here.
| | 07:25 | I'm painting with black.
| | 07:27 | If I paint with white, I will
show more of his photo back again.
| | 07:30 | So if you screw up, you can go paint
back whatever you deleted with white.
| | 07:33 | So if you're familiar with the way Photoshop
Masks work, these are exactly the same thing.
| | 07:38 | Of course, you can use the Selection tool.
| | 07:41 | So you make a shape and then, so
actually let me go ahead and delete this shape.
| | 07:47 | So if you have the Selection Tools on, then you
can use Option+Delete instead of Option+Command.
| | 07:52 | So if you have your Fill as white, you
can hit black, and then Option+Delete and
| | 07:58 | that deletes the shape.
| | 07:59 | So any of these freeform Vector Tools
will also cut out a shape depending on
| | 08:03 | which color you have selected under the Fill.
| | 08:05 | Let me delete this mask one more time.
| | 08:09 | If you do have one of these Selection Tools, I
want to make sure I click on the photo first.
| | 08:15 | Click on the photo, and then I have
one of these Selection Tools like this,
| | 08:19 | then I can actually click on this Mask tool
and it will use that shape to create the mask.
| | 08:25 | That's a quick shortcut if you want to
create the mask with a specific Selection tool.
| | 08:29 | Make sure you've got the object selected
and then draw your Bitmap selection and
| | 08:34 | then click on this Mask icon under the layers.
| | 08:37 | Out of the two types of Masks, the
Bitmap versus the Vector Masks, I really
| | 08:42 | love the Vector Masks better because they're
much more adjustable, so therefore more flexible.
| | 08:48 | So you'll see me oftentimes just use
a shape, even if it's a rectangle and
| | 08:54 | adjust the Masks via gradients and some
of the grayscale transparency that you
| | 08:59 | get when working with Masks.
| | 09:01 | So Masking is a really common and
important step to develop an artwork, and
| | 09:05 | you can see that Fireworks does give you, like,
a full range of tools to dealing with Masks.
| | Collapse this transcript |
| Animating objects with states| 00:00 | The web is in a transitionary period
where animations are moving away from Flash
| | 00:05 | into HTML5 through software like Adobe Edge.
| | 00:08 | Fireworks does let you create some basic
animations, and they can be exported as animated GIFs.
| | 00:14 | So let's take a look at how we can
do simple animations in Fireworks.
| | 00:17 | So you do basic animations through States.
| | 00:20 | I'm going to create a new document.
| | 00:22 | I'll just click on this right here
and do a 1000 pixel by say 500 pixels
| | 00:28 | high and hit Enter.
| | 00:29 | Then I am going to come over here
and draw myself a little star shape.
| | 00:34 | So if you don't see the star shape, you
can click and hold down the mouse button
| | 00:37 | until you get to the star shape right
here at the bottom, and I'm going to drag
| | 00:40 | myself just a nice little star there.
| | 00:42 | So, to animate this object, I
need to see the States panel.
| | 00:48 | If you don't see that, go to the Window
menu and select States. It's right here.
| | 00:51 | It might also be next to your
layers and your Pages. So look in there.
| | 00:55 | So to create an animation, what we do is
we add another State, we can go back to
| | 01:00 | the State 1 and copy this object,
| | 01:02 | so Edit > Copy, and go back to State 2
and paste, scoot it over, and now we have
| | 01:09 | a little animation between these two States.
| | 01:11 | In the second State, we've moved
that object over just a little bit.
| | 01:15 | We can preview animations right
here at the bottom of the Workspace.
| | 01:19 | So I hit the Play button, and it's just
going to play through those animations.
| | 01:22 | Let me add a few more.
| | 01:24 | So when I add another one, I can go
ahead and create a new State, but it's
| | 01:27 | easier to actually just drag this
into the new State Icon down here.
| | 01:32 | It makes a copy in the same position, so
now I can move that over, and I'll drag
| | 01:38 | me another copy here.
| | 01:40 | I can move that over some
more, and now I can play it.
| | 01:44 | See how it's working.
| | 01:45 | Looking pretty good.
| | 01:46 | Now, it might be useful to turn on Skinning.
| | 01:49 | So Skinning, you can turn it on right here,
or you can just use this left-hand side.
| | 01:54 | So, if I click over here, you can
see that I can see now the State.
| | 01:58 | I'm in State 1 and I can see States 2 and 3.
| | 02:00 | If I click on State 2, and that one
is a little darker, and I can move this
| | 02:06 | thing up and show different states.
| | 02:08 | So now it's showing State
before and the State after.
| | 02:11 | There are also some shortcuts right
here, so you could say just show me the
| | 02:14 | current State and the next State or
show me the before and after States right
| | 02:19 | there, or show all of them.
| | 02:22 | This is kind of cool, Multi-State Editing.
| | 02:24 | If you turn that on, then you can
not only affect the editing of the
| | 02:28 | current State, but you can also edit any
States that are shown through the Onion Skinning.
| | 02:31 | So I can maybe give this thing a little
bit of a curve by adjusting the position
| | 02:35 | of these three states, and then I'll go
to State 4 and then maybe I'll move it
| | 02:41 | down here, maybe I'll show all the
states to see how everything is flowing.
| | 02:45 | So maybe I can be slower at the
beginning and faster at the end.
| | 02:49 | So let me go ahead and preview that.
| | 02:54 | On the right-hand side, I can also adjust
the timing for each one of those states.
| | 02:59 | So if I double-click on this
state right here and I'll type in 100.
| | 03:03 | So 100/100th of a second
is going to be 1 second.
| | 03:06 | So I'm going to hit Enter, and now
that animation will stop at the last
| | 03:10 | frame for a second.
| | 03:11 | If you want to, you can affect a bunch
of different states by Shift-clicking on
| | 03:20 | one, and then the other one, that
selects a range, and then you can double-click
| | 03:26 | right here, and then
modify the number and hit Enter.
| | 03:30 | And that modifies all of them,
all the states at the same time.
| | 03:33 | So the timing for everyone
with the states now is 20.
| | 03:35 | If I hit Play, you'll see
the animation will play slower.
| | 03:42 | To delete a State, you just drag it to the
Trashcan, and that gets rid of that State.
| | 03:47 | From the Looping menu, you can also
control whether the object loops forever--
| | 03:51 | which is the default--or just
loops for a few number of times.
| | 03:55 | So this has to do with
when you export the object.
| | 03:57 | You're going to have to export this is
a GIF animation because it's the only of
| | 04:01 | the main graphic format that supports
animated keyframes like this and so you
| | 04:06 | can have the animation play just a
certain amount of times, but Forever works
| | 04:11 | for us, so we'll just keep it on Forever.
| | 04:13 | There's also a shortcut for creating animation.
| | 04:15 | So I'm going to get rid
of these other two states.
| | 04:17 | Click on the first one, Shift-click on
this other one and hit the Delete key
| | 04:21 | here, and that leaves me
with just my original State.
| | 04:23 | So if you go to the Menus, you can go to
Modify > Animation and select Animate Selection.
| | 04:30 | So from here you can create some States
automatically and add a little bit of animation.
| | 04:34 | So I'm going to add 10 States to my animation.
| | 04:36 | I'm going to move them a total of say
900 pixels, and the direction is whether
| | 04:43 | you're going to the right
or to the left or any angle.
| | 04:46 | So direction 0 will move it to the right,
180 to the left, and you can use this
| | 04:51 | little pop-up here to control that,
but I just want to move it to the right.
| | 04:54 | So I'll keep it at 0.
| | 04:55 | I can also scale them, change the opacity so
that they are less opaque at the beginning.
| | 05:00 | So maybe you can do an animation that
starts off, kind of fade it out, and
| | 05:04 | ends up being 100% opaque, and then the
rotation, you can have the object rotate as well.
| | 05:09 | So I'm going to rotate this 360 degrees
clockwise, and I'm going to hit OK.
| | 05:15 | And Fireworks is going to tell me that it
needs to add a few States in order to
| | 05:18 | build the animation. I'll hit OK.
| | 05:21 | And now, when I go through the
States, you can see the animation is
| | 05:24 | working pretty well.
| | 05:25 | You go ahead and turn Onion
Skinning off and now go back to State 1.
| | 05:32 | Let me preview the animation.
| | 05:37 | I'll adjust the timing a little bit,
double-click on this last one, keep it to--
| | 05:41 | let's see, we'll make it hold for a
second here, and we'll adjust the timing of
| | 05:46 | all these other ones.
| | 05:48 | So click on the first one, Shift-click
on the last one, double-click anywhere,
| | 05:52 | right here, and then type in--I'll put in
7/100ths of a second, and let's preview it now.
| | 06:01 | Now, when you go to State 1, and you
click on this, you'll see these keyframes
| | 06:05 | up here right there.
| | 06:06 | You can actually redirect what type
those frames are and also the position of
| | 06:12 | these frames by moving this dot around.
| | 06:14 | So let's play this here, and you can see that
moving in a different direction. Pretty cool!
| | 06:23 | Although GIF animations are a little
rare today as the world moves to tools
| | 06:26 | like Adobe Edge and HTML5, Fireworks
does provide some good tools for dealing
| | 06:31 | with simple animations.
| | Collapse this transcript |
| Using the 9-Slice Scaling tool| 00:00 | Fireworks has a really neat tool
that lets you rescale objects without
| | 00:04 | distorting their edges.
| | 00:05 | It's called the 9-Slice Scaling tool.
| | 00:08 | So let's take a look at it and
see how we can use it on a project.
| | 00:11 | So here, I have a button that I want
to use to mock up a form element, and I
| | 00:17 | don't want to use the word OK here,
I want to use a different word.
| | 00:20 | So I'm going to modify this button and
scale it to maybe fit something larger
| | 00:25 | where OK is right now.
| | 00:26 | So first thing I'm going to do is I'm
going to choose the Magic Wand tool, and I
| | 00:31 | want to get rid of this slight border
that I have here, this light gray border.
| | 00:35 | So I'm going to click on that and it
did a nice job of selecting everything.
| | 00:39 | If you have a problem with it, you
can increase or decrease the Tolerance.
| | 00:42 | That will kind of choose more or
less of the color that you picked on.
| | 00:46 | So let me reduce that down.
| | 00:48 | That looks pretty good.
| | 00:49 | So now that I've got that selection
done, I'm going to hit the Delete key.
| | 00:52 | That gets rid of that outline.
| | 00:54 | Then the next thing that I want to do
is I want to get rid of the word OK here.
| | 00:57 | So first, I'm going to click on
this button, and then I'm going to use
| | 01:01 | this Marquee Selection to select an
area inside that button just next of
| | 01:07 | the OK button here.
| | 01:09 | Once I got that done, click and drag while
holding the Command key down, and the Option key.
| | 01:14 | That creates a copy of the
original that I clicked on.
| | 01:18 | So there I go, and that gets rid of the OK text.
| | 01:22 | So now I have a nice button.
| | 01:24 | If I want to make this button larger or
smaller, let me go back to the Scale tool here.
| | 01:29 | If I scale this normally, you'll
see that it will distort the edges,
| | 01:33 | doesn't look too bad there.
| | 01:34 | Let's go the other way.
| | 01:36 | So we'll distort the edges
right here of this particular shape.
| | 01:41 | Not very good, that's not what I want.
| | 01:43 | I would like to scale it, but protecting
these edges so that's exactly what this
| | 01:47 | tool is for is underneath the Scale
tool--and there it is, it's called the
| | 01:51 | 9-Slice Scaling tool.
| | 01:54 | So once you activate the 9-Slice
Scaling tool, you can click on these
| | 01:58 | guides that it gives you and drag the guides
over to the areas that you want to protect.
| | 02:02 | So I'm protecting these corners right here,
| | 02:05 | this corner, this corner, and this
corner. And now, as I scale, it's going to
| | 02:10 | scale everything else, but it's
going to leave the corners along.
| | 02:13 | So I'll double-click to apply it, and
you can see that I get a much nicer edge
| | 02:16 | on this particular button all the way around.
| | 02:19 | So now I can really mock up a
humongous button on top of this, and this font
| | 02:24 | size is really huge.
| | 02:25 | So, let me make it smaller;
| | 02:27 | maybe a little smaller.
| | 02:31 | Now, this works for not just Bitmap
shapes, but it also works for vector shapes.
| | 02:38 | So let me show you an example of that.
| | 02:40 | Say that I have a beveled rectangle--not
a beveled, let's do a rounded rectangle.
| | 02:46 | I want to do like a little sort of
shape of somebody kind of saying something.
| | 02:51 | So, I'm going to use this tool to
create the object that I want to use.
| | 02:56 | If I click on these little
pointers on the edge, I'm holding down the
| | 02:59 | Command key, I'm going to click on this to
make my rounded edges a little more pronounced.
| | 03:04 | What I want to do now is I want to add a
little bit of a bubble kind of curve right here.
| | 03:09 | So, to do that, I'm going to have to ungroup
this object because it's a rounded rectangle,
| | 03:13 | so I will right-click in
here and select Ungroup.
| | 03:16 | Now, this is a vector shape.
| | 03:18 | We can work with the Pen tool
to add a couple of points here.
| | 03:22 | So, I've got the Pen tool close to the object,
you can see that little Plus sign right there.
| | 03:26 | So I'm going to click here, and then
click again right next to it, click one
| | 03:30 | more time to make three points, hold
down the Command key, switch over to this
| | 03:35 | pointer, and then click on this point,
drag it out, and then I'm going to hold
| | 03:39 | down the Alt key or the Option key on
the Mac and click and drag handle out of
| | 03:47 | this Corner tool, and then
do the same thing right here;
| | 03:49 | click and drag myself a handle.
| | 03:51 | I will get both of them.
| | 03:52 | I let go of the Option key, hold down the
Shift key here to make sure this is straight.
| | 03:58 | Then come over here, hold down the Command key
and Option key to make sure that I can change the
| | 04:06 | direction of this shape
right there, this Bezier Curve.
| | 04:09 | So now I have a nice little sort of
bubble and let me color it something other
| | 04:13 | than black here and I'll
color it maybe light blue.
| | 04:18 | I'll go ahead and give it an edge.
| | 04:19 | That's a little bit darker blue right there.
| | 04:23 | So that's looking pretty good.
| | 04:24 | But I'm going to have the same problem I
did with this button if I try to scale it.
| | 04:29 | So if I click on the normal Scaling tool,
and if I scale this horizontally, I'll
| | 04:35 | get some of that distortion because
Fireworks no longer understands that these
| | 04:39 | corners have to be
mathematically shaped properly.
| | 04:42 | So I'll undo, just simply go to the 9-
Slice Scaling tool and protect the corners
| | 04:48 | that I need to protect.
| | 04:49 | So I'm going to come up here and there.
| | 04:55 | So right after these curves, I'm
going to move my slice guides there.
| | 05:00 | Now, if I make this a lot wider, it
protects these edges, so I get a much nicer shape.
| | 05:06 | Now, this is not perfect,
but I can live with that.
| | 05:08 | These corners will be a real pain to do.
| | 05:10 | So all I have to do is just come
over here, and reposition this.
| | 05:14 | So you can see the 9-Slice Scaling
tool is a really, really handy tool,
| | 05:20 | especially when you have these kind
of shapes that need to be resized in a
| | 05:23 | specific way without distorting the edges.
| | Collapse this transcript |
|
|
5. Organizing DocumentsWorking with layers| 00:00 | Layers are a great way of organizing
your document, and they support a lot of
| | 00:04 | functionality that can make your life easier.
| | 00:07 | Let's take a look at layers in Fireworks.
| | 00:09 | So every object you have on
the stage goes into a layer.
| | 00:12 | If I click on one of these objects,
you see in the Layers panel, the
| | 00:16 | object becomes activated.
| | 00:17 | If you don't have the Layers panel
open, just go to the Window menu, and
| | 00:21 | select layers right here.
| | 00:23 | It's part of this layers, States, Pages
group, so you might just find it to the
| | 00:27 | right underneath one of these tabs.
| | 00:29 | We can turn layers on and off by
clicking on this Eye icon on the left side of
| | 00:34 | each layer, and right next to it, we
can also lock a layer, so we can prevent
| | 00:38 | people from grabbing our element.
| | 00:40 | So, this right here, let me click
back on that rectangle. There you go!
| | 00:50 | So if I lock it, I can no longer click on that.
| | 00:52 | I'm clicking on this
background element which is right there.
| | 00:55 | So I can lock any one of these layers
that I can to prevent me from clicking
| | 00:58 | and dragging objects.
| | 00:59 | To unlock them, just click right back
here again, and let me scroll back up, and
| | 01:05 | I'll unlock this object right
here just as Roux Academy logo.
| | 01:09 | You can rename an object, so it's a little
bit difficult to tell that this is the logo.
| | 01:14 | So if I double-click on this name part
right here, I can rename that logo, and
| | 01:18 | that makes it a little bit easier for
me to tell what it's supposed to be.
| | 01:21 | To delete a layer, you can just drag
it to the Trash and let go, and that
| | 01:25 | deletes the entire layer.
| | 01:26 | I'm going to undo to make sure I get that back.
| | 01:28 | So I'll go to the Edit menu and select Undo
Delete, so I don't want to delete the logo.
| | 01:33 | Now, some of these things are better
organized in layer folders, so you could see
| | 01:36 | that there's already a folder called
layer 1 here, but it would be nice to be
| | 01:40 | able to group things into folders.
| | 01:41 | So, to add a Folder, I can
add a New/Duplicate layer.
| | 01:46 | So, in Fireworks, folders are
technically layers, so even though you have layers
| | 01:51 | for each element, you can also have a
layer that looks like a folder, but it's
| | 01:55 | called the layer down here.
| | 01:56 | So once you have another layer, we can
move an element into that layer group.
| | 02:01 | So if I click and drag this logo, and I
put it right there, it's now going to be
| | 02:05 | underneath this layer too.
| | 02:07 | So this is kind of the text
part of the logo, it's down here.
| | 02:10 | So I move that also into this folder and
it will put it right on top of my logo.
| | 02:15 | So now, I can hit this triangle to
collapse this layer and turn that on and off.
| | 02:21 | So I might rename this thing like Header.
| | 02:25 | So to rename, just double-click and type
in whatever name you want, and now I can
| | 02:29 | move all the items that belong to
the header into that header part.
| | 02:32 | So I'll click on this, Shift-click on
this text, and maybe this black box as well.
| | 02:38 | Shift-click on that. And I want to
move them all into this Header folder.
| | 02:43 | Now, there's a couple of
ways that I can do that.
| | 02:45 | I showed you how I can click and
drag to move some of these layers over.
| | 02:48 | I'm going to expand this Layers panel
by clicking and dragging on this edge.
| | 02:52 | So you could see another way of doing it.
| | 02:54 | Whenever I choose objects on any layer
or a layer folder, I'll get this little
| | 02:59 | icon right here that shows that this
is the layer that I'm working with.
| | 03:03 | I actually click and drag on this into another
layer and put those elements on that new layer.
| | 03:09 | Now, the elements by default, if you
just put them on top of the folder, they
| | 03:12 | appear at the top of this layer group.
| | 03:15 | So I can also just use the Layers panel
to move these three objects underneath,
| | 03:19 | some of these other objects,
and move them down a few levels.
| | 03:23 | Let's see how my header area is looking now.
That looks pretty good.
| | 03:28 | So we've got a header,
we've got a main section here.
| | 03:30 | Let's create another layer folder, and
we'll call this one, of course, Footer, and
| | 03:34 | let's rename this one Main.
| | 03:38 | So I don't have anything on my Footer.
| | 03:40 | I'm going to put in the Main section
in between the Header and the Footer.
| | 03:43 | So you've got to be careful that
you don't put that on top of a folder.
| | 03:47 | So just wait until you see that little
double line right there, let go, and then
| | 03:50 | it moves right there.
| | 03:51 | So let me go to my Footer part down
here, and I'll start just grabbing items
| | 03:57 | from my footer, because this right here
is actually also a background, I'm going
| | 04:01 | to go to Select menu and then choose Deselect.
| | 04:04 | That way I have nothing selected and
I'm going to click on this background,
| | 04:08 | hold down the Shift key, click on this
element, click on this, click on this.
| | 04:12 | I'm going to hold down the spacebar,
so I can get this Hand tool, and drag
| | 04:17 | around, and then again, let go of
the spacebar, hold down the Shift key,
| | 04:21 | click, click, click, choose these
three elements, and I can move them just by
| | 04:27 | clicking on this little
circle down to the footer.
| | 04:31 | It looks like they're hiding for some reason.
Let's see what's happening there.
| | 04:35 | My footer is beneath the Main layer.
My Main layer has this background element.
| | 04:40 | What I really need to do is create another
element called the Background element.
| | 04:43 | I'll create another layer folder, and
I'll call it Background, and I'm going to
| | 04:48 | move this to the bottom.
| | 04:49 | Sometimes when we move things to the
bottom, presents a problem because you end
| | 04:53 | up putting the folder inside the Footer Folders.
| | 04:55 | If I open this up, you'll see
that there's my Background folder.
| | 04:58 | So that's not exactly what I want.
| | 04:59 | Sometimes, you have to move the last
folder in between two other folders.
| | 05:04 | Just moving things to the end
actually puts them inside the last folder.
| | 05:08 | So I want to have this Background folder,
a Footer folder, and in the Background
| | 05:13 | folder, let me zoom out, and I'm going
to grab this part of the background.
| | 05:18 | This background is actually two layers,
two pieces of art that look the same.
| | 05:21 | So I'm going to click on this one, and
then Shift-click on the one to the left,
| | 05:26 | and come over here, drag this to the
Background layer, and now my footer
| | 05:31 | reappears down here.
| | 05:33 | So this is looking pretty good.
| | 05:33 | I got a background element, I got a
footer element, a header element, and my
| | 05:40 | Main section right here, which is awesome.
| | 05:43 | This will be probably a good time to
lock some of these layers because in most
| | 05:47 | pages that I will be working with,
I'm not really going to mess with the
| | 05:50 | header or the footer or the background.
I really want to mess around with main
| | 05:54 | section of what I'm doing.
| | 05:56 | Then I tend to lock these other layers,
and then I can just not worry about
| | 05:59 | clicking on this background and
doing anything to the Header section.
| | 06:03 | I would probably also move this
navigation into a Header section.
| | 06:07 | A navigation might be
something you put into its own folder.
| | 06:11 | So inside the Header folder, I can create a
sub-folder by using this little icon right here.
| | 06:17 | If I click on that, it's not going to
look like anything right now, but if I
| | 06:20 | open up this triangle, you'll see that
I have another item right here, another
| | 06:25 | sort of layer sub-folder and I can
rename that Navigation, and I'm going to grab
| | 06:32 | the elements that make up the navigation,
click, hold down Shift, click, click,
| | 06:37 | click a few times, get them all.
| | 06:39 | Let's click and drag them, get them
all, undo, and then I'll just use this
| | 06:45 | little dot right here to move
them into this Navigation folder.
| | 06:49 | So now I have a Header folder which
has the navigation all in one sub-layer
| | 06:53 | which I can also lock.
| | 06:54 | I don't want to mess with it
or just lock the Header folder.
| | 06:57 | That locks all the sub-folders within them.
| | 07:00 | So now I can't do anything with the navigation.
| | 07:02 | Here's my white background.
| | 07:03 | Maybe that would be good to
go on this background layer.
| | 07:07 | So let me unlock the background first,
click on this white layer right here,
| | 07:12 | then click and drag that on to the
background, and lock that, and now I can't
| | 07:17 | even click on this background.
| | 07:18 | That's beginning to look like a
really decent template for web work.
| | 07:25 | Of course, with any object you also
have some of these options right here that
| | 07:29 | are also available on the Properties
panel to change the opacity of an object.
| | 07:33 | So if I can reduce the opacity there
if I want to, and I can also apply layer
| | 07:38 | Effects or Blending Modes here.
| | 07:41 | So these Blending Modes affect how an object
looks when it's place on top of another object.
| | 07:47 | It's really good to just
kind of play around with them.
| | 07:49 | If you're familiar with Photoshop,
these would be very familiar to you.
| | 07:54 | If you look at the Options menu,
you have a few options here.
| | 07:57 | You can create layers, sub-layers
from right here, you can make copies of
| | 08:00 | layers, that's kind of good.
| | 08:01 | If you're working with States, you can
have a layer that appears on every State.
| | 08:07 | States have to do with animation.
| | 08:09 | So take a look at the States movie if you
want to find out more about creating States.
| | 08:13 | You can also share layer to pages which
I'll be talking about in the Pages movie.
| | 08:19 | You can also lock and unlock here, and
you have these Thumbnail options which
| | 08:23 | just allow you to make
your thumbnails a lot bigger.
| | 08:27 | So if we look at this, you could
see these thumbnails are pretty huge.
| | 08:31 | That's probably too large.
| | 08:33 | Let's go back to thumbnails, and
that's probably a good size right there.
| | 08:40 | A couple of other things that
you have in the Layers panel,
| | 08:43 | you can also add a Mask to a
layer by hitting this icon right here.
| | 08:48 | Check the movies on Mask if you want
to learn more about Masking, and you can
| | 08:52 | also create a new Bitmap image, so
this is creating a new empty layer.
| | 08:56 | Let's come over here to the main
section and just add an empty layer, and
| | 09:01 | there's an empty layer.
| | 09:02 | Now, why would you want to do that?
| | 09:03 | Well, sometimes you want to create a
layer that you want to start drawing
| | 09:06 | into with a Bitmap.
| | 09:07 | I'm not really sure that's too useful,
because as soon as you draw with a
| | 09:11 | Bitmap, you'll also be creating an
empty layer, but this is one more option in
| | 09:15 | this particular panel.
| | 09:16 | So, I'll go ahead and delete that, and
that's pretty much everything there is
| | 09:20 | to know about layers.
| | 09:21 | If you love being organized,
Fireworks really gives you a lot of great
| | 09:24 | options with layers, and they should be pretty
familiar to you if you use other Adobe products.
| | Collapse this transcript |
| Working with pages| 00:01 | Fireworks pages lets you organize
large projects into different parts or
| | 00:04 | allow you to create a prototype that
simulates an entire web site. So let's take a look.
| | 00:09 | You create pages through the Pages panel.
| | 00:11 | If you don't see the Pages panel
already on your screen, go to the Window
| | 00:14 | menu and select pages.
| | 00:16 | It's right by this group of layers and States.
| | 00:19 | To create a page, click on this Add
page Icon right here, Add/Duplicate page.
| | 00:25 | Click on that and you create another page.
| | 00:27 | pages don't have to be the same size.
| | 00:29 | I can change the size of this page
by going to the Properties panel and
| | 00:32 | selecting Canvas Size, and from here
I'll type in another value for this
| | 00:36 | page, so 728 by 90.
| | 00:37 | So if you're doing a different
campaign, say a banner campaign for this web
| | 00:42 | site, you can keep all the assets together
by creating pages and modifying their sizes.
| | 00:47 | To delete pages, just drag them over
to the Delete Icon right here at the
| | 00:51 | bottom of the panel.
| | 00:52 | You can also make a copy of a page by clicking
on the page and dragging it to this new icon.
| | 00:57 | Right here it makes a copy of the page.
| | 00:59 | And if you want to, you can start working how
this content is different from the other page.
| | 01:03 | You can create a set of
elements that appears on every page.
| | 01:07 | So what I'm going to do is
delete this page right here.
| | 01:09 | Actually no, let me leave that page, and
what I'm going to do is modify this page
| | 01:14 | so that it can become my master page.
| | 01:16 | So you can use the set of
elements that appears on every page.
| | 01:20 | When you convert an ordinary page to a
master page, you're going to see some
| | 01:24 | changes in the Layers
panel, so let's take a look.
| | 01:26 | I'm going to come over here to Layers
panel, and I already have all the content
| | 01:30 | that goes on a page in this folder.
| | 01:32 | So I'll grab that folder, and I'll
delete it--click on this Delete Icon.
| | 01:37 | I have a page right here that
will make an excellent master page.
| | 01:40 | So I'm going to go to the Pages panel and go
to my pop-up menu and select Set As Master Page.
| | 01:46 | So now this page moves up to the very
top, and it has this little extra label
| | 01:51 | here called Master Page, so
this is a master page now.
| | 01:54 | If I go this page and I go to layers,
you'll see that this page gets an extra
| | 01:59 | set of layers down at the bottom,
and it's called Master Page layer.
| | 02:03 | So if you open that up, you'll see that
there are all the layers that are in my
| | 02:06 | master page and all new
pages will get this as well.
| | 02:09 | So now what I need to do is get rid
of this Background, Footer, and Header
| | 02:15 | because now they're extra on
this page, so I'll just delete them.
| | 02:18 | Click on this Header, delete, and
delete that again. Footer, delete.
| | 02:28 | Might have to hit it twice. And
then this Background and delete.
| | 02:34 | And now you can see that all the elements
of my master page are in that background.
| | 02:38 | They are locked, so I can't click
and move anything on my master page.
| | 02:42 | I can only interact with the
elements that are on this page.
| | 02:45 | If I go to the Pages tab here, any time
I create a new page, they will get all
| | 02:50 | those elements automatically.
| | 02:53 | Even though new pages inherit the
master page layer, all the features are
| | 02:57 | not necessarily shared.
| | 02:58 | So, for example, you can still resize
pages or change their background color.
| | 03:02 | So you may want to click on to the
left of each one of these pages a link to
| | 03:06 | link this page to the master page.
| | 03:09 | That way if I make any changes like to
the background color or to the size of
| | 03:13 | any page, it'll affect all the pages.
| | 03:15 | You can also do that by going to this
pop-up menu and selecting Link here.
| | 03:19 | I can only choose Unlink, so it's not on.
| | 03:21 | You can click here and
select Link To Master Page.
| | 03:25 | And now I can create some
additional pages for this project.
| | 03:27 | So I'll call my master page Layout, and I'll
call this one the Home page. Artists here.
| | 03:41 | Now it's going to give you an error here
because you don't want to use any funky characters.
| | 03:46 | So let me just type in and Register.
| | 03:51 | So I'll make sure these are also
linked by clicking on this icon to the left.
| | 03:55 | And now if I go to my master page
and I move any of these items, these
| | 03:59 | layers are still locked.
| | 04:02 | So if I move anything, it will be
moved on all of my pages, which is great.
| | 04:06 | Back to my master page, I'll just undo
that a few times so it goes back to where
| | 04:11 | it's supposed to be.
| | 04:12 | Master pages are a great way of
sharing elements between pages.
| | 04:16 | What happens if you want to share
something but not to every page?
| | 04:19 | You want to share something that will
be the same in some pages but not all.
| | 04:24 | You could do that with shared layers, so
I'm going to go back to layers here and
| | 04:27 | I'm going to use this element, I want to
have this preview of our mobile site on
| | 04:31 | some pages but not all the pages.
| | 04:34 | So I'm going to add another layer here.
| | 04:35 | I'll call this thing Mobile, and I'm
going to click on this group and move it
| | 04:43 | over to the Mobile folder here.
| | 04:46 | And you can see that it's now in that folder.
| | 04:51 | So if I wanted to, I can click right
here and select Share Layer To All Pages.
| | 04:56 | Make sure that this mobile site is on
all my pages, so if I go to any of these
| | 05:00 | other pages, you can see that they will
all have that little our mobile section.
| | 05:04 | In some of these pages, it's
the only other content there.
| | 05:07 | But what if I just wanted to
add that to some pages, not all?
| | 05:10 | So I'm going to go back to layers,
click on this Mobile layer, and go to this
| | 05:15 | pop-up and select Share layer To Pages.
| | 05:18 | It lets me control which pages
this layer is going to be shared with.
| | 05:22 | So I can say this is going to be on
their Home page, the Artists page, but
| | 05:25 | not the Schedule page.
| | 05:27 | I'll click Remove--and not the
Registration page--and I'll hit Remove, click OK,
| | 05:33 | and if I go to my pages, you
can see that it's not in Register.
| | 05:36 | It is on the Venue Travel
page but not on the Schedule.
| | 05:39 | It's a great way of creating certain
sections that are shared only in certain pages.
| | 05:45 | You can also go to the File menu
and preview your pages in a browser.
| | 05:49 | This is kind of cool.
| | 05:50 | Let me go over here to File and select
Preview in Browser and see this page in Safari.
| | 05:55 | So this is going to show me all the
compression and how the page is looking in Safari.
| | 06:04 | Now if the pages have interactivity, you
can actually preview the page in Safari
| | 06:08 | and see how the interactivity or the
links from one page to another will work.
| | 06:13 | I'm going to show you how to build
interactivity in a separate movie, but I want
| | 06:15 | to show you what it works like.
| | 06:17 | So I'm going to click over to this
more finished version of this web site and
| | 06:21 | I'm going to go to the File
menu and select Preview in Browser.
| | 06:24 | This time I'm going to
preview all the pages in Safari.
| | 06:27 | So I'll click on that, it's going to take a
second to render everything, and there it is.
| | 06:34 | It looks like just before, but if I
come over here, you can see that some of
| | 06:38 | these menu navigation here is working.
| | 06:40 | If I click on this, it
takes me to the Artists page.
| | 06:43 | So these things are linking to the
other pages, and that's kind of a cool
| | 06:47 | thing that you could do.
| | 06:48 | You could actually preview the way a
page is working on your browser and test
| | 06:54 | some of the interactivity that you've built.
| | 06:57 | In addition to that, I can export pages.
| | 06:59 | If I go to the File menu and select Export,
I can export this whole thing as a PDF.
| | 07:05 | So I'm going to click on the
Desktop here and PDF is already selected.
| | 07:09 | So I'm going to choose that, I want
to make sure I choose All Pages here
| | 07:14 | and I'll hit Export.
| | 07:15 | You can tell it's done when
this thing is no longer blue.
| | 07:17 | Okay, looks like it's done, it
launched the page in my PDF browser.
| | 07:22 | The nice thing about PDFs is they still
allow you to link and keep some of the
| | 07:27 | interactivity although not as well as
exporting something as an HTML page.
| | 07:32 | But at least, you can send this to a
client and they can maybe mark it up if
| | 07:35 | they like using PDF marking tools.
| | 07:37 | If you want to give them a better
experience or a more web-like experience,
| | 07:41 | you can go to the File menu and select Export,
and this time we'll export this as a web page.
| | 07:47 | So we'll go to HTML and Images, and
when I export, make sure we export HTML
| | 07:52 | File, and you definitely want to make
sure you export Slices so that you can
| | 07:56 | see your rollovers.
| | 07:57 | So if that's not selected,
make sure you choose that.
| | 07:59 | Include Areas without Slices
so it renders the whole page.
| | 08:03 | I like to also turn this thing
on called Put Images in Subfolder.
| | 08:06 | Otherwise, you'll see your pages and
all the graphics in one folder and that
| | 08:11 | can get really crazy.
| | 08:12 | So I'm going to click on New Folder,
I'll call it rouxprototype here, hit
| | 08:16 | Create, and I'll just hit Export.
| | 08:18 | It's going to take a while again.
| | 08:23 | So again, it might be done
already. And here is my prototype.
| | 08:28 | You can see that it looks
like it only did one page.
| | 08:30 | So let me go back and show you.
I should have clicked on something else.
| | 08:35 | So I'll do Export again, and yeah, do
make sure you do All Pages instead of just
| | 08:41 | the Current Page, and we'll hit Export.
| | 08:45 | And it looks like it already
exists, but it doesn't matter.
| | 08:47 | That's why it was so quick.
It just did everything for one page.
| | 08:49 | So this is going to take a little longer now.
| | 08:52 | Okay, let's check it out.
And here are all my pages.
| | 08:58 | You could have renamed this
something other than Desktop.
| | 09:00 | It doesn't really matter because it's
just a prototype that you're going to
| | 09:03 | show to people, so we can drag this
onto a browser and this will be like a
| | 09:07 | little web site that you can post
somewhere and you can have people interact
| | 09:11 | with and maybe send you back some
notes about things that they would like to
| | 09:14 | see different at your site.
| | 09:16 | So this is an awesome way of
building an interactive prototype.
| | 09:19 | Fireworks writes all the code for you.
| | 09:21 | I really wouldn't use that code at all
in a production environment, but it's
| | 09:24 | a super way of generating a prototype that you
can give to your clients and get feedback on.
| | 09:29 | Sometimes it's really hard for people to
visualize how linking and how different
| | 09:33 | pages are going to work.
| | 09:35 | So this is one of the reasons I
love Fireworks as a prototyping tool.
| | Collapse this transcript |
| Working with Web Layers| 00:00 | By now you may have noticed that there
is a special layer called the web layer.
| | 00:04 | This layer is normally invisible and holds
objects that are used for web interactivity.
| | 00:09 | There are two tools that create web
layers: the Hotspot tool and the Slice tool.
| | 00:13 | So let's see how they work.
| | 00:15 | So the Hotspot tool is right here, and
it creates areas that can be clicked on
| | 00:18 | or interacted with.
| | 00:20 | They're great for building prototypes and
can help you create quick rollover effects.
| | 00:23 | There are three different types of
Hotspot Tools, and they're really just
| | 00:26 | different shapes for the
tool, so let's make one.
| | 00:29 | We'll scroll down over here to this
Venue section, and I'm going to click on--I
| | 00:34 | already have this one selected, the
rectangle one, and then I'll drag myself a
| | 00:38 | selection rectangle here and let go.
| | 00:40 | You can see that we get this blue outline,
and that is now an item in the web layer.
| | 00:47 | So you could do that for that section
and also we'll do one for the Schedule.
| | 00:50 | You don't have to use a rectangle.
| | 00:52 | Of course, you can use any of the
other items which are a Circle Hotspot tool
| | 00:56 | just for creating circle hotspots like
that, and of course also a Polygon tool,
| | 01:01 | which is right here.
| | 01:02 | So if you want to create some
irregular shapes, then sometimes you could just
| | 01:06 | trace things like this if you want
hotspot to be around specific area.
| | 01:10 | So I'm going to delete that.
| | 01:12 | When you add a hotspot, you can add a
link from that hotspot to another section
| | 01:16 | by looking at the Properties
panel and typing in a link here.
| | 01:19 | This can be a regular web site, so this
can be http:// then whatever web site
| | 01:24 | you want to go to, or it can be a page.
| | 01:26 | So if you already have pages on your
site, you can link this to another page
| | 01:29 | just by using this pop-up right here.
| | 01:31 | So I'll link this to the venue-travel
page, and then I'll click over here and
| | 01:36 | link this to the schedule
page right here. So excellent!
| | 01:40 | Now let's preview that and see how it works.
| | 01:42 | Go to File menu, select Preview in
Browser, and then Preview all pages in Safari.
| | 01:47 | You want to make sure you preview all
pages, or you'll only see the page that
| | 01:50 | you're on and you won't be
able to click to a different page.
| | 01:53 | Let's scroll all the way to the bottom,
you can see that when I move my mouse
| | 01:56 | over this section, it
gives me that little Hand tool.
| | 01:58 | Same thing when I come right here.
| | 02:00 | And if I click, it takes me to the
Venue page and hit the Back button and click
| | 02:05 | on this, it takes me to the Schedule.
| | 02:07 | So that's working pretty well.
Let's close out of that.
| | 02:11 | So let's see how you would do a rollover effect.
| | 02:14 | I'm going to switch over to the artists
page, and I have pictures of some artists here.
| | 02:19 | What I want to do is, whenever I roll
over a picture of an artist, I want to see
| | 02:22 | a picture of some of their artwork.
| | 02:24 | So to do that, I'm going to need to
create slices for each of these artists.
| | 02:28 | There's another way of creating a slice.
| | 02:30 | If you select an object and you right-click,
you can insert a Rectangular
| | 02:35 | Slice or a Polygon Slice.
| | 02:36 | You can have it create the slice
automatically for you based on the object
| | 02:40 | that you have selected.
| | 02:41 | So I'm going to insert a Rectangular
Slice right there, and I need to do that for
| | 02:45 | all of them. I click on more than
one. Let's go ahead and do that.
| | 02:52 | So what I'm doing to scroll around is
pulling down the spacebar to bring up the
| | 02:55 | Hand tool and move it around.
| | 02:58 | Then I'm going to hold down the Shift key
and then clicking on these other pictures.
| | 03:03 | Then I'm going to right-click and I'll
say Insert Rectangular Slice, and this
| | 03:07 | time it's going to ask me, since
multiple items are selected, do you want to
| | 03:10 | create one slice that covers
all of them or multiple slices.
| | 03:13 | I'll do Multiple and it creates all of
them for me automatically. Excellent!
| | 03:17 | So once I have my different slices,
what I want to do is I want to go into
| | 03:21 | States and create another
state for each one of these artists.
| | 03:24 | So I'll add another state, see that
we've got normal state with just the page
| | 03:29 | and then another state for
what's going to be our rollover.
| | 03:31 | So let's go back to State 1, and what
I'll do is I'll grab some of these--
| | 03:37 | actually grab one, and I'll copy it by going
Edit > Copy, or Command+C, Ctrl+C on a PC.
| | 03:43 | Go to State 2 and I'll paste that right
there and see if I can bring it to this page.
| | 03:48 | I've got Onion Skinning on in my States
palette, so if I want to make sure that
| | 03:52 | it's in the right place, I'm going to
click right there to make sure that I have
| | 03:55 | State 1 is just the picture, State 2
is the picture of the person's artwork.
| | 04:00 | I do like having this Onion Skinning
on most of the time, especially when I'm
| | 04:03 | copying between states.
| | 04:05 | So I'm going to do the same thing for this.
| | 04:06 | Copy, go to State 2, paste, then move
this one into position right behind this
| | 04:12 | guy right here, come over here and
just keep on doing that for all of them.
| | 04:17 | And I can also turn off the web layer.
| | 04:20 | So I can hide all those temporarily and
Shift-click to select these and then cut
| | 04:28 | them, go to the States,
click on the second State, paste.
| | 04:34 | So now I have some pictures, and I
have a web layer that created the slice.
| | 04:42 | So slice normally is for cutting a graphic.
| | 04:46 | When you create a slice, you're
creating a cutout of your web page that you're
| | 04:50 | going to save separately.
| | 04:51 | So I made the slice and what I need to
do now is create a rollover out of it.
| | 04:56 | See this little Target Icon right here?
| | 04:58 | If I click on that and I drag it out, I
can make one section of the page linked
| | 05:04 | to a separate section.
| | 05:05 | You can also do it to yourself.
| | 05:07 | So I've got this web slice, I'm going to
drag it and move it right on top of this person.
| | 05:12 | So what that's going to do is create a
swap image, and what it's going to swap
| | 05:16 | the image from is whatever
state I tell it to swap it from.
| | 05:20 | So I'm going to choose State 2 and do
the same thing for all of these guys, same
| | 05:23 | thing, swap State 2, do this, drag
this out, put it here. Okay, almost done.
| | 05:36 | Okay, so my rollovers should be done
now, let's go ahead and test this out.
| | 05:43 | Go to the File menu > Preview in
Browser > Preview all pages, and now when I
| | 05:48 | roll over any of these photos,
I'll get the second state.
| | 05:52 | That is really cool.
| | 05:53 | Let me go back into
Fireworks and do one more thing.
| | 05:56 | So I want to create a hotspot on these
names so that when people roll over their
| | 06:00 | names, this picture will also switch to State 2.
| | 06:04 | So to do that, I'm going to need to
make some hotspots on each of the names.
| | 06:09 | I'll just go ahead and select all of them.
| | 06:11 | So what I'm doing here is holding down
the Shift key to click on one, spacebar
| | 06:15 | to bring the Hand tool, click and drag
to scroll, let spacebar go, Shift key,
| | 06:21 | click, let go the Shift key,
spacebar, click and drag.
| | 06:24 | After a while you kind of get really good.
| | 06:26 | You're not even thinking
about what you're doing there.
| | 06:29 | You're just kind of doing it.
| | 06:30 | So right-click on this, insert a hotspot
this time, and Multiple items are selected.
| | 06:36 | Do you want to create one or multiple hotspots?
| | 06:38 | I'll say Multiple and it very quickly
lets you create all the hotspots at once.
| | 06:43 | Then what I'm going to do is come to
each one of these hotspots, grab the Target
| | 06:46 | Icon and target each one of the pictures.
| | 06:50 | State 2, click on this, drag this over here,
State 2, and do the same thing for all of them.
| | 06:59 | And it's so beautiful when you get
to the point where you're not thinking
| | 07:02 | about what you're doing,
| | 07:03 | you're just kind of clicking and
dragging and moving your hands everywhere.
| | 07:06 | That's the beauty of learning some of
the command keys and some of the shortcuts.
| | 07:11 | Okay, cool!
So let's check that out now.
| | 07:13 | File > Preview in Browser >
Preview all pages in Safari.
| | 07:18 | And when I roll over these names, I will
also get the images over here to roll over.
| | 07:25 | Those things can also be clickable, so
you can make either this or this clickable.
| | 07:30 | So hotspots or slices can
be clicked to something else, so.
| | 07:37 | And we can also control how
these images are compressed.
| | 07:41 | So you can see there I can compress some
with other compression format other than PNG32.
| | 07:46 | I might want to compress these
with JPEGs since they're photos.
| | 07:48 | They're so tiny though it's not
really going to make a huge difference.
| | 07:51 | So this kind of interactivity creates really
complex code that might not be so suitable.
| | 07:56 | So when you're using these slices
and hotspots, you can create a preview.
| | 08:00 | Remember, that you can also export this
to either a PDF file or export it to a
| | 08:07 | HTML page, and it's going to generate
all the code for you to be able to show
| | 08:11 | your clients what your
mockup looks like when at work.
| | 08:15 | So even though I would never use that
code in a production environment, you can
| | 08:18 | very quickly create something
that you can send clients to.
| | 08:21 | And if you want to more about how to do
that, make sure you watch the video on
| | 08:24 | working with pages because it has all that.
| | 08:27 | But this is an awesome way of creating
interactivity really quick when you're
| | 08:30 | just in the mockup stage or the
wireframe stage, that lets clients see
| | 08:34 | functionality on a web site.
| | Collapse this transcript |
|
|
6. Using SymbolsCreating graphic symbols| 00:00 | Symbols are a way of saving objects
so that you can use them over and over.
| | 00:04 | If you're familiar with Flash, symbols in
Fireworks work pretty much the same way.
| | 00:08 | To usually create symbols from existing
elements on a page. In the Pages movie,
| | 00:12 | you may have seen that we can share
items between pages by creating layers that
| | 00:17 | are shared to different places.
| | 00:19 | However, in the instance of this
particular section of my page, I'm noticing
| | 00:24 | that when I go to different pages, I
actually want that group of items to be
| | 00:28 | positioned in different places.
| | 00:30 | So just simply sharing the layer is not
going to work because this object needs
| | 00:33 | to be up here on this page.
| | 00:35 | And if I go to the artists
page, it needs to be down here.
| | 00:39 | Same elements, I don't really want to
repeat the work of copying and pasting
| | 00:43 | some of those elements because I may
want to change something about one of those
| | 00:46 | elements later on and I want them to
be upgraded everywhere, so this is a
| | 00:50 | perfect candidate for a symbol.
| | 00:52 | So let's go back to the Home page, and
to create a symbol is really super-simple.
| | 00:58 | All you have to do is go to the
Modify menu and go to the Symbol here and
| | 01:02 | select Convert to Symbol.
| | 01:03 | Really most of the time, I just right-click
on the element and choose Convert to
| | 01:07 | Symbol from the pop-up.
| | 01:09 | It's probably a quicker way of getting to it,
so I'm going to select Convert to Symbol.
| | 01:11 | You can see that there are
three different symbol types.
| | 01:14 | We're going to be covering Graphics in
this movie and then Animation and button
| | 01:17 | in some other movies.
| | 01:18 | So this Graphic is the most basic of
the symbols, and I'm going to make this a
| | 01:24 | mobilesection here, and I'll select OK.
| | 01:28 | So that's pretty much it.
| | 01:29 | It just created the symbol, placed it on a
library that we can access in other pages.
| | 01:35 | So notice that if you go to the Layers
panel and we open the Page Elements, you
| | 01:40 | can see that one of the cool things
about the layers in Fireworks that they each
| | 01:45 | have this little Micro Icon that
shows you what type of layer it is.
| | 01:48 | When we create a symbol, that Micro
Icon looks like a little Plus sign.
| | 01:52 | So this is now a symbol,
it's no longer an object.
| | 01:56 | Go to the Window menu so we can pull up
the Document Library, and I'll show you
| | 02:00 | that we have different symbols
from other things that we've done.
| | 02:04 | Let me see if I can find the one that I
just created, and yes, it's right here
| | 02:07 | and it's called the mobilesection.
| | 02:09 | It's already there, so we can go to
another page, let's go back to this right
| | 02:13 | now and go to another page, I'll go to
the artists page, and what I'll do is I
| | 02:18 | will take this one out of here.
| | 02:20 | This is just a group right now, so I'll
delete this, and I can go to my Common
| | 02:24 | Library and just drag this into position.
| | 02:27 | And now I've copied that entire section into
another page and I can position it anywhere.
| | 02:32 | So this is almost like a really cool
super-layer that we can place anywhere and
| | 02:37 | when you update it in one place,
it'll get updated somewhere else.
| | 02:41 | So let's keep on doing that
for some of the other layers.
| | 02:43 | Let's go ahead and double-click on this
Align panel here to hide it a little bit
| | 02:47 | so we could get more room.
| | 02:48 | So I'll go to the schedule, I'll take
this out of here, I'll drag this from
| | 02:54 | Common Library and position it where I want
it on this page, and go over to this page.
| | 03:01 | Sometimes it helps if you're in between
pages and you know that they're going to
| | 03:05 | go at exactly the same position.
| | 03:07 | What I can do is just go to this page
and I'm going to select Edit > Copy, and
| | 03:11 | then go to this page, delete the group
and I'm going to hit Paste and it's going
| | 03:16 | to place it in exactly the same
position as in the previous page.
| | 03:20 | So now when I go from one page to another,
you could see that it's exactly where
| | 03:23 | it's supposed to be.
| | 03:25 | In this page, it probably also
could be in the same exact position.
| | 03:28 | So Edit > Paste so now these three pages
have that object in the same exact position.
| | 03:35 | On this page, since I'm using a slightly
different paragraph up here, it's moved
| | 03:39 | up just a hair, and on the Home page,
it's the first thing on this right rail.
| | 03:44 | So to edit a symbol, you could just
simply double-click on the symbol itself and
| | 03:48 | that enters the symbol editing
mode or the object editing mode.
| | 03:52 | You could tell that we're an object
editing mode because everything around the
| | 03:55 | object that I'm working on
has faded out a little bit.
| | 03:59 | If you take a look over here at the top
left of the workspace, you could see a
| | 04:02 | hierarchy of where we are in the document,
so you could see this Home link right here.
| | 04:07 | To get back out to the Home page, just
click on that and it takes us out of that
| | 04:11 | symbol editing mode.
| | 04:12 | So I can double-click here to go back into it.
| | 04:15 | Here's the hierarchy, double-click
also on the outside of the symbol.
| | 04:19 | So if I double-click right here on this area,
I'm clicking somewhere outside of that symbol.
| | 04:24 | It takes us back to the Home page.
| | 04:26 | You can also of course double-click on
the symbol from the Document Library.
| | 04:30 | If I double-click on that, I enter this mode.
| | 04:33 | Now this is kind of nice because in this
mode, I don't see the rest of the page.
| | 04:36 | Sometimes it's good to see the rest of
the page to see how my layout will work,
| | 04:40 | but sometimes you want to isolate things,
so this is a better mode for isolating
| | 04:43 | some of the contents.
| | 04:44 | So anything that I do on this page
will be reflected into some of the
| | 04:49 | other pages as well.
| | 04:50 | So let me go to go back into Home.
| | 04:56 | So let's go ahead and see if we can
modify something about that symbol.
| | 04:59 | So this is a group, so I'm going to ungroup it.
I hit Command+Shift+G to ungroup these items.
| | 05:03 | I'll click on this and let me just
change the color of one of these headlines so
| | 05:08 | that's not maybe bright
enough so that's really obvious.
| | 05:12 | I'll double-click to get out of symbol mode,
and then I'm going to go to another page.
| | 05:16 | And I can see that although this is in
a different position, because I edited
| | 05:19 | the master symbol, this instance of the
symbol has the same change, and if I go
| | 05:24 | to my other pages, I can see that
it's everywhere in my documents.
| | 05:29 | So that is really cool.
| | 05:30 | Symbols can save you a lot of time.
| | 05:32 | If you have a lot of content between
pages that is the same but it's not in the
| | 05:36 | same position, symbols--especially
graphic symbols--are the way to go.
| | Collapse this transcript |
| Creating 9-slice scaling symbols| 00:00 | Whenever you create a symbol, you
have the option of making the symbol a
| | 00:04 | 9-slice scaling symbol.
| | 00:05 | And that allows you to create a
special kind of symbol that has or uses
| | 00:09 | the 9-slice guides.
| | 00:11 | That can be really handy when you're
redesigning a site or an interface, so
| | 00:13 | let's take a look at how
you can take advantage of it.
| | 00:16 | On one of these pages, I have a
registration form, and on this registration
| | 00:20 | form, I want to create a button right here.
| | 00:23 | So I already have a picture of a
button that I want to use right here, and I'm
| | 00:28 | going to grab this button, but I don't
want it to have the OK text in it, and I
| | 00:33 | want to be able to resize
it to make it a little wider.
| | 00:36 | So first off, I want to need to get rid of
this slightly gray area around the button.
| | 00:41 | So I'll select it first, click on
the Magic Wand tool, and then click
| | 00:46 | anywhere on this gray area.
| | 00:48 | I can adjust the Tolerance right here
if I want to, but it looks like I did a
| | 00:51 | pretty good job getting it,
I mean, maybe go not as much.
| | 00:54 | That looks pretty good.
| | 00:56 | Once I have that gray area selected, I
can hit the Delete key to get rid of it,
| | 01:00 | and what I need to do is also
get rid of this text inside it.
| | 01:03 | So I'm clicking to select that item and
I'm going to click on the Marquee tool
| | 01:07 | and make another selection inside this bitmap.
| | 01:09 | Okay, so first I'm going
to hold on the Command key.
| | 01:11 | We can see that little icon that
looks like a pointer with a cut.
| | 01:14 | So that will cut the image, and then I
want to add the Option key while I'm dragging.
| | 01:19 | That should leave an original copy of
this thing where it used to be and just
| | 01:23 | drag a little copy of this
piece and move it over here.
| | 01:27 | So that gives me a button that I can use.
| | 01:30 | Now this is cool, but when I resize it
horizontally, you'll see that it kind of
| | 01:35 | distorts some of these edges.
| | 01:38 | If you've seen the video on using the
9-slice Scaling tool, I'm pretty much
| | 01:41 | doing the same thing.
| | 01:42 | One of these options to scale objects
is the 9-slice Scaling tool, and what that
| | 01:46 | does is gives you these little
handles that let you protect certain areas.
| | 01:51 | But the problem with that tool is once
you double-click to apply, then slices
| | 01:56 | are gone, and to get those back, you
have to click on this tool again, and then
| | 02:00 | it gives you the default position for
the slices, so you have to go move these
| | 02:03 | guides again and protect them again.
| | 02:05 | So it'll be nice if we could create a
symbol that remembers the positions of the
| | 02:10 | 9-slice Scaling tool.
| | 02:11 | So I'm going to do that, but before
I do that I'm just going to copy this
| | 02:14 | onto my other document.
| | 02:16 | So I'll go to the Edit menu, select Copy,
come back here, and I'll paste, so I
| | 02:21 | want this button down here.
| | 02:23 | And I will right-click to convert
this to a symbol, and I'll call my symbol
| | 02:30 | macbutton_btn, and this time I'm going
to select Graphic, and then I'll turn on
| | 02:37 | this option right here,
Enable 9-slice scaling guides.
| | 02:40 | I'm going to say OK, and that creates the symbol.
| | 02:44 | If I double-click on the symbol to edit
it, I see that my 9-slice scaling guides
| | 02:48 | are now there and I can
rearrange this to protect my corners.
| | 02:53 | This is just like using a 9-slice Scaling tool,
but it remembers where you put the guides.
| | 02:59 | So that's really super-useful if we're
going to be using that over and over.
| | 03:03 | Once I got the corners protected, I'm
going to click over here to go back to
| | 03:06 | my registration page.
| | 03:08 | And when I resize this graphic,
it'll protect my edges really well.
| | 03:14 | So I can make that button as wide as I need to.
| | 03:17 | And then I can put
whatever text I want on top of it.
| | 03:31 | So if you find yourself using the 9-
slice Scaling tool on a specific item a lot,
| | 03:37 | it might be a good idea to just make
that item a symbol that you can just resize
| | 03:45 | at any point in time without
having to go back to that tool.
| | 03:48 | So there. I have that done,
and it's fairly easy to do.
| | 03:52 | If you're using that a lot, this is a
great way of making a quicker version of
| | 03:56 | the 9-slice Scaling tool
that you can use over and over.
| | Collapse this transcript |
| Creating button symbols| 00:00 | Buttons are a special type of symbol
that come with some pre-defined states.
| | 00:04 | They're quite handy for building
interactivity like our top navigation here.
| | 00:08 | So let's check them out.
| | 00:10 | Let's go over to the Master Page, because
these items are all in the Master Page.
| | 00:14 | And I want to create buttons
for each one of these elements.
| | 00:17 | You'll notice that I have created little
squares for the backgrounds for each of these buttons.
| | 00:22 | You'll see why in a minute.
| | 00:23 | So I'm going to select both the text
and the background rectangle, and then I'm
| | 00:28 | going to right-click, select Convert to Symbol.
| | 00:31 | From here, I'm going to type in nav_home_btn,
and I'm going to choose button as
| | 00:39 | the Type, so I'll click OK.
| | 00:42 | On my Document Library, it shows there my nav_home_btn.
I'm not going to need to grab different instances of it.
| | 00:48 | So I'll just go ahead and
keep on making my other buttons.
| | 00:52 | Let's go ahead and grab those too.
| | 00:53 | Convert to Symbol, nav_artists_btn.
| | 00:57 | Make sure I choose button and click on
this and this, Shift-click on both of those.
| | 01:04 | Convert to Symbol, click OK, and do
the same thing for the other ones.
| | 01:13 | If you ever screw up and do just like
Animation or forget to click on button you
| | 01:17 | can always modify that by going to
your Document Library and selecting
| | 01:21 | Properties and then changing the Type to button.
| | 01:24 | So don't worry about it if
you forget to do it properly.
| | 01:28 | So the thing about button Symbols is
that they already come with some states
| | 01:33 | that are pre-defined.
| | 01:34 | So if I double-click on this and I look
at the States panel I'll see that I have
| | 01:39 | already States for Up, Over,
Down, and Over While Down.
| | 01:44 | So those are states that will
automatically activate depending on what you
| | 01:48 | do with the buttons.
| | 01:49 | So if I'm over the button, it's like a
hover effect. If I click down, it's what
| | 01:54 | happens when I click down on
the button and Over While Down.
| | 01:57 | So what happens when I'm over the button
while I am clicking down at the same time,
| | 02:01 | I really need to only use the Up and Over.
| | 02:04 | So although they already have the
states, none of the states have anything
| | 02:08 | in them, so I'm going to go to Up,
select all, so I'm hitting Command+A--
| | 02:12 | would be Ctrl+A on a PC--and select Copy.
Go to Over and just paste.
| | 02:16 | It should paste in the same position.
| | 02:19 | So what I want to do is reverse
the direction of this gradient.
| | 02:22 | So I'm going to come over here and click and
drag that and make that gradient go the other way.
| | 02:28 | So that's good enough.
| | 02:29 | When I'm rolling over this button, I
wanted to show the second State as a
| | 02:33 | gradient that is inverted, so it just
looks a little bit different, and what
| | 02:37 | I'll do is I'm going to go to my Styles,
and you could see that I have both of
| | 02:43 | those styles of the buttons in this document.
| | 02:45 | If you don't have them, you can click
on this icon right here and it will add
| | 02:49 | any of the gradients to this window right there.
| | 02:52 | So now that I have both of those, then
I will double-click on this, grab these
| | 02:57 | two elements, copy them to the Clipboard.
So Command+C, Ctrl+C on a PC.
| | 03:02 | Go to Over, Paste, and then click on
this and click on my different direction
| | 03:09 | style, so the gradient goes the other way.
| | 03:11 | Double-click on the background to get out,
double-click on this and just keep on doing that.
| | 03:16 | So click on both of these, Copy,
switch to the Over state, Paste, change the
| | 03:22 | background, and so on and so forth.
| | 03:25 | I don't see my other states here.
| | 03:28 | So I'm just going to recreate
this button the proper way.
| | 03:31 | So I'll grab these two items, just
copy them from inside the Symbol.
| | 03:37 | Double-click to get out.
| | 03:38 | I'll delete this symbol and
I'll also delete it from here.
| | 03:41 | And this is getting a little hard to see there.
| | 03:43 | Double-click on this tab to hide these
so I could just focus on this and looks
| | 03:48 | like it's still a graphic.
That's probably my fault.
| | 03:52 | I probably changed the
wrong Type when I clicked on it.
| | 03:55 | So just let me Undo, I'll go back here to
Properties and make this a button Symbol.
| | 04:03 | So let's see if that works now.
| | 04:04 | Now I have all the states. That's good, okay.
So it's just really my bad.
| | 04:07 | So I'm going to click on Over, Paste,
click on this background, back to my
| | 04:13 | Styles, switch the direction of the
gradient, double-click to get back.
| | 04:17 | It looks like one of these might
be not quite aligning properly here.
| | 04:25 | So let me double-click on this to add it
to Symbol, then I'll do snap the pixels
| | 04:32 | here, see if it fixes that little problem.
| | 04:34 | I'll check my Over State as well, and it
looks like it's having the same problem
| | 04:37 | there just on that particular frame, so
I'll do Snap To Pixel on this one again,
| | 04:42 | and it just moves everything
properly aligning into pixels.
| | 04:45 | That looks pretty good there.
| | 04:47 | So I've got all my buttons done.
Let me go ahead and try this out.
| | 04:50 | I'll switch over to Pages and switch
over to the Home page, and now you can see
| | 04:55 | that these automatically
get little slice symbols.
| | 04:58 | Let me go ahead and preview this in a Browser.
| | 05:00 | So I'll preview all pages in Safari, and
my rollovers are working pretty well here.
| | 05:07 | Now they're not clicking anywhere
because I haven't added links to them.
| | 05:09 | So let's do that now and that needs
to be done again in the Master Page.
| | 05:14 | So go to the Master Page and go to my
layers to turn on my web layers, and there
| | 05:21 | I can click on each one of these
and link them to one of the pages.
| | 05:24 | So this one will link to the Home page,
this one links to the artist page,
| | 05:31 | and so on and so forth. VENUE/TRAVEL and REGISTER.
| | 05:40 | Now no matter what you do, you're
always going to end up with these
| | 05:42 | little spaces sometimes.
| | 05:44 | So I just really need to use the Arrow
keys to move my button a little bit to
| | 05:49 | the right here, and I want
to check all the other ones.
| | 05:52 | These look like they are overlapping,
so I actually need to move this one there
| | 05:56 | to the right, and this
one also now needs to move.
| | 06:00 | It's not really going to kill you to
have that little bit of an overlap, I
| | 06:03 | am being a perfectionist it looks like this,
so I am in the same problem as that other.
| | 06:08 | So I double-click to get it to the Symbol,
clicked on it and Snap To Pixel, that
| | 06:13 | makes everything fit perfectly, and we'll
go to the other State and just check it
| | 06:17 | out, Over state, it looks
like it's off just a hair.
| | 06:21 | So Modify > Snap To Pixel.
That looks pretty good.
| | 06:25 | Double-click to get out, there is no
overlap, everything looks perfect, all my
| | 06:30 | buttons are also linking to pages.
| | 06:33 | So let me preview this again in a Browser,
Preview in Browser > all pages in Safari.
| | 06:42 | And now of course, I should have been
previewing--not out of the Master Page, but
| | 06:46 | it doesn't really matter.
| | 06:47 | As soon as I click on one of these
buttons it's taken me to the right page and
| | 06:51 | everything is working pretty well.
| | 06:54 | So you can see that button Symbols
help you create a lot of really quick
| | 06:57 | interactivity, and they're super-awesome
for building navigation and prototypes.
| | 07:01 | I think once you get used to them, you'll
use them all the time in your workflow.
| | Collapse this transcript |
| Creating animation symbols| 00:00 | Out of all the Symbol types, the
one you'll probably use the least is
| | 00:03 | the Animation Symbols.
| | 00:05 | It can be useful sometimes, but because
you have to save animations in Fireworks
| | 00:10 | as GIF files, they don't
always hold the best quality.
| | 00:13 | And so I'm going to show you how to do
them, but it's probably something you're
| | 00:16 | not going to use very often.
| | 00:17 | It's still quite cool
though, so let's check it out.
| | 00:19 | So what I'm going to do is create an
animation where I'm going to scroll
| | 00:23 | between pictures of the art that
somebody has done and pictures of the artists
| | 00:28 | that that art belongs to.
| | 00:29 | So what I've done here is carefully spaced
these items so they are exactly 15 pixels apart.
| | 00:35 | So I'm going to ungroup this one,
so you can see what I've done.
| | 00:37 | I've got a picture of a piece of art
right here and then another picture of
| | 00:41 | another piece of art right here.
| | 00:42 | Each one of these tiles is 90x90 pixels.
| | 00:45 | the distance in between each
of these tiles is 15 pixels.
| | 00:49 | So I did that by selecting these and
going to the space under the Align panel
| | 00:54 | and make sure that I had 15 pixels
right here, and then I clicked on this item,
| | 00:58 | that spaces them out evenly.
| | 00:59 | So if these were imperfect, you would see that,
if I click on that, spaces them out evenly.
| | 01:05 | So I've done that will all these and
I've also grouped these two pieces just so
| | 01:10 | that they are easier to deal with, and I
want to add another copy of the art to
| | 01:14 | the right-hand side.
| | 01:15 | I'm clicking and dragging while holding down
the Option key it would be Alt key on a PC.
| | 01:20 | And when I let go, it makes a copy.
| | 01:22 | So you can tell that they are not
perfectly positioned because this should be
| | 01:25 | 930 down here, and it's not.
| | 01:28 | So it means that I'm off by a
couple of pixels right there.
| | 01:31 | So I'll just space them evenly 15 pixels
apart again, and I can see that it's 930 pixels.
| | 01:37 | So my animation will go from this art
being in this position and then scrolling
| | 01:41 | and stopping when it gets to this
position, and then scrolling until it gets to
| | 01:46 | that position and stopping, and then
it's going to repeat over and over again.
| | 01:50 | So to do that what I need to do is animate
this object from this position to this position.
| | 01:57 | I need to figure out what the
distance between here and here is.
| | 02:02 | The easiest way to do to that in
Fireworks is by using the Guides.
| | 02:05 | If you drag a Guide and you hold
down the Shift key, then you'll get
| | 02:09 | these little smart information panels that
tells you what the distance is between items.
| | 02:13 | So if I go over here it tells me that
the distance from the left top edge of
| | 02:18 | this document to the
position right here is 315 pixels.
| | 02:22 | If I keep on going all the way out here,
it'll tell me that this is 630 pixels.
| | 02:29 | So from this position right here, 0,
to this position is 630 pixels.
| | 02:35 | Okay, so that's the distance
that I'm going to need to move.
| | 02:38 | What I'm going to do now is
select this group of images.
| | 02:41 | I'm going to right-click
and select Convert to Symbol.
| | 02:45 | This time I want to choose an Animation
Symbol. I'll call it Animation and I'll click OK.
| | 02:50 | When you choose an Animation Symbol
the second screen you're going to get
| | 02:53 | is this Animate panel.
| | 02:54 | Here you're going to need to decide how
you're going to animate this group of images.
| | 02:58 | So we need to decide how much
we're going to move these images.
| | 03:01 | We've already determined that
we're going to move them by 630 pixels.
| | 03:05 | We want to move them to the left.
| | 03:07 | So since you're moving on to the left,
our direction will be 180 pixels.
| | 03:12 | So you could click on this if you want
to use this, but since it's hard to get
| | 03:16 | the directions just right,
I'd like to just type them up.
| | 03:19 | So direction 180 will go this way.
| | 03:21 | Now how many states do we need?
| | 03:22 | Well, we've got essentially three
keyframes that we want to stop in this animation.
| | 03:27 | So before I do this let me go ahead and
cancel, and I'll make a new document just
| | 03:32 | to show you what we need to do.
| | 03:33 | We've got three keyframes, so
pretend these are like pages, so we'll make
| | 03:40 | them look like this.
| | 03:42 | So we've got three points that
we want to stop in our animation.
| | 03:47 | So if we wanted to go just from here to
here to here, we will just need three frames.
| | 03:52 | We want there to be some sort of transition.
| | 03:54 | So if we add at least one panel of
transition, in other words, if our photo goes
| | 03:59 | from here to something like maybe here,
and then it stops right here and then
| | 04:04 | it has another point of transition here
and then maybe stops right there, that
| | 04:09 | would be a total of five states.
| | 04:11 | If we want to add a little better and
more smooth animation then we might add
| | 04:16 | two pieces or two states in
between each one of these keyframes.
| | 04:20 | So that would be one, two, three, four,
five, six, seven keyframes or seven states.
| | 04:25 | So if we want that be more smooth, we
might add three that would make it nine,
| | 04:32 | and maybe a little more smooth.
| | 04:35 | We can add four and that would 11
total of states that we need to create.
| | 04:41 | Go back here. We've got this right now,
and it looks like we've got this moved
| | 04:46 | over, so let me move it back to its 0-0
position, and actually I'll undo because
| | 04:51 | it looks like it already took that
animation even though I thought I canceled.
| | 04:55 | So I'm undoing until I get back to this.
| | 04:57 | So back to creating the Symbol, Convert to
Symbol, create the Animation, call it animation.
| | 05:04 | So we know we want 11 states.
| | 05:06 | We want to move to 630 pixels and we want to
move it to the left-hand side and I'll click OK.
| | 05:12 | So it's going to tell me that it's
going to need to create some additional
| | 05:15 | states to accommodate the animation.
| | 05:17 | So I'll select OK and I'll go to my
States panel and I'll just check this out.
| | 05:22 | So that's moving over.
| | 05:23 | At about the half-way point, it should
move to the position that I want, that's
| | 05:28 | the second keyframe, and then if we keep
on clicking, the last frame will be the
| | 05:34 | last position that I want it to stop at.
| | 05:36 | So I can preview this if I want to,
this is pretty much an animation already.
| | 05:40 | But I don't really want it to play like this.
| | 05:44 | What I want is I want it to stop
in the middle point, so right here.
| | 05:49 | So what I'll do is I will create a
different timing parameter for each one of
| | 05:53 | these places where I want it to pause.
| | 05:55 | So here I'll type in 100th of a second
for delay, which just means 1 second.
| | 06:01 | So I'm double-clicking to the right of
each state that I want to be a keyframe,
| | 06:05 | double-clicking on that and
then typing in 100, Enter.
| | 06:09 | And the last one 100, Enter, and now
we will play this, and you see that in
| | 06:15 | animates nicely and it stops at each
of the keyframes, and it's going to
| | 06:19 | repeat that over and over.
| | 06:20 | It's doing that because I'm
asking it to repeat things forever.
| | 06:24 | You can click on that and change it
to a certain amount of times that you
| | 06:27 | want it to animate.
| | 06:28 | That looks really great, except we
don't really want to see the rest of the
| | 06:32 | animation displayed on screen.
| | 06:34 | We just want to see kind of a window
into what's happening while it animates
| | 06:39 | the other things in between.
| | 06:40 | So what I'll do is I'll come to my
Animation Symbol, which is right here, and I
| | 06:44 | will add myself a Mask to that.
| | 06:46 | There's a lot of ways of adding masks.
| | 06:48 | So I'm just going to create a rectangle.
| | 06:52 | It doesn't matter if I mess up the size.
I'm going to type it in numerically here.
| | 06:56 | I know this thing needs to be 300
pixels by 300 pixels, and I want the position
| | 07:01 | to be 0-0, so it's at
the top left of the screen.
| | 07:05 | And then I'm going to give it No Fill
and No Stroke. It already has No Stroke.
| | 07:10 | So now I can grab this Animation
Symbol and then go to the Edit menu, select
| | 07:15 | Cut and find my almost invincible rectangle
here and go to Edit and select Paste Inside.
| | 07:22 | So now if I play the animation, you'll
see that it plays really nicely in its own
| | 07:28 | spot and that's a really cool Animation Symbol.
| | 07:32 | So although you might not use this
very often, it's really a cool feature of
| | 07:36 | Fireworks that you can create
different kinds of symbols, and the Animation
| | 07:40 | Symbols just happens to be one of them that
you might find some uses for in your projects.
| | Collapse this transcript |
| Using the Common Library| 00:00 | The Common Library is a set of Library
items that are going to be available to
| | 00:04 | all of your projects.
| | 00:06 | If you know you're going to use an
element in other projects, you can also add
| | 00:09 | Symbols to the Common Library.
| | 00:10 | So let's take a look at some of the goodies
in there, and I'll show you how to add your own.
| | 00:14 | So if we go to the Window menu, you
can see that in addition to the Document
| | 00:18 | Library, there's a section for a Common Library.
| | 00:22 | So the Common Library is a set of
libraries that come with Adobe Fireworks.
| | 00:27 | And I want to make it bigger here,
so I'm going to collapse these layers
| | 00:31 | and just bring it up.
| | 00:32 | And you can see that there
are a lot of items that come in.
| | 00:36 | I'm not sure how often I would use an
Anchor, but some of these are pretty
| | 00:39 | useful, especially some of these buttons
that are automatically created for you.
| | 00:44 | There are also some browser items, so you
can find like a little bit of a browser item.
| | 00:50 | So really to use these, we just click
and drag them onto a workspace area.
| | 00:54 | So you could see this is a Browser
Bar that you could use for your mockups.
| | 00:58 | And let's see what else is in there, HTML.
| | 01:01 | So some of these are HTML goodies, so you could
find stuff like Text Areas, List Items, Links.
| | 01:07 | So, let's go over to our Pages, and we
will go to our register section where we
| | 01:16 | have a form that can benefit
from some of these symbols.
| | 01:19 | So we will go to HTML right here,
and we will find an Input Field.
| | 01:25 | So it's called a TextField, so you could
choose either a Mac or a Windows TextField.
| | 01:30 | I'm on a Mac, so I'll use a Mac.
You can use the Window one if you want.
| | 01:32 | So, if you drag this out, you could
see that it comes out as a Text symbol
| | 01:36 | and these are scalable.
| | 01:38 | So if I scale these, they
should look pretty good.
| | 01:42 | I think some of these are like regular Symbols.
| | 01:44 | So if you Double Click on them you can
see how they're made, and most of them are
| | 01:48 | 9-slice Scaling tool Symbols.
| | 01:50 | You could see that the 9-slice Scaling
Tools Guide here, it's a little bit over
| | 01:55 | to the left, so I'll move this over just
a little closer to the edge right here.
| | 01:59 | And go back into my document.
And there is that text item.
| | 02:06 | You could just Option-click and drag
these to add the other ones in there.
| | 02:13 | And Mailing Address and then
City, we'll put right there.
| | 02:18 | We'll use the Transform tool here to
make this smaller, and we'll need one of
| | 02:24 | these for Zip, transform, that a little smaller.
| | 02:30 | For the State, we're going to need a
different one, so HTML Combo Box Mac, drag that out.
| | 02:37 | And this should be a 9-slice Scaling
Symbol, too, so I should be able to resize
| | 02:42 | this and make it look pretty decent.
| | 02:48 | And I'll just copy this one now for Telephone.
| | 02:52 | So we can mockup a form pretty easily
by using these Document Common Library
| | 02:57 | Symbols, and there is a lot of stuff in here.
| | 03:00 | Some of this is really, really good.
| | 03:01 | Some of it, I'm not really sure
you're going to use a lot, but there's some
| | 03:05 | Social Network icons like a Google Plus icons
and other Twitter icons and stuff like that.
| | 03:11 | So, use whatever you
think works for your project.
| | 03:14 | I know that the HTML is a great area to
look into because it has a lot of good stuff.
| | 03:18 | So, from the Common Library panel, if
we look at the Options, we can add a New
| | 03:23 | Folder and create our
own Common Library Symbols.
| | 03:26 | So, I'll call this mysymbols and
that creates another area right here
| | 03:31 | underneath this folder.
| | 03:33 | So if we choose that, then we can
actually take anything that we've created and
| | 03:37 | add it to that section.
| | 03:38 | And as a matter of fact, when you
create a Symbol, I'll just grab this piece
| | 03:42 | of text right here, and I'll show you that
the normal Symbols go in the Document Library.
| | 03:47 | If I make a New Symbol, or I
create a Symbol out of this right here.
| | 03:52 | So, I'll Convert to Symbol. One of my
options is to automatically save this
| | 03:56 | to the Common Library.
| | 03:57 | So, if you're already creating a
Symbol and you want to make sure that's
| | 04:01 | available to all of your projects,
you can click on that and that saves it
| | 04:04 | to the Common Library.
| | 04:05 | If you've already got a Symbol and you
just want to convert it, then--let's go to
| | 04:09 | this Document Library.
| | 04:10 | There is our little Mac
button that we created earlier.
| | 04:13 | So I'm going to click on that and
actually tell it to Save to Common Library.
| | 04:18 | So Save that into Common Library, and it's
going to ask me where do I want to put this.
| | 04:23 | This is just a Graphic, notice that if
I click right here, you can see that the
| | 04:26 | Common Library is right there and all
the sub-folders are underneath there.
| | 04:31 | So I can go to the mysymbols, which is
the folder that I created and hit Save
| | 04:36 | and it's going to save that. There's mysymbols.
| | 04:40 | If you don't see it come up,
just restart Fireworks.
| | 04:43 | But there it is and under the Common
Library and we can just drag that out into,
| | 04:46 | not just this document, but
any one of our other documents.
| | 04:50 | So, I like that Fireworks has a lot of
pretty useful elements, especially the
| | 04:53 | Form Element are great to mockup forms with.
| | 04:56 | It's awesome that you can also add your
own, and your own folders so that you can
| | 05:00 | organize anyone of the symbols that you
want to use on multiple projects into a
| | 05:04 | section that you can use over and over.
| | Collapse this transcript |
|
|
7. Enhancing FireworksCreating component symbols| 00:00 | A really powerful feature in
Fireworks is the ability to create your own
| | 00:04 | customizable Component Symbols
and add them to the Common Library.
| | 00:07 | Let's take a look at how we can do that.
| | 00:09 | So Component Symbol is a special type
of Symbol that you can adjust properties
| | 00:14 | with the Symbol Properties panel.
| | 00:15 | The Symbol Properties panel is right
down here next to the Properties panel.
| | 00:19 | If I click on a symbol that has Symbol
Options, I can click on this panel and I
| | 00:23 | can modify some options about that panel.
| | 00:26 | So if you followed the movie on
using the Common Library, you saw that I
| | 00:30 | grabbed these Text elements right here from the
Common Library, which right now it's down here.
| | 00:35 | I'll pull that up.
| | 00:36 | The Common Library has a lot of
really nice library items that you can use
| | 00:40 | in all your documents.
| | 00:42 | So this is from the HTML section,
and this is called the TextField Mac.
| | 00:47 | So we grab that, we
incorporate it into the document.
| | 00:51 | When we add an element from this
library, there are some elements that
| | 00:54 | have properties in them.
| | 00:55 | So if we click on this we can change
the Text right here underneath the labels.
| | 01:00 | So we'll just select that
and type in here My Name.
| | 01:03 | And we can also change the color of
the text or the font or anything else or
| | 01:09 | like the size, for example.
| | 01:10 | There are some additional
things actually underneath here.
| | 01:13 | But we'll go back up here.
| | 01:15 | So I'll make my Text black.
| | 01:17 | If we want to just hide the Text, then
I'm just going to make it white to hide
| | 01:22 | this, and so on and so forth.
| | 01:24 | And it will be really nice if we could
create our own version of a Component
| | 01:28 | Symbol, so I'm going to show you how to do that.
| | 01:30 | So if you remember from the movie on
creating 9-slice Scaling Symbols, we
| | 01:35 | created this button and we created a label,
but it's not really part of the button.
| | 01:40 | It'd be really nice to be able to do that
in the same way that these Symbols are done.
| | 01:45 | So to do that, we're going to
need to create a Component Symbol.
| | 01:48 | I'll show you how to do that.
| | 01:49 | Have another document that I've open right here.
| | 01:51 | And this is has a Graphic
that is a button right now.
| | 01:55 | So we're going to need to set things up.
I'm going to create a TextField.
| | 01:58 | I'll zoom in a little bit and Click and
drag to get myself a nice little TextField.
| | 02:04 | Type in the word, label.
Let's scoot that down a little bit.
| | 02:14 | Okay, something that's really important
if you want to create a TextField that
| | 02:19 | you want to modify with the Component
Symbol, you have to name the Text Label
| | 02:23 | layer in a special way.
| | 02:25 | So it has to be named something.
We'll call it button and then use the
| | 02:30 | underscore, and then you can type in the
word Label. Make sure it's capital L or
| | 02:34 | the script is not going to
work, and we'll hit Enter.
| | 02:37 | And now we're ready to make this into a Symbol.
| | 02:39 | So I'll select this, right-click on it
and Convert to Symbol and I want to just
| | 02:43 | make a Graphic symbol, buttonwithlabel.
| | 02:47 | I want to turn on Enable 9-slice scaling guides.
So I want to control how the symbol resizes.
| | 02:54 | I could Click on Save to Common Library,
but I want to modify the default
| | 02:58 | position of the scaling guides.
| | 03:00 | So I'm going to just click OK for
right now and then double-click on this
| | 03:04 | element, that way I get these guides, and I
can move them so that I can protect my edges.
| | 03:10 | So they are right there, scoot that
over this way and this one over that way.
| | 03:15 | It's looking pretty good.
| | 03:17 | So I'll double-click to get out of here.
| | 03:19 | And now that I've got this button just
how I need it, I'm going to click on it
| | 03:23 | and actually go to my
Document Library, pull that up.
| | 03:26 | I'll double-click on this layer's
panel, too, just to make it smaller.
| | 03:30 | So here's my buttonwithlabel symbol,
ready to be added to the Common Library.
| | 03:34 | So I'm going to click on this pop-up
menu and select Save to Common Library.
| | 03:39 | This is going to ask me where in the
Common Library do you want to save it, so
| | 03:42 | there are all the folders that
appear under the Common Library.
| | 03:45 | I have created a folder, so if you
watched the movie on using the Common
| | 03:49 | Library, I've got this folder right here
called mysymbols, and I can just put the
| | 03:53 | symbol for this graphic
in there. So I'll hit Save.
| | 03:57 | And that saves it to that folder.
| | 03:59 | Next, I need to go over to the Commands menu and
select Create Symbol Script. I'll choose that.
| | 04:05 | And then now I need to find the symbol.
| | 04:07 | So from the Common Library
I've placed this under mysymbols.
| | 04:12 | And I need to expand this, and it's
called buttonwithlabel.graphic.
| | 04:16 | So I'll select Open, that adds the button
to this Script menu, and then I'm going
| | 04:22 | to hit the Plus sign.
| | 04:23 | And right now I only got one
element that I'm able to change.
| | 04:26 | So there's the button Label, and from here you
can choose the Attribute that you want to add.
| | 04:32 | So I can choose the Attribute Text
Characters and the Property Name.
| | 04:37 | I'll choose the Property Name that it
says Label, and then you can put a default
| | 04:41 | value in there, so, and we'll hit Save.
| | 04:45 | The script has been created.
| | 04:46 | I want to go to my previous document
and go to the Common Library, find myself
| | 04:53 | the mysymbols options here.
| | 04:55 | See if I can drag this over, maybe I
have some of these layers locked, see
| | 04:59 | where's my Layers panel.
| | 05:04 | Okay, so let me try that again.
| | 05:07 | Under mysymbols, there's my
buttonwithlabel, and now under the
| | 05:12 | Symbol Properties I could see that
I can type in another label and my
| | 05:18 | button auto-adjusts.
| | 05:20 | So this is a great way of
creating Symbols that have super powers.
| | 05:24 | It can be adjusted in different ways
and saving them to your Common Library, so
| | 05:28 | you can use them with multiple documents.
| | Collapse this transcript |
| Working with the Commands menu| 00:00 | The Commands menu lets you use pre-
made Scripts that can be useful when
| | 00:04 | working with Fireworks.
| | 00:05 | Fireworks ships with many Scripts, and you
can add more Scripts or create your own.
| | 00:10 | So there's a lot of useful stuff in there.
| | 00:12 | For example, you can go to the Commands
menu, and there are several Text commands
| | 00:16 | that you can apply, and one of them
is to change the Text to Uppercase.
| | 00:20 | So if you're looking for a quick way to
do that, you can find that right there.
| | 00:23 | You may have already seen us
use something called Add Arrows.
| | 00:27 | So if we create a line segment like this--
let's go back into Properties.
| | 00:31 | Let's give it a darker color here.
| | 00:33 | And you can go to the Commands menu and
under Creative, you can Add Arrowheads.
| | 00:38 | So there are a lot of really useful types of
commands that you can find in the Commands menu.
| | 00:44 | There we added some
arrowheads to our little line segment.
| | 00:48 | That's kind of cool.
There's a lot of kind of useful stuff.
| | 00:50 | There's some stuff that you may not
really find a use for, some Batch Commands
| | 00:54 | for rotating, for example.
| | 00:55 | There's some stuff that is really
cool like creating a jQuery Mobile Theme--
| | 01:02 | we'll cover that in another movie--
and all kinds of neat things in here.
| | 01:06 | So really this is something
that you want to take a look at.
| | 01:09 | And some other ones that I like are under Creative.
Twist and Fade is a way of animating something.
| | 01:15 | I'll just select this image, and I'll
go to Commands and then Creative and
| | 01:20 | select Twist and Fade.
| | 01:21 | This is like a super-charged way of
animating an Object, so you can control
| | 01:26 | like the number of steps that the
animation will take--let me make this a lot
| | 01:30 | smaller, because it does take a little
bit of render time to create some of these.
| | 01:36 | You can control the Direction, some of the
Blurriness, Opacity of the Fills as they
| | 01:43 | animate, and some jitter.
| | 01:46 | So there are a lot of options and this
is like the super-charged way of twisting
| | 01:51 | and animating objects.
| | 01:52 | So if you like to animate things,
this is a great way to do it.
| | 01:56 | If you click on this Animate option
right there, it's actually going to
| | 01:59 | create states for you.
| | 02:01 | So this is something you can use
instead of the Standard Animate panel to
| | 02:04 | create your animations.
| | 02:06 | So a lot of these eventually will
make it into the program itself.
| | 02:11 | So there are things in here that you
might find useful for all kinds of projects.
| | 02:17 | And you can definitely add your own.
| | 02:19 | We saw in the previous movie that we
could use something called Create Symbol
| | 02:23 | Script to add functionality to our symbols.
| | 02:26 | So that's another one that you can use.
| | 02:28 | You can go to this section here
called Manage Extensions, and it'll launch a
| | 02:33 | separate program called Extension Manager.
| | 02:36 | And it's just going to
read all the tasks right there.
| | 02:39 | So you could see that all these
commands have been added and you can turn
| | 02:42 | some of these on or off.
| | 02:44 | If you have other programs, you'll
see over here that you can manage the
| | 02:48 | extensions for those programs as well.
| | 02:51 | And there is an option of going
right here to something called Exchange.
| | 02:55 | The Exchange is where you
get additional commands.
| | 02:58 | You can search things, so for example,
you could do a search for guides and
| | 03:02 | Search the Exchange and find
additional ways of doing things in Fireworks.
| | 03:08 | Fireworks has a really good API
for creating these yourselves.
| | 03:12 | So it's a little bit out of the scope
of this course, but if you want to find
| | 03:16 | out more, look underneath the Help in
the Exchange Forums and you'll get more
| | 03:21 | information about creating these for Fireworks.
| | Collapse this transcript |
| Adding extensions| 00:00 | There are a lot of really great extensions
that are going to expand and enhance Fireworks.
| | 00:04 | So let's take a look at some other cool
and useful extensions you can find and
| | 00:08 | go through the process of installing them.
| | 00:10 | So you can find extensions
through Fireworks Exchange at this URL.
| | 00:14 | You might also checkout a couple of
web sites that I like for extensions.
| | 00:17 | This is one from John Dunning,
and he has a number of extensions.
| | 00:21 | A couple of the ones that I really
like here are the Placeholder Extension--
| | 00:25 | and we're going to install that in just
a minute--and also this Grids Extension.
| | 00:29 | So this Placeholder Extension lets you
create placeholders that automatically
| | 00:34 | have the size of the placeholder, and
it can also have the location of the
| | 00:38 | placeholder as well as some text.
| | 00:40 | So that's just a really nice
thing to have when you create mockups.
| | 00:43 | If you go to another one that he has
called Grids, this one lets you create
| | 00:47 | grids without having to open them up
as a template on the fly, and it has a lot
| | 00:51 | of little options here for some of the
grids that you can create, so I love that one.
| | 00:55 | You can also try this one, and
this is actually from Adobe.
| | 00:59 | So if you go to this URL, you can
find the Guides panel Extension.
| | 01:03 | One of the nice things about this one
is that it lets you Copy and Paste guides
| | 01:07 | between documents or between pages.
| | 01:10 | It also lets you create
guides based on an object.
| | 01:13 | So if you have a rectangle or a circle
or any particular shape, you can have
| | 01:18 | this extension create some
guides automatically for you.
| | 01:20 | So I like that one as well.
| | 01:22 | So let's see how you
would install some of those.
| | 01:24 | First we need to go to each one of these pages.
| | 01:26 | So I'll go to this Placeholder
one and find the Download link.
| | 01:30 | So here's the Download this version and
all the extensions are going to be .mxp.
| | 01:35 | So I'm going to click on that.
| | 01:36 | It's going to go to my Download Manager,
and I'm going to go to Grids, find the
| | 01:40 | Download link here, click on that,
it's going to download it as well.
| | 01:43 | And I'll come over here and this one
is actually Zip, so we'll click on that,
| | 01:49 | it'll go Download it.
| | 01:51 | And then I'm going to open up my
Downloads folder, so I'll just click on this
| | 01:55 | icon and open this right here,
and it shows me all my Downloads.
| | 01:59 | So open this folder up, which
really one is these mxp Files.
| | 02:04 | So when you find one that you want
to install, all you have to do is
| | 02:07 | double-click on the file and
it will run something called the
| | 02:10 | Extensions Manager.
| | 02:12 | Anytime you download an extension, it
gives you a warning and a lot of text to
| | 02:17 | read, so you might want to check that out.
| | 02:18 | I'm going to click Accept and click OK.
So that Guides Extension is already installed.
| | 02:24 | It's really good to read this notes,
it kind of tells you a little bit about
| | 02:26 | what the extension does.
| | 02:28 | So we've got that one installed.
| | 02:29 | I'm going to double-click
on this Grids Extension.
| | 02:33 | It gives me a similar disclaimer there,
so I'll hit Accept, and finally go to
| | 02:38 | Placeholder and also hit Accept.
| | 02:42 | So this is pretty cool!
| | 02:43 | You could see it's super-easy to
install extensions. All you do is just
| | 02:46 | double-click on the mxp Files,
it runs this piece of software.
| | 02:50 | Notice how you can install
extensions for other software in here as well.
| | 02:53 | And of course, you can remove the
extensions if you no longer want them.
| | 02:56 | A lot of times when you go in
through the extensions, you'll download
| | 02:59 | something and it might be lame or
something, so just hit Remove and no big
| | 03:02 | deal, no harm done.
| | 03:04 | That's the cool thing about extensions.
| | 03:06 | So once you've got them downloaded
and installed, you're going to have
| | 03:08 | to restart Fireworks.
| | 03:09 | So I'm going to go over to the Fireworks.
| | 03:12 | So I'm going to make sure that I Quit
first, and then I'm going to run it again.
| | 03:18 | So I'm going to close that and make a New
document and I'll just make it 800 by 500.
| | 03:25 | Extensions can install in different
places, so you kind of have to look for
| | 03:29 | them, that's why it's a good idea to
read the instructions when they come in.
| | 03:32 | So if the Placeholder Extension is a
shape, that's going to be under Auto
| | 03:36 | Shapes, so I'll need to turn that on and
scroll through this list until I find it.
| | 03:42 | Here's the Placeholder Extension right there.
| | 03:44 | So to use this, all I do is drag this
out on to the workspace area and I get
| | 03:49 | this Window right here.
| | 03:50 | When I resize this Window, you'll
notice that the width and height variables
| | 03:53 | here automatically update.
| | 03:55 | So that's kind of cool, you get a
box and the boxes tells you the size.
| | 03:59 | There are a few other options, and you
can access those by clicking right here
| | 04:02 | in this target area.
| | 04:04 | So I'll just click on that and you can
set the Size and Position numerically if
| | 04:08 | you want to, and you can Show
a Label also if you want to.
| | 04:12 | By default, you can also Show
the size and/or the position.
| | 04:15 | Now unfortunately, when you move this
over it's not going to update the position.
| | 04:19 | To update the position, you'll have to
click on this and click OK, and then it
| | 04:23 | updates the position, or you'll
have to perform maybe a slight resize.
| | 04:27 | It's not really optimal.
| | 04:28 | So I don't really like to have position
on, because you're not going to remember
| | 04:33 | to do that every time.
| | 04:35 | But it's kind of nice, you can set the Height
and Width here and the X and Y position manually.
| | 04:40 | And I like having the Label. You can even
type in what you want the label to be.
| | 04:44 | That sometimes kind of
cool for creating prototypes.
| | 04:46 | So guides are a panel, so that would be
under Window, and you can scroll down
| | 04:52 | until you see this thing called Guide.
| | 04:54 | So it's kind of cool, you can
add entire panels with extensions.
| | 04:59 | And this one doesn't exactly look
like the Standard Fireworks Panels.
| | 05:03 | You can dock it if you want to.
| | 05:04 | And one of the things that it will let you
do is create guides based on a selection.
| | 05:10 | So you could say, "Hey, I've got a
selection here. I want you to create some
| | 05:12 | guides going through the
middle of that selection."
| | 05:15 | You can also say, "Ah, just give me the top right
corner, bottom right corner et cetera, et cetera."
| | 05:20 | So you could see that you can
create guides base on an object.
| | 05:23 | And that's something that's not available
in Fireworks, but I find kind of useful.
| | 05:28 | So just go back to the General section here.
| | 05:31 | And in here you can go
ahead and Clear the guides.
| | 05:34 | You can Save some of this guides, you
can Copy in between pages, so you could
| | 05:39 | say, "Hey, let me go ahead
and add some guides there."
| | 05:42 | So I'll go back to Selection, and I've
got that selected, so I'll just outline
| | 05:46 | the selection and then come back to General.
| | 05:49 | So after this you can go
ahead and Copy the Guides.
| | 05:52 | After you create a page, you can paste this
into any master page or Paste Master Guides.
| | 05:59 | I mean, this is like Guides on steroids.
| | 06:01 | And if you are one of these people
like me who loves Guides and does a lot of
| | 06:06 | stuff to align things, this is
a really cool extension to have.
| | 06:10 | Grids is similar to Guides. It
creates Guides, but it's a command.
| | 06:14 | So that will be available
under the Commands menu.
| | 06:17 | And if you go to that and select Grids,
and you can select Insert Grid and
| | 06:23 | this is a little pop-up menu here that allows
you to set a grid with all of kinds parameters.
| | 06:28 | So this will be like a grid system. If
you're really into laying out web sites
| | 06:32 | with grids, you can set all your
parameters here, the X and Y Origin, the
| | 06:37 | Widths, how many Columns you have, so
you could change the amount of columns,
| | 06:40 | where the columns start, and all
that stuff and then hit OK. And bam!
| | 06:44 | You've got a really nice Grid System here.
| | 06:47 | It would take me so much time to
just lay out that Grid by hand.
| | 06:51 | But by having that command, I
can do it in a couple seconds.
| | 06:54 | So if you're proficient with JavaScript,
you can also create your own extensions.
| | 06:58 | And to learn how to do that, you need to
go to the Fireworks Development Center,
| | 07:02 | add this URL, and there's a lot of
articles about creating your own extensions
| | 07:07 | and your own commands.
| | 07:08 | So if you're into that sort of development,
make sure you check out this web page.
| | 07:12 | Fireworks is a really mature program,
and it's hard to believe that you'd ever
| | 07:15 | want to add anything to it.
| | 07:17 | But there are some really cool
and useful extensions out there.
| | 07:19 | The ability to add your own
makes Fireworks even more powerful.
| | Collapse this transcript |
| Creating commands with the History panel| 00:00 | The History panel is one of Firework's gems.
| | 00:02 | It records every action you perform within
Fireworks, and it also lets you do one little trick.
| | 00:07 | It allows you to build your own commands
based on some of the actions you've performed.
| | 00:11 | So let's take a look.
| | 00:12 | I'm going to create a new document,
just Command+N or Ctrl+N on a PC, just give
| | 00:16 | it an 800 by 500 pixel Width and
Height, and hit Enter to accept.
| | 00:22 | And then I'm going to
click on this Rectangle tool.
| | 00:25 | I have the History panel already showing here.
| | 00:27 | If you don't have that showing, just go
to the Window menu and select History.
| | 00:31 | So now when I draw something on my
workspace, the History panel is going to show
| | 00:37 | me not only what I'm doing, but
it's going to record every step.
| | 00:39 | So I do that Rectangle, and then I'm
going to make sure that it's 90 pixels by
| | 00:44 | 90 pixels, so I'll type those values right here.
| | 00:47 | Notice that it's recording the transformation.
| | 00:49 | I'm also going to add some Roundness
to it, about 25 pixel looks really good.
| | 00:54 | It recorded that as well.
| | 00:55 | And I'm going to click on the Pointer
tool and click and drag while holding down
| | 01:00 | the Option key and the Shift key to
constrain that movement and let go.
| | 01:06 | That made a duplicate of
the first rounded rectangle.
| | 01:09 | I hit Command+Y a couple of times.
| | 01:11 | That just makes some extra copies.
| | 01:13 | And then I'll select all, Command+A or
Ctrl+A on a PC, and I'm going to go to
| | 01:18 | Align and make sure that this are
aligned 15 pixels in between each one of these
| | 01:22 | elements horizontally, so I'll click on this.
| | 01:25 | It looks like I did it just right,
so it didn't do any adjustment there.
| | 01:29 | Back to History so you can see what's going on.
| | 01:31 | I had added a Command Script, and
then I'm going group these elements.
| | 01:36 | There's the Group in the History panel.
| | 01:38 | Click and drag while holding down the
Option key and the Shift key, and then I'm
| | 01:43 | going to hit Command+Y a couple more times.
| | 01:45 | On purpose, I made it a little taller
than it should be, so Command+A to select
| | 01:50 | everything, back to Align, and this time
I'll space evenly vertically 15 pixels,
| | 01:55 | and now I got a perfect grid.
| | 01:57 | I will Command+G to group those items together.
| | 02:01 | And if I go back to the History panel,
scroll this up right here, there's all my
| | 02:06 | steps to create that perfect grid.
| | 02:09 | So I use grids a lot in my layouts, so
I may want to save this as a command.
| | 02:13 | To do that, I'm going to click on the
first and the last item in this list here,
| | 02:18 | and I'm holding down the Shift key.
| | 02:20 | It's going to make sure that I grab all of them.
| | 02:21 | Then I'm going to hit this button right
here, it's called Save steps as a Command.
| | 02:26 | Click on that and I'm going to
give this thing a name, blackgrid.
| | 02:29 | Just for kicks, I'll not put a space.
| | 02:31 | Hit OK and that becomes now a command
that I can access through the Commands menu.
| | 02:37 | Here's my blackgrid command.
| | 02:39 | I'm going to open up a new document,
hit Enter, and now if I want to create a
| | 02:45 | new grid, all I have to do is go to
the Commands menu, select this grid, and
| | 02:48 | there it is, and I can
ungroup it a couple of times.
| | 02:51 | And if I wanted to, I can get rid of the last
few pieces of the grid and make a 3 by 3 grid.
| | 02:56 | So it's really cool, just taking some
steps in the History panel, I was able to
| | 03:01 | create a command that I can use
over and over in a lot of my projects.
| | 03:05 | If you want to get rid of a command,
just go to Manage Saved Commands right here
| | 03:09 | and you can get rid of any of
these commands or rename them.
| | 03:12 | So I'm going to click OK, I don't
really want to do anything to it.
| | 03:17 | Now the History panel is
just more powerful than that.
| | 03:20 | You can back up, like I said,
back to any other command.
| | 03:24 | You can actually delete commands from
here, or you can say I want to back up to
| | 03:27 | the point that I had just this group right here.
| | 03:31 | And then from here on I want to do
something else, so I'm going to do that.
| | 03:34 | Notice that it gets rid
of everything afterwards.
| | 03:37 | So when you put your position right
here, this little marker, anything you
| | 03:41 | do after that marker will become the new
sequence that it stores in the History panel.
| | 03:45 | You don't have to copy a
contiguous group of elements from this list.
| | 03:50 | You can hit the Command key and
just copy some of the commands.
| | 03:54 | Sometimes some of these commands are
not really necessary for the command that
| | 03:58 | you're saving, so you just Command-click
on the ones that you want to save, and
| | 04:02 | then you can save those as a command.
| | 04:04 | You can also copy steps to the clipboard.
| | 04:07 | You can also apply any sort
of filter, any sort of lines.
| | 04:11 | So anything you can save as a history
item is going to be available to you to
| | 04:15 | save as a command, and that's going to let you
build some really powerful stuff very easily.
| | Collapse this transcript |
| Using batch commands| 00:00 | If you need to make some common changes
to files like resizing a folder full of
| | 00:03 | images or add a custom command you've
built with the History panel, you can use
| | 00:07 | the Batch command under the
File menu to make things easier.
| | 00:10 | So if you go the File menu and select
Batch Process--and I'm going to go to
| | 00:15 | the Desktop, find the Exercise Files
folder, and find the folder for this
| | 00:19 | movie. You'll see that I have a couple
of folders there. One of them has got
| | 00:24 | pictures of some artwork.
| | 00:26 | They're pretty big.
They're just whatever we got from the artists.
| | 00:30 | So I want to go ahead and
resize all of those files.
| | 00:33 | I could do that one by one, open each
file and then resize them manually, but
| | 00:38 | it's nice that this program
allows you to do something in batch.
| | 00:41 | So hit this Add All button right here.
| | 00:43 | I can also just Shift-click or Command-
click, Ctrl-click on a PC, to select them.
| | 00:48 | But I'll just hit Add All, it adds all the
files, and then I'm going to hit this Next button.
| | 00:53 | Here I can perform a number of Batch commands.
| | 00:55 | You could see that there is an Export
command, Scale command, and you can even
| | 01:00 | have stuff from the Commands menu.
| | 01:02 | So you can add things that you've
created yourself here or add any of these
| | 01:07 | other options, say you
want to rotate the photos.
| | 01:09 | This is probably why those commands
exist in the Commands menu like you might be
| | 01:13 | wondering why would I need a command
to rotate something in 180 degrees?
| | 01:18 | Well, that's because you can do that to a
whole batch of photos with the Batch command.
| | 01:22 | So what I want to do here is Scale,
and so I'll Add this command to be
| | 01:27 | included in the Batch.
| | 01:28 | And underneath the Scale, I have
some options that I can choose.
| | 01:32 | So I want to Scale to Fit Area to make
sure that my photos fit within a specific
| | 01:37 | size, and I'll do 600 Pixels wide so
this is the maximum width and height.
| | 01:42 | So I want the photos to end up being no wider
than 600 pixels and no taller than 600 pixels.
| | 01:49 | You can also choose to only scale
documents currently larger than the target
| | 01:52 | size if you want to.
| | 01:54 | And then I can do another option which is
Export, and I'm going to hit Add over here.
| | 01:59 | Now, I have the option of exporting the
graphics in a specific file format, so I
| | 02:05 | could say I want these as JPEG -
Better Quality, and you can hit Edit and have
| | 02:09 | more control over how everything is saved.
| | 02:12 | This option is fine for me right now.
| | 02:13 | So these are the commands that I'm executing.
| | 02:16 | You can move the command around
if you want something to happen
| | 02:19 | before something else.
| | 02:21 | You can kind of move them
around with these arrows.
| | 02:23 | This is fine, I want to scale,
and then I want to export.
| | 02:25 | As you could see, it could get really
complicated here and any of these other
| | 02:28 | ones, but these are the two that I need.
| | 02:30 | So I'm just going hit Next, and then
you can choose to output to the same
| | 02:36 | location as an original file, output a
custom location, and whether or not you
| | 02:42 | want to overwrite existing backups.
| | 02:44 | So you can actually have it back
up some other versions of the file.
| | 02:47 | I want to choose Custom location, and
then as a custom location, I'll just
| | 02:51 | put them on the Desktop, so I'll hit
Choose and the Backups option is gone right now.
| | 02:56 | Notice that you can also save the script.
| | 02:58 | So I'm going to save that, resizeimages,
put it on the Desktop as well just so
| | 03:04 | that it's easy for me to find, and
I'll hit Save, and then I'll hit the Batch
| | 03:08 | button and it'll go to town here in a second.
| | 03:11 | There is the file that I saved, and
there it is processing each of the
| | 03:15 | images, saving them to an appropriate
dimension, and I'll hit OK and it takes me back here.
| | 03:23 | But you could see that now it's
created all these images and it's resized
| | 03:27 | them to a nice size that I can use for the web
that is no taller and no wider than 600 pixels.
| | 03:33 | A lot of times you get a ton of photos,
and they're all shot in--now the cameras
| | 03:37 | are up to like 20 Megapixels and you
really want them to be 20 Megapixels.
| | 03:41 | I've seen humongous photos online.
| | 03:44 | We want to be able to just compress
them to something at least more workable.
| | 03:47 | We could use this kind of command to
create something that is a script that you
| | 03:51 | can use when you're batch-processing photos.
| | 03:53 | If you want to do this again, all
you've got to do is double-click on this.
| | 03:56 | Notice that it immediately brings
this up, what do you want to process?
| | 03:59 | So you could hit this button, find the
folder for this movie, and I'm going to
| | 04:06 | click on artists here, and I can
batch-process these guys as well.
| | 04:12 | And if I hit OK, it's going to
go through and process those.
| | 04:16 | Now I might have a problem because my
photos happened to be named exactly the
| | 04:20 | same, so I probably wanted to move those.
Let's see what it's doing.
| | 04:26 | See, it actually replaced my other ones.
| | 04:28 | So it would have been a good idea to put
everything in a folder before I did the
| | 04:31 | second batch, the artists and their
art are named exactly the same thing.
| | 04:36 | So I'll replace them, but you could
see that this is really pretty cool and
| | 04:39 | useful, and it would be nice if I could
add this resizeimages command somewhere
| | 04:44 | where I could get to it again.
| | 04:45 | So to do that, I'm going to search for
something in the Batch Commands folder.
| | 04:50 | So I know that I have added a command,
if you've watched the previous movie on
| | 04:54 | creating commands with the
History panel called blackgrid.
| | 04:56 | So what I'll do is I will do a Command+F,
which is how you find things on a
| | 05:01 | Mac, I'm just going to type in the extension .jsf,
and it looks like it finds a lot of them.
| | 05:07 | So let's see.
| | 05:08 | I'm going to click on one of these.
| | 05:09 | It looks like it finds the Adobe Fireworks
CS6 folder, Configuration, Auto Shape Tools.
| | 05:16 | So these are kind of hard to find.
| | 05:17 | They're in different places on the Mac and PC.
| | 05:20 | So if you could do a search for .jsf extension,
it'd probably be quicker to find it that way.
| | 05:25 | So I'm going to double-click on this
Configuration folder and there's all the
| | 05:29 | different things that I can add to Fireworks.
| | 05:32 | I can double-click on these
Commands and look for this Batch Commands
| | 05:36 | section right here.
| | 05:37 | This is the folder I want
to put that resizeimages.jsf.
| | 05:41 | And then I'm going to drag that in here.
| | 05:44 | I'm going to need to restart Fireworks in
order for that command to be available to me.
| | 05:49 | So let me go ahead and quit,
and I'll restart Fireworks.
| | 05:55 | Okay, and I'm going to go ahead and
put these in a folder, and I'll do the
| | 06:04 | art the second time.
| | 06:06 | So back over here, there's Commands, there's
Batch Commands, and here's my resizeimages.
| | 06:12 | So if I choose that, it
immediately brings that up.
| | 06:15 | The nice thing about it is I
don't have to have it somewhere in a
| | 06:18 | Documents folder now.
| | 06:19 | It's always within all of the other
commands that Fireworks automatically puts
| | 06:24 | in this little menu.
| | 06:25 | So I'm going to say Files to Process,
I'll say Custom here, and I will find my
| | 06:31 | Desktop folder, Exercise Files, find the
art folder again, and select all these,
| | 06:40 | click on Open, hit OK, and
it's going to process it now.
| | 06:46 | Once it's done, click OK, and
there they are on the Desktop.
| | 06:50 | I can create another
folder and put those in there.
| | 06:56 | That becomes a personal command that I can
use over and over in all of my projects.
| | Collapse this transcript |
|
|
8. Using SpritesUnderstanding sprites| 00:00 | One of the great features in
Fireworks is the ability to export sprites.
| | 00:04 | Before I show you how to work with
sprites though, you might be asking
| | 00:07 | yourself, what is a sprite?
| | 00:09 | Sprites are a technique where a
designer or developer combines many images on a
| | 00:12 | web site into a single image.
| | 00:14 | This has the effect of reducing the number
of requests your page makes for information.
| | 00:19 | As a result, your pages will load quicker,
and you'll reduce the load on your server.
| | 00:24 | Even with the best compression software,
an individual image has a little bit of
| | 00:28 | information overhead, information about the file,
colors used in the document, et cetera.
| | 00:33 | When you export a lot of slices,
that extra overhead adds up quickly.
| | 00:37 | When you multiply that overhead by the
many users making page requests, usually
| | 00:41 | for the same graphics, it can be dramatic.
| | 00:44 | Also, when you slice rollover images,
the server requests the rollover states
| | 00:48 | only when needed, and sometimes that
can cause a little bit of a flicker.
| | 00:52 | When the file is saved as a single
sprite, all the states for your graphics get
| | 00:56 | loaded at the same time.
| | 00:57 | Every request for a file adds an
additional load and overhead to your server
| | 01:01 | since the browser has to ask for every file.
| | 01:04 | Those additional requests can also
be slowed down by the network's slow
| | 01:08 | connection, adding up to the
overhead for each additional file.
| | 01:11 | It is estimated that loading assets
other than the HTML can take 70%-90% of
| | 01:17 | the time it takes to load up a page, even on
popular sites like Google or Yahoo and eBay.
| | 01:21 | So let's take a look at how this
is going to work on a simple page.
| | 01:25 | So I've got a couple of pages loaded up
in my browser here, and they look identical.
| | 01:30 | So if click on this tab, you can see
that we've got a page with our artists and
| | 01:35 | when you roll over each of the
artists' name, you can see their artwork.
| | 01:39 | Same thing is happening on this tab.
| | 01:40 | They look exactly the same.
| | 01:42 | One of them is using sprites--which is this one
right here--and the other one is using slices.
| | 01:47 | They don't look any different, but let
me show you how the browser sees them and
| | 01:51 | how the server sees the requests that
get sent for images from the browser.
| | 01:55 | So I'm going to go to the Develop menu.
| | 01:57 | If you don't have this menu up on your
screen, I want to go to Safari and go to
| | 02:01 | Preferences, then go to the Advanced
tab, which is the last tab right here.
| | 02:04 | Make sure you've got this option
on, Show Develop menu in menu bar.
| | 02:08 | That allows you to see this
particular menu that we have right here.
| | 02:12 | Once you've got that menu, you
want to go to Show web Inspector.
| | 02:16 | So the web Inspector is going to
show you information about the page.
| | 02:19 | I'd like to dock my web Inspector
onto the page, so I'm going to click this
| | 02:23 | right here, and then I'm going to
do the same thing for the other tab.
| | 02:26 | So Develop > Show Web Inspector, and I'm
going to dock it by clicking right here.
| | 02:31 | What you want to do is you want to go
to one of these tabs, and after you've got
| | 02:35 | this docked and ready to go.
You want to reload this page.
| | 02:38 | You're going to see the client make
a request to a server that has this
| | 02:42 | information, and you're going to see how
long it takes for the client to receive
| | 02:46 | the request back from the server.
| | 02:48 | So the client is taking a long time
making the request due to Internet slowdown
| | 02:52 | to see all of those time kind of
wasted here waiting for the server to reply.
| | 02:55 | And then, when the server sends back
the information, you can see that it gets
| | 02:58 | here really quick because
this is a really small file.
| | 03:01 | So you can see that happening three
times for a total of 247 milliseconds, there
| | 03:06 | has been three requests, and you have
a total of 1.21 kilobytes transferred.
| | 03:11 | Let's take a look at this page with
slices, and we'll do the same thing.
| | 03:14 | Just come over here and we'll just
refresh the page, and you could see already
| | 03:18 | that this one makes a lot more
requests than the previous page.
| | 03:22 | It took longer, 2.12 seconds, as opposed
to just milliseconds on the previous page.
| | 03:27 | It's also a lot bigger, 2.87 kilobytes,
and this is just a very tiny file.
| | 03:32 | So you could see that reducing the amount
of requests is already making a big impact.
| | 03:36 | The other thing is some of
these graphics haven't even loaded.
| | 03:39 | Some of these graphics won't load
until I roll over them, and if this is the
| | 03:42 | first time you roll over a file, you
could see maybe a little flicker there and
| | 03:46 | you saw some of the images loading up
a little bit after I did the rollover.
| | 03:50 | So somebody's images didn't even load
until 28 seconds after the original request.
| | 03:55 | It loaded pretty quickly, you can see
that that can add up on a large web site.
| | 03:58 | So this one is using regular slices,
which means I have a different version of
| | 04:02 | each one of these images
twice because I have rollovers.
| | 04:05 | And this one is using just one single file.
| | 04:08 | The difference is super-dramatic,
even on these very small files.
| | 04:12 | So learning how to use CSS Sprites is
going to save you a lot of time. You can
| | 04:16 | reduce the amount of requests, and just
think, every time you request an item on
| | 04:20 | a server, that is an HTTP request.
| | 04:22 | So just reducing the amount of requests,
if you don't do anything else at all,
| | 04:26 | that's going to save you a ton of time
and speed up everything on your site.
| | Collapse this transcript |
| Creating symbols for sprites| 00:00 | Creating Sprites in Fireworks CS6
is a pretty straightforward process.
| | 00:04 | First, you will need to use the Slice
tool to define the shape of the objects
| | 00:07 | you want to include in your Sprite,
and then you export the Sprites.
| | 00:11 | If you're using Sprites for rollovers,
this is one place where a little bit of
| | 00:14 | forethought is going to
make your life easier later.
| | 00:16 | So let's take a look.
| | 00:17 | So I'm going to go to my Pages and
switch over to my Artists page, because I
| | 00:23 | already have some photos here that
have Slices already on top them.
| | 00:29 | So what you can do to export a Sprite-sheet is
simply just click on each one of these images.
| | 00:34 | So I'm holding down the Shift key with the
Pointer tool to select a bunch of images.
| | 00:40 | And once I got all of them, I'm going
to go to the File menu and select Export.
| | 00:47 | From here I'm going to choose Export
CSS Sprites, and I want to make sure that I
| | 00:52 | have only the Current Page selected,
or it will try to export all the pages.
| | 00:56 | And also, to have Selected Slices
Only so that it doesn't export any
| | 01:00 | other slices on the page.
| | 01:02 | And then I'm going to click on Options and
this where I define my options for a slice.
| | 01:06 | Here you can choose whether you want a
class or an id Selector for your CSS.
| | 01:11 | It really depends on how you've
organized your page. So it's up to you.
| | 01:15 | You can include a Prefix so that it
prefixes every single name of every slice
| | 01:20 | with whatever you have here.
| | 01:21 | So if you do something like ic_, it
will prefix the name of each class with ic_
| | 01:27 | and then the name of the Slice,
and then you can add some Padding.
| | 01:31 | This will allow you to space out the images.
| | 01:34 | So I have 100 Pixels right here.
| | 01:36 | If you're doing a certain type of
layout, you want to make sure that you give
| | 01:40 | your items enough space in between
them so that if you have objects that are
| | 01:43 | very tall, for example, you won't see
any icons underneath the current icon.
| | 01:48 | So here you can choose whether you have
a Horizontal, Vertical, or a Grid Layout.
| | 01:53 | If you're doing, say, a list of images
that are links that are on top of each
| | 01:57 | other, then you should choose Vertical.
| | 01:59 | If you're doing a horizontal menu type
element, then you can choose Horizontal.
| | 02:04 | You can also choose a Preset right
here for how the file will be compressed.
| | 02:08 | So you can use PNG32, usually what you
want to use, except this is a bunch of
| | 02:12 | photos, so a JPEG works a little bit better.
| | 02:15 | You can try a better quality or
smaller file, it doesn't really matter.
| | 02:18 | These pictures are so small that it's
not going to make a huge difference.
| | 02:21 | So I'll choose JPEG - Better Quality,
and I'm going to click OK, and I'll just
| | 02:26 | save these on the Desktop.
| | 02:27 | So I'll hit Export. And if it tells
you this, just go ahead and say OK.
| | 02:32 | And I'm going to show you in the
Desktop the two files that it generated.
| | 02:37 | So this is the artists.jpg file, and there it is.
| | 02:40 | Because this file has different states,
it creates a state for the normal
| | 02:45 | version of the image and then a state for the
piece of artwork that is on the second state.
| | 02:50 | Notice that it did that for all of the
images right here, which is kind of nice.
| | 02:54 | Let's take a look at this CSS file though.
| | 02:57 | So if I open that up and hitting the
spacebar on the Mac to preview it, you can
| | 03:01 | see the main artists CSS class is right
here, that looks great, but underneath
| | 03:06 | all this is a little bit hard to
figure out what it's supposed to be.
| | 03:09 | That's because we didn't name any of
the classes so these all have names
| | 03:13 | generated by Fireworks.
| | 03:14 | This is one of the images, and
underneath you can see this is the second state
| | 03:19 | of the image, it's called _1 with the same name.
| | 03:22 | And if we looked at the photos, you
would see that they're in the order that the
| | 03:26 | photos are right here, but still, it's
really hard to figure that out and it
| | 03:30 | will be horrible to try
to use the CSS in this way.
| | 03:32 | So I'm going to show you a
better way of organizing these.
| | 03:34 | I'm going to go back into Fireworks.
| | 03:37 | And so what I want to do is I want
to copy these images and create a new
| | 03:40 | document where these images are
organized like buttons or as button symbols and
| | 03:46 | then use those button symbols to
have Fireworks generate the code for us
| | 03:50 | automatically, so it does a much better job.
| | 03:53 | So I'm going to go over to layers and
hide my web layer, and I'm going to copy
| | 03:58 | all of these photos.
| | 04:01 | And it looks like I have some lines in
between, so it will be better to just
| | 04:03 | Click and Shift-click them,
until I have all of them.
| | 04:11 | So there I have all of them.
| | 04:12 | Now, I'm going to copy them, so Edit > Copy,
and I'm going to create a new
| | 04:16 | document, File > New, and I'm just
going to give myself a pretty big document
| | 04:21 | here, 800x500, hit OK.
| | 04:24 | That makes a New document.
| | 04:25 | I want to grab the tab, and I'm going to
put it right beside the current document
| | 04:29 | in between the current document
and the Panels area right here.
| | 04:33 | That puts the document side by side.
| | 04:35 | And I'm scrolling over to the left side
and I'm going to paste my images there.
| | 04:39 | So let's see, I want to kind of align
them, so I'm going to just pick a few
| | 04:46 | of them and I want to make sure these are kind
of in the order that they are supposed to be.
| | 04:50 | So they don't have to be perfect.
| | 04:52 | I'm going to align them in just a minute.
| | 04:57 | And you might have to zoom out
a lot to get these last three.
| | 05:01 | They're a little bit underneath.
| | 05:02 | You can make a selection
even outside the workspace.
| | 05:06 | You will have workspaces by doing a
normal selection in that area, so there's
| | 05:10 | the images in relative order, and then
I'm going to come over here and look for
| | 05:16 | my art, which luckily, is
right next to these images.
| | 05:19 | I'll just grab all these and
copy and just paste them over here.
| | 05:29 | And what I want to do is
just have them be aligned.
| | 05:34 | Definitely make sure these are aligned
perfectly, and then I can create my symbols.
| | 05:38 | So I'll spend some time aligning these.
| | 05:40 | I'll position this one at 00 position.
| | 05:44 | And to align these, what I'll do is
I'll click on each of these three, and then
| | 05:48 | I'm going to align these, I think, to
the bottom, because the bottom ones are
| | 05:52 | aligned where I want them to be.
| | 05:53 | And I want the spacing to
be 0 pixels between each one.
| | 05:57 | So I'll click on this and I can see
that my Width is 270, which is what I want
| | 06:02 | and my Height is 90, and it's
positioned at 00 in my Properties panel.
| | 06:06 | So I know these are perfectly aligned now,
and I'll just do the same thing for all these.
| | 06:11 | So I'm going to Group each row, selecting these
three and hitting Command+G or Ctrl+G on a PC.
| | 06:21 | And I'm just going to make sure that
these are all also aligned vertically.
| | 06:25 | So I'm selecting all three of these
and make sure I click on space evenly,
| | 06:29 | 0 pixels and I know these are all perfect.
| | 06:31 | I can see that by looking at this
Width and Height here, it's 270x270.
| | 06:35 | So now that all that is ready, I
need to do the same thing over here.
| | 06:38 | So now these are all done.
I'm ungrouping both of these.
| | 06:43 | So what I'm going to do is I'm going to
make symbol out of each one of these and
| | 06:47 | then for each one of these photos, I'm
going to create a second state and put
| | 06:52 | the alternate version or the artwork
for each person in that symbol for the
| | 06:57 | second state, which will be the over state.
| | 06:59 | So for this guy, I will go ahead and
right-click on him, Convert to Symbol, and
| | 07:04 | this will be a button symbol.
| | 07:05 | It doesn't really matter what name I give him.
| | 07:07 | It matters what the name of the
instance will be, but it's not going to matter
| | 07:12 | what name I give him here.
| | 07:13 | You can, if you want to be more
careful about the symbol names, but it's
| | 07:16 | not going to matter.
| | 07:17 | So I'm just going to hit OK, and there I
created a button symbol. And what I want
| | 07:22 | to do is I want to take this piece
of art here and I'm going to cut it,
| | 07:26 | double-click on the button symbol, go
on to the States panel, choose the Over
| | 07:31 | State, paste, and just make sure that
that is in the correct spot, which will be
| | 07:36 | right there, then double-click and
just do the same thing for all these.
| | 07:40 | It's going to take me a
while to get it done, so.
| | 07:44 | Okay. So I have all of my Buttons created.
| | 07:46 | Each button has a Second State, and on
the Second State I have the alternate
| | 07:50 | version that shows the artwork
that each artist has created.
| | 07:54 | The next thing you want to do is you
want to name each of these Buttons, and this
| | 07:58 | is what's going to help you when it
generates the CSS, because it's going to use
| | 08:02 | the names that you used
here to generate your CSS code.
| | 08:05 | So what I want to do is just rename each
of these Buttons the name of each person.
| | 08:11 | So I have the ames on
this other page right here.
| | 08:14 | So let me go ahead and zoom in a little bit.
| | 08:18 | And I will just copy the Name and
paste it into the proper symbol here.
| | 08:25 | So I'm back on this document, and I'll
click on the button symbol, and I'll go
| | 08:29 | ahead and paste the name here.
| | 08:31 | I usually take away like any spaces,
and if somebody has a name like Jonathan
| | 08:36 | here, I'm just going to use
the first name and the last name.
| | 08:39 | So I will just call that Jonathan Ferrar.
| | 08:40 | For Hillary Hewitt Goldwynn-Post,
I'll just use Hillary Goldwynn, just to
| | 08:45 | make my life easier.
| | 08:46 | So I'll use the First Name, Last Name,
I will capitalize, but I won't use any
| | 08:50 | spaces in between the names.
| | 08:51 | So I'm going to do that for
all these. I got the name.
| | 08:53 | I'm going to hit Enter.
| | 08:56 | Okay, so now that I have all of them
finished, make sure that you've got every
| | 09:00 | single one of them named properly, no
spaces or weird characters in between, and
| | 09:06 | make sure you don't have any that are not named.
| | 09:08 | Sometimes it's hard to get the names
just right, and it will try to rename it
| | 09:11 | automatically for you.
| | 09:13 | So once you've got them all named
properly, then I'm going to go ahead and go to
| | 09:18 | the Modify menu and just trim all that
white space by going to Modify Canvas >
| | 09:22 | Trim Canvas. It gets rid of all the white space.
| | 09:26 | I know that I'm going to want this
icons to be pretty tiny, so I'm going to the
| | 09:29 | Modify menu > Canvas and select Image Size.
| | 09:32 | And I want to pick 96 Pixels
by 96 Pixels and hit OK.
| | 09:38 | That's going to make each of our
Slices 32 Pixels Wide by 32 Pixels Tall.
| | 09:43 | And now we are ready to export this.
| | 09:46 | So we'll go to the File menu
and once again select Export.
| | 09:48 | From here, we'll do Export CSS Sprites again.
I just want the Current Page.
| | 09:53 | We're going to do Selected Slices
Only because you don't have any slices
| | 09:57 | selected, and this particular document
only has the Slices we want to export.
| | 10:02 | So we're going to click on Options here.
We're going to use class.
| | 10:06 | We'll use the ic Prefix once again.
Leave these settings just as they were.
| | 10:10 | Under pixel Padding, Vertical Layout, JPEG -
Better Quality Optimization, so all that is fine.
| | 10:15 | And I'm going to hit OK and
I'll just call it artists.jpg,
| | 10:21 | and I'll just let it overwrite
the files on the Desktop.
| | 10:23 | So I'll hit Export, it already exists,
you want to continue and replace, Yes,
| | 10:28 | Yes, and now we'll take a look at the JPEG file.
| | 10:32 | It's going to be the same as before.
| | 10:34 | However, the CSS file is
going to look a lot nicer.
| | 10:37 | Notice that it used the first class here,
the artists class, to define our JPEG
| | 10:43 | and the generic position for a JPEG.
| | 10:45 | But on each of these other classes, it
generated the class with the name already
| | 10:50 | in the class name and it generated a
Hover State because this time we generated
| | 10:54 | Buttons and Buttons give you that
automatically Hover Position, instead of the
| | 10:59 | weird name we were getting before.
| | 11:00 | So as you can see, generating Sprites
and the CSS for them is super easy with
| | 11:05 | Fireworks, especially if you spend
a little bit of time setting up your
| | 11:08 | documents with button symbols
when you want to do Hover States.
| | Collapse this transcript |
| Exporting sprite CSS| 00:00 | I want to show you how to prepare an HTML
page using Sprites generated from Fireworks.
| | 00:04 | This is a file that has been
set up for exporting to Sprites.
| | 00:10 | You can see that there are different
icons or different little symbols for each
| | 00:13 | one of these people, these different artists.
| | 00:15 | And if I double-click on one of these
artists--you got to be careful not to
| | 00:19 | double-click in the middle, so
I'm going to load it, double-click--
| | 00:22 | you can see that every artist has two states:
| | 00:25 | a Regular State, or an Up State, and an
Over State that is a sample piece of art
| | 00:30 | from their collection.
| | 00:31 | So they're all set up like that.
| | 00:33 | I'm going to go back to Page 01 here, and
they're ready to be exported as a Sprite.
| | 00:38 | So I'm going to go to the
File menu and select Export.
| | 00:41 | And from this Export menu, I can choose
CSS Sprites from this pop-up, and then
| | 00:47 | I'm going to need to check Options here.
| | 00:49 | So before I do that, I'm going to go
to the Desktop and make myself a site
| | 00:52 | folder, I'll call it site, Create,
and I'm going to hit Options here.
| | 00:58 | I need to set up my options for exporting.
| | 01:01 | What I want to do is set up a class.
| | 01:03 | My class is going to be Prefixed by an
ic_ so that whenever it saves, the CSS is
| | 01:10 | going to include an ic_ at the beginning
of each class name and then the Name of
| | 01:15 | each one of the slices or the
symbols that I have created.
| | 01:19 | Then I need to consider
how I want to add my Padding.
| | 01:21 | This is going to be a vertical list of
links, so I want to add enough Padding so
| | 01:26 | that I never see two photos
even if my links get really tall.
| | 01:30 | So 100 Pixels works really well for this.
| | 01:33 | My Layout, since this is going to be a
list of links, that it's going to be Vertical.
| | 01:35 | It's going to be Vertical.
| | 01:37 | And the Optimization Preset is
just how I want to save the images.
| | 01:41 | These are photos, so I think JPEG -
Better Quality will work fine.
| | 01:45 | You can also use JPEG - Smaller Size,
but that's not going to make a huge
| | 01:48 | difference since this is such a small photo.
| | 01:50 | So I'm going to hit OK.
| | 01:51 | There's my site folder, CSS Sprites, I'm going
to hit Export, and it's going to export my file.
| | 02:00 | Here's the site folder, and I have my CSS
as well as my JPEG file right there.
| | 02:05 | And my JPEG file is going to be just
the icon separated 100 Pixels from each
| | 02:09 | other, and each State is also
going to be in that file as well.
| | 02:12 | So I'll close this out.
| | 02:14 | My CSS is just going to be
referencing each one of those.
| | 02:18 | Notice that each one of my Slices was
named after the artist name, so it added
| | 02:22 | the ic_ at the beginning of each one of those.
| | 02:26 | And everything looks really good.
So let me go ahead and copy my index.
| | 02:31 | html file so that I can build my web site.
| | 02:36 | And now I'm going to open
up the CSS file and the index.
| | 02:39 | html file in a text editor.
| | 02:42 | I'm using Espresso, so I'm holding
down the Option key and clicking on the
| | 02:46 | Preview button, so I can see a
live preview over here to the right.
| | 02:51 | So what I need to do is in my index file,
I need to call my CSS, so I'm going to
| | 02:56 | add a link tag, with a relation of
stylesheet and allocation of the file, so
| | 03:03 | this will be--it's right on top
over here, so artistsicons.css.
| | 03:09 | I don't need this type, so I'll get rid of it.
| | 03:11 | And I need to save it. Okay.
| | 03:15 | In addition to that, I'm just
going to make these a little bigger.
| | 03:21 | I'm going to need to add a class to my unordered list.
| | 03:25 | And the class is going to be the main
class for the image, so it's' going to be
| | 03:29 | artistsicons and you can
see that one of them pops up.
| | 03:33 | That's because this is an unordered list,
so this is the entire list right here
| | 03:37 | and this list is not tall enough to
show two of these icons, it's just showing
| | 03:41 | you the first one right here.
| | 03:42 | And then what I need to do is under
each list item, I also need to add a class,
| | 03:48 | and the class is going to be ic_
and then the Name of the artist.
| | 03:52 | It's easier just to copy them from here, so
here's my CSS that was generated by Fireworks.
| | 03:59 | So I could try to type everything.
| | 04:01 | I named everything pretty well, so I
know that it's going to be the first and
| | 04:04 | last name, capital letters included.
| | 04:06 | So I could do that, but it's
just easier to copy the names.
| | 04:09 | So I know this is Barot here, so I'll
just copy this one and the class will be
| | 04:14 | that, then the next one, again, a class
here, and this is going to be Jonathan
| | 04:21 | right here, so paste that.
| | 04:26 | So this is all I need for the HTML.
| | 04:29 | I'm going to save this, and
then I can close out of it.
| | 04:32 | You can see that it's really nice
Fireworks wrote the Hover code for us
| | 04:36 | automatically, because we had
created those individual slices as button
| | 04:42 | rollovers, it automatically generated this
Hover code which is really, really nice.
| | 04:46 | So if you're going to use rollovers,
make sure that you use symbols that are
| | 04:50 | buttons, because it will
automatically take care of that code.
| | 04:52 | So we can take a look at our code right here.
| | 04:55 | There is going to be some adjustments
that we need to make to the CSS file as well.
| | 04:58 | So let's take care of those next.
| | 05:00 | So we'll start off by creating just
some modifications to an unordered list.
| | 05:05 | And what I want to do here is I'll get
rid of the bullets, so I'll list down
| | 05:11 | none, and I'll get rid of the margin
and the padding that normally appears on
| | 05:15 | those, so zero those out as well.
| | 05:18 | And then I'm going to make some
changes here to the artisticons.
| | 05:22 | So I'm going to go ahead and put them on
multiple lines so that they're easier to read.
| | 05:27 | And what I want to do here is add an unordered
list at the beginning as well as a list item.
| | 05:33 | So I'm modifying each one of these
list items, not just the entire artist
| | 05:38 | icon unordered list.
| | 05:40 | So I'll go ahead and do that, and what
I want to do is add a little padding to
| | 05:44 | the left, and it's going to be 40 Pixels.
| | 05:46 | So I'm just going to scoot them over a
little bit to the right and add a little
| | 05:51 | bit of padding at the bottom, just to
give it some breathing room, 10 Pixels.
| | 05:56 | I'll change the font, just make it
normal, and I'll use 1.6 ems here.
| | 06:03 | Everything else looks pretty good.
| | 06:06 | And finally, I need to add an
unordered list, list item to each of these.
| | 06:10 | And you can see that as soon as I code
it, you will see the icon appear over
| | 06:14 | here on the right-hand side.
| | 06:16 | So every one of these list items is
going to have this style by default,
| | 06:21 | including the background at a normal
position, which will be top left, bottom right.
| | 06:25 | You can't see them right now out,
because, remember, they are 100 Pixels down
| | 06:29 | from the top of each list item.
| | 06:31 | So you're not going to be able to see
them unless you apply this secondary
| | 06:35 | sub-style here, which tells each item
that has the class of the individual
| | 06:40 | person and it gives it the
background position that you need here.
| | 06:43 | So all we need to do to modify this is
just add--let me see if I can make it
| | 06:47 | bigger, so you could see it all in one
line, because it's easier that way, and
| | 06:51 | then I'll scoot this over just over here.
| | 06:54 | And so, all we need to do is just add
those and you'll see them up here on the
| | 07:00 | right-hand side as soon as I add them.
| | 07:04 | And the Hover should start working now.
| | 07:06 | So as I hover over these elements, you'll
see the preview of the artwork appear as well.
| | 07:11 | We'll paste those in and
all of our art is working.
| | 07:19 | Everything is really constrained.
| | 07:20 | The reason for that is because of
the way Fireworks is writing its code.
| | 07:24 | It's automatically given us a
width here of 32 Pixels by 32 Pixels.
| | 07:30 | So if you look at what it's doing, every list
item is going to have a width of 32x32 Pixels.
| | 07:36 | Sometimes that's what you want
when you're doing a sprite sheet, but
| | 07:38 | sometimes it's not.
| | 07:39 | So I'm just going to take out all the
widths and heights, so I'll just cut
| | 07:42 | that one out and I'll do a Find for that and
then Replace it with nothing, so I'll hit Command+F.
| | 07:49 | Most text editors will have some sort
of Find/Replace feature, so I'll just
| | 07:53 | take all those widths and heights out and you
can see that my list is looking really good.
| | 07:59 | Everything is hovering properly, and our
navigational list is working pretty well.
| | 08:03 | So you're always going to have to
modify some of the CSS that Fireworks
| | 08:07 | generates, but you can see that it was
really no big deal, just some standard
| | 08:11 | code applied to this page.
| | 08:13 | It did a really good job of creating this
Sprite Graphic, as well as most of the CSS for you.
| | 08:18 | So remember that when you're working
with Sprites that have rollovers, I
| | 08:21 | recommend that you use button symbols,
working with the Symbols means that
| | 08:25 | you'll get a Hover CSS written for you,
and it makes just adding a Sprite Sheet
| | 08:30 | or a Sprite into your HTML and
your CSS just a piece of cake.
| | Collapse this transcript |
|
|
9. CSS IntegrationUsing CSS tools in the Object panel| 00:00 | Fireworks has some excellent CSS
workflow features built into the program.
| | 00:05 | I'm going to show you some of the things
that you can do in Fireworks to use CSS
| | 00:09 | or to prepare your CSS for you web projects.
| | 00:12 | Some of them are going to seem
kind of small, but they're very useful.
| | 00:15 | So one of the new things is if you go
to any of the color palettes like this
| | 00:21 | fill palette right here, you could
see that we have the ability to get the
| | 00:23 | current color or set the current
color in either Hexadecimal or RGB colors.
| | 00:28 | You'll notice that there is a little
button to the right of each of these fields
| | 00:33 | that allows you to copy
that Hexadecimal or RGB colors.
| | 00:36 | If I click right here and click on
any text tool, and I'll just type in
| | 00:42 | some text there and I'm going to paste, you
can see that we get that Hexadecimal color.
| | 00:47 | And if we copy this one,
we can paste an RGB color.
| | 00:55 | Now, you can also access colors down
here from the Properties panel, so let me
| | 00:59 | go ahead and find something.
| | 01:02 | Let me go ahead and draw a rectangle,
and you can access color from these little
| | 01:07 | quick menus right here.
| | 01:09 | And if you click on one of these and
you set any color, you'll see that we can
| | 01:13 | also change the Opacity of that color,
and I want to change the Opacity to 50%.
| | 01:18 | That makes the color partially transparent.
| | 01:21 | If I go over here and now I copy the
RGB color--not the Hexadecimal, but the
| | 01:27 | RGB--and then I'm going to paste it
somewhere, instead of getting RGB, I get the
| | 01:33 | RGBA mode which is what a CSS program
will use for transparency, and it writes it
| | 01:39 | up properly red, green and blue value,
plus the Opacity setting right here.
| | 01:44 | So that's available to you from the panels.
| | 01:48 | So click on this, you can see it right here.
| | 01:50 | You can also see that we have
Opacity for a Stroke if we want to.
| | 01:54 | The same kind of commands, if we want to
copy a color, we can copy it from right here.
| | 01:59 | If you choose a color that has opacity,
you will automatically get an RGBA
| | 02:05 | instead of an RGB color.
| | 02:06 | So that is really useful when you want
to just jump in and grab a color from
| | 02:11 | this right here, and find out what the
Hexadecimal or RGB values are or perhaps
| | 02:16 | you're trying to type in a Hex value or
an RGB value to see what it's going to
| | 02:21 | like, you can do that and from right there.
| | 02:23 | The other option is the Eyedropper tool.
Eyedropper tool is for picking colors.
| | 02:28 | One cool feature about the Eyedropper
tool is that if you right-click anywhere,
| | 02:33 | you will be able to copy this color.
| | 02:35 | And if you choose an object that has
a Fill, you can Copy the Fill Color.
| | 02:39 | If the object also has a Stroke,
you can Copy the Stroke Color.
| | 02:42 | So I'm going to choose Copy Color,
because I just clicked on part of this artwork
| | 02:47 | right here, and then when I click and
just paste that, it's going to give me the
| | 02:52 | Hexadecimal value for that.
| | 02:53 | I just want to set it up so
that it gives you an RGB color.
| | 02:58 | You just need to click on the Eyedropper
tool by itself, and then come over here
| | 03:02 | to Color Format and select RGBA.
| | 03:05 | So now, when I copy something like this
blue right here, and then I really need
| | 03:11 | to make sure I got that properly here,
so click on this, Color Format is RGBA
| | 03:18 | and I'm going to right-click, Copy
Color, and then I will just paste it and
| | 03:24 | there is the RGB value right there.
| | 03:27 | It's not RGBA, because it
doesn't have transparency.
| | 03:29 | Again, it's only going to use
RGBA if the color has transparency.
| | 03:33 | That's actually really useful.
| | 03:34 | A lot of times, you're just trying to
figure out what the RGB values or the
| | 03:38 | Hexadecimal values of a color are in
your CSS, and Fireworks really does a great
| | 03:42 | job of giving you those options pretty quick.
| | 03:45 | There's also an entire CSS
Properties panel, and it's right here.
| | 03:49 | You can pull that up and this
is a context-sensitive panel.
| | 03:53 | I'm going to go ahead and dock it
right here so that we can see it update as
| | 03:57 | we click on things.
| | 03:59 | If you click on any element on the
workspace, you can see that the CSS
| | 04:02 | properties panel shows you
things about that element.
| | 04:05 | So, for example, it's showing us
what the font size is and all these
| | 04:08 | other properties there.
| | 04:09 | So if we grab a rectangle, and I'll
just draw something right here, and I'm
| | 04:15 | going to create a gradient.
| | 04:18 | Now we've got a gradient selected.
| | 04:20 | Notice that the CSS Properties panel
actually give us the code for that gradient.
| | 04:24 | So there is a Property values area right here.
| | 04:27 | It's also showing us the Width and
Height of this element, and if you come
| | 04:30 | down here, you could see that it's
writing all the code for us, including
| | 04:33 | code for multiple browsers.
| | 04:35 | So that's, including the browser prefixes
for CSS that you could use on a real project.
| | 04:40 | You can choose down here
which browsers you're targeting.
| | 04:43 | Really, there's no reason
not to target all of them.
| | 04:46 | You should always target all browsers,
but this is kind of a nice feature you
| | 04:49 | can choose to include comments or not.
| | 04:52 | This is smaller code when you turn it
off, so unless you really want to see
| | 04:56 | which browsers you're targeting, it's
better just to turn this Comments off.
| | 05:00 | And also, click on these icons right here.
| | 05:03 | If you click on Copy All, it will copy
all the properties and give you some CSS.
| | 05:07 | Let me just do that right now.
| | 05:08 | I'll hit Copy All, and
then I'm just going to paste.
| | 05:11 | I'll click on something else to
deselect, and then I'll just paste.
| | 05:14 | You could see that it's giving you a
ton of code, something that you can use
| | 05:18 | with a text editor or a CSS editor.
| | 05:20 | You could see that it's giving you not
only the code for the background image or
| | 05:25 | the gradients, but also the
Width and Height here as well.
| | 05:31 | You can selectively pick specific
things that you want it to do, so you can
| | 05:35 | click on just a gradient and then hit this
button and that just copies the selected elements.
| | 05:41 | So if I just click on the Width
right here and copy the selected element,
| | 05:45 | and then when I paste, all I will get will
be a Width parameter that I can use in CSS.
| | 05:51 | So it's pretty cool.
| | 05:53 | One really nice thing about the CSS
Properties panel is that it does an
| | 05:57 | excellent job in writing things like Drop
Shadows and Inner Glows and stuff like that.
| | 06:02 | So if I add a Drop Shadow--and I'm
going to adjust my Drop Shadow here, and you
| | 06:08 | can see my Drop Shadow happening right there.
| | 06:11 | There is the Box Shadow. If I then go
and add an Inner Shadow here or an Inner
| | 06:15 | Glow--I'll go and select Inner Glow,
and we will give it nice feather touch
| | 06:22 | here, and I'll go ahead and color it like red a
little bit, so it's just kind of a subtle effect.
| | 06:32 | So I will click somewhere else here
and you could barely see that it added a
| | 06:36 | little bit of code right there.
| | 06:37 | So if we can make this bigger, you can
see that it added both that regular Drop
| | 06:41 | Shadow piece of code, as well as
the inset code for the Inner Glow.
| | 06:46 | So it does a really nice job
of writing the CSS for you.
| | 06:50 | And a lot of times, you don't really
want this Width and Height, because you
| | 06:53 | just want the style of this element, so
you can Click and then Command-click to
| | 06:57 | select a non-contiguous group of
elements, and then you can just Copy-select it
| | 07:02 | and then paste that code
into your favorite CSS editor.
| | 07:05 | So you could see that Fireworks makes
it a lot easier, not only to get colors
| | 07:10 | from different places, but also
generates a little bit of CSS code for you that
| | 07:15 | can help you be a little bit quicker.
| | Collapse this transcript |
| Working with the CSS Properties panel| 00:00 | So I want to show you how to
prepare an HTML File using code from the
| | 00:04 | CSS Properties panel.
| | 00:06 | So CSS Properties panel--if it's not
showing, you can go to Windows menu and you
| | 00:10 | can select CSS Properties.
| | 00:12 | What I'm going to do is I'll dock it
right here in the middle between the Panels
| | 00:17 | and this document, so we
could see it side by side.
| | 00:19 | Whenever I click on an item and the
CSS Properties panel is on, it's going to
| | 00:24 | show me information about that item.
| | 00:26 | So if I click on this text right here,
it'll show me some text information.
| | 00:30 | If I click on something else like
a graphic, it's going to show me
| | 00:33 | information about that graphic.
| | 00:34 | What I want to grab is this navigation.
| | 00:36 | That happens to be in the
Master Page called Layout right now.
| | 00:40 | So I'll click on the Master Page to
get into that and then if I click on
| | 00:44 | this navigation, I'll be able to see
the gradient information and the Width
| | 00:47 | and Height for this.
| | 00:49 | Usually the most complicated thing on a web
site is generating the CSS code for gradients.
| | 00:54 | That's because different browsers use
different prefixes for each gradient and
| | 00:58 | the code can get really gnarly.
| | 00:59 | So it's super nice that Fireworks
writes all that for you in a number of
| | 01:05 | different browsers so that you could
just copy and paste your code from within
| | 01:09 | Fireworks once you generate any gradient.
| | 01:11 | You could see that I have a gradient
selected here and over here I can see all
| | 01:15 | the code that it will write.
| | 01:17 | One of the options here is to include
comments if you want to see what browsers
| | 01:20 | these different versions are supporting,
you can turn that on.
| | 01:24 | Really after a while, you're probably
going to keep it off because you're not
| | 01:26 | really going to use it for anything.
| | 01:28 | You can copy parts of this code from
this area in the Window right here, or you
| | 01:32 | could just click on an element or click
on an element or property that you want
| | 01:36 | to copy and then just Click on Copy
Selected right here at the bottom. You can
| | 01:41 | copy all, but most of the time
you'll be doing Copy Selected.
| | 01:44 | So let's go ahead and apply that on to a page.
| | 01:46 | So here is my HTML.
Let's just go over what HTML I have here.
| | 01:51 | Simple HTML5 page, it's linking to
my CSS Stylesheet right here, and in the
| | 01:59 | main area I have a header section. The
header section is a nav tag that has a
| | 02:05 | list inside the nav tag.
| | 02:07 | Now I've added this class here
called group because I am floating these
| | 02:12 | elements right here, so each one of these list
items would normally display as a bulleted list.
| | 02:17 | So in order to make them display side
by side like this, I have to float them.
| | 02:21 | Whenever I do that, unfortunately the
container loses track of the height of
| | 02:26 | any items within them.
| | 02:28 | So because of that I've added this class
called group and I've coded this little
| | 02:34 | group fix or a clear fix as it is
sometimes called, take care of that problem.
| | 02:38 | So if I took this out you could see that
my Navigation Bar disappears from the sides.
| | 02:43 | It's still there, but it's not taken into
account the height of the items within them.
| | 02:47 | So if I added a height here and say, I
added 10 pixels, you could see that it's
| | 02:51 | still there, but it's just sort of collapsed.
| | 02:53 | Once I float items inside an element,
if I don't take care of this with this
| | 03:00 | code, then it's going to forget what the
height of these items are supposed to be.
| | 03:04 | So that's what that's there for.
| | 03:05 | Then we have a simple navigation, we
give a width of 100%, so it's the whole
| | 03:09 | width of the browser. Background color
right now that's temporary. We're going
| | 03:13 | to switch over to nice
gradient in just a minute.
| | 03:15 | And then we have the list items, we'll
clear at the margin and the padding, get
| | 03:19 | rid of the bullets and position it a
little bit over from the left-hand side,
| | 03:24 | 50 pixels so that it doesn't appear
right here, it's moved in a little bit
| | 03:28 | 50 pixels from the left.
| | 03:29 | Then I'm floating all the list items,
that's why I need the little fix here and
| | 03:34 | then each one of the links, so these
are the different links, are going to be a
| | 03:39 | specific font floated to the left.
| | 03:42 | No text-decoration, that means no
underline, color of black and little bit of
| | 03:47 | padding so that they have room to each side.
| | 03:50 | And then finally, we add a hover
pseudo-class, and whenever I rollover these
| | 03:55 | items they're going to turn a different color.
| | 03:57 | Let's say it's kind of a brighter yellow,
but we're going to fix that as well.
| | 04:00 | So there you go. This is our basic code.
| | 04:03 | Let's go back into Fireworks and see
how we can add that nice gradient just by
| | 04:08 | copying and pasting it from our styles.
| | 04:10 | So I got this gradient selected.
| | 04:12 | I have got the items selected under the
Properties panel, and I'm just going to
| | 04:16 | go to this button down here, it says
Selected and click on Copy Selected.
| | 04:20 | And I'm going to switch over to my Text
Editor, and underneath my Main Navigation
| | 04:28 | I'll leave that original background there.
It's not going to hurt it to have it.
| | 04:32 | But underneath that, I'll paste that
code and you can immediately see that my
| | 04:37 | gradient is applied in this
area right here, which is awesome.
| | 04:41 | Looks like my background is still
overwriting that inside the list items, so
| | 04:48 | I'm going to get rid of this right here, and
now my background gradient shows up really well.
| | 04:53 | So I would hate to have to
write all that code myself.
| | 04:57 | But you could see that there's
different browser prefixes for stuff like
| | 05:02 | Firefox, Safari, Opera, Microsoft, and even
older versions of Microsoft browsers here.
| | 05:09 | So this is a great way of adding this
kind of code in. We're almost done.
| | 05:14 | So let's go ahead and fix the Rollover
States, because right now if we roll over,
| | 05:18 | we get sort of an ugly yellow color.
| | 05:20 | So I'm going to switch back on to Fireworks.
| | 05:23 | And for that, I'll need to double-click
on anyone of these symbols, because
| | 05:27 | these are button Symbols and
button Symbols have two States.
| | 05:30 | So if we look at the States panel, we'll
see that the Up State has this gradient.
| | 05:34 | The Over State has a slightly
different gradient, so I want to get to that.
| | 05:37 | I'll click on this right here.
| | 05:39 | Again, click on Gradient > Copy
Selected, switch over to our Text Editor and
| | 05:47 | find the place where we need to put
that color, which is right there, right
| | 05:52 | underneath our background column, just
paste and now when we roll over, we get
| | 05:57 | that other different gradient.
| | 05:59 | So Fireworks is especially good at
writing this kind of CSS that takes care of
| | 06:06 | doing things for different browser platforms.
| | 06:09 | It's also a really good at doing
things like Inner Shadows and Drop Shadows.
| | 06:13 | So any of those things that are really
difficult to deal with when working with
| | 06:17 | CSS3, having to worry about the
different browser platforms and different
| | 06:22 | browser prefixes, Fireworks is
going to make it really easy for you.
| | Collapse this transcript |
|
|
10. jQuery MobileWhat is jQuery Mobile?| 00:00 | One of the problems with
developing mobile web sites is the number of
| | 00:03 | platforms and inconsistencies and support for
HTML5 and CSS3 features between those platforms.
| | 00:09 | jQuery Mobile seeks to simplify the
way you write pages for mobile devices by
| | 00:13 | letting your write code that will
work on multiple mobile platforms.
| | 00:16 | So let's take a look at what jQuery
Mobile is, and then we'll look at an example
| | 00:20 | of how you can
incorporate it in a simple web page.
| | 00:22 | jQuery Mobile is a framework for
developing sites for mobile devices.
| | 00:27 | A framework means that it is a way of
writing code so that the language delivers
| | 00:31 | the code to different mobile
devices through Progressive Enhancement.
| | 00:35 | Progressive Enhancement means that
jQuery Mobile figures out in which features a
| | 00:38 | device supports and serves up a version
of the page optimized for that device.
| | 00:43 | Writing jQuery Mobile code is no
different than writing simple HTML code.
| | 00:47 | The language uses HTML5 data tags to
assign additional mark-up to pages and that
| | 00:52 | describes the interface elements.
| | 00:54 | As a matter of fact, you don't even have to
know JavaScript to build mobile web sites.
| | 00:57 | So let's take a look on an example.
| | 01:00 | You can see over here
this is a super simple page.
| | 01:03 | It's just a list of artists.
| | 01:04 | It's not really meant to be a complete
web site, but it's just a list of artists.
| | 01:09 | And if you take a look at the HTML, you'll
see that we're just have some simple HTML5 tags.
| | 01:14 | We could use just div tags, but I
think this is a little bit clearer.
| | 01:17 | So I used a header tag here to wrap
around the header, and I used an article
| | 01:21 | tag here that wraps around each one of these
list items that is inside an unordered list.
| | 01:26 | Go down to the bottom, we also have a
footer section, and in that footer we just
| | 01:30 | have another list of links to potential pages.
| | 01:33 | We don't have all these pages built out.
I just want to show you easy it is to
| | 01:36 | incorporate jQuery Mobile into your sites.
| | 01:39 | So I'm going to switch over to a browser,
and the first thing we need to do is
| | 01:42 | download jQuery Mobile.
| | 01:43 | Now if you go to the Download link,
which is right here, you'll see that you can
| | 01:47 | download different versions of jQuery Mobile.
| | 01:49 | There are different CDN versions as
well as versions you can download.
| | 01:54 | It's really easier to just grab this
code snippet which is what they recommend
| | 01:58 | when you're developing a web site.
| | 01:59 | So grab these lines of code and
incorporate them on to your site.
| | 02:03 | So I'm going to select those and go to
the Edit menu and select Copy, and then
| | 02:06 | I'm going to hide this, come back into
my page, and under the head section of my
| | 02:12 | site I'll add that code right there.
| | 02:15 | You already see a little
bit of difference on my page.
| | 02:18 | There's a new background and some of
these links have different colors now, and
| | 02:22 | that's jQuery Mobile
starting to take over the page.
| | 02:25 | So usually the first thing you do in
jQuery Mobile is define a series of pages.
| | 02:30 | So we're going to grab and create a new
div item right here, and our div is going
| | 02:36 | to have a data-role.
| | 02:39 | The data-role is going to be page and
then usually have an id so that you could
| | 02:43 | link back to those pages.
| | 02:45 | So our id would be artists, and
whenever we want to link to this page we will
| | 02:49 | use that ID like we've done here.
| | 02:51 | So this would be a link to the
homepage or to a section of code that has a
| | 02:55 | data-role page and an id of
home instead of artists here.
| | 03:00 | So potentially we could link to this
page by typing in the same kind of link and
| | 03:05 | just put artists right there.
| | 03:06 | Okay, so we'll go now into our header code.
| | 03:10 | Let me make sure I close
this before I go any further.
| | 03:12 | So down here at the bottom I'll just
close out that div, and then we will go
| | 03:17 | into the header section and we will
add a new data-role for that as well.
| | 03:22 | So data-role= "header", and as soon as I do
that you could see that my header is now changed.
| | 03:30 | It has been formatted now to look
like a mobile device and that's pretty
| | 03:33 | cool because with just a little single
attribute I have added a certain look
| | 03:38 | to my page already.
| | 03:39 | So let's go back over here into header
and we will add another attribute called
| | 03:44 | data-position and call it fixed.
| | 03:48 | So what that does is it takes care of what
happens when you scroll this page down.
| | 03:52 | This header automatically
reappears at the top.
| | 03:56 | And that's something that would be
really pretty difficult to do with JavaScript.
| | 03:59 | But jQuery Mobile takes care of that for you.
So that's really awesome.
| | 04:05 | All right. So let's modify our link to our
Home page. That is right there.
| | 04:08 | So what we're going to
do is add an icon to this.
| | 04:11 | So I'll do a data-icon, and from
here I'll type in the word home.
| | 04:18 | It's added the icon for the
Home on to this link right here.
| | 04:21 | And then I want to get rid of this
text on a very small mobile device.
| | 04:25 | I don't really need the word Home.
| | 04:26 | The icon I think is pretty self-explanatory.
| | 04:30 | So I'll do data-iconpos="notext".
| | 04:37 | So now my link to my homepage is different.
| | 04:39 | It doesn't have that button looking rounded
edges, and it's just a little icon, so that's great.
| | 04:44 | A single line of code did all that.
| | 04:47 | So in my article tag I'm going to
describe a section that is going to be
| | 04:52 | treated as content.
| | 04:53 | So I will add a data-role="content"
right here, and that just tells jQuery
| | 05:00 | Mobile that this section right here--
the main section containing all of my
| | 05:03 | content--is defined as the content area.
| | 05:07 | Finally, we'll go to the unordered list, and we
will type in a new data-role for that as well.
| | 05:13 | And the data-role here will be listview,
and as soon as I do that you could see
| | 05:18 | that now my list is formatted as a
list view with the icons right here.
| | 05:22 | Everything highlights nicely, and if I
were to click on these and I was linking
| | 05:27 | to a different page, it would also
handle the animation to that page which is
| | 05:31 | really good just with a single
little attribute on a unordered list here.
| | 05:37 | And this is even cooler. I'm going to
add a data-filter here and call it true,
| | 05:45 | just give it a value of true.
| | 05:46 | So that adds this section right here at the top.
| | 05:48 | That is essentially a little
search engine built into our page.
| | 05:51 | So if I click on this now on my page
and I type in any letter, you could see
| | 05:56 | only the results that have Bs on them.
| | 05:57 | So we just added some
really cool search functionality.
| | 06:00 | If this is a very long list, it would
be super helpful, just with, again, another
| | 06:05 | attribute here, the data-
filter attribute on the list.
| | 06:07 | So let's take care of the footer.
| | 06:10 | So we'll go to the footer section, and of
course data-role is going to be footer.
| | 06:16 | So you could see that that styles this
section as a footer much like the header was
| | 06:21 | style in this manner.
| | 06:22 | The footer style in the similar
manner there, and we'll add also
| | 06:26 | another data-position.
| | 06:29 | Now data-position is going to be fixed.
Much like the header, it automatically
| | 06:34 | aligns it to the bottom of the page,
and let me make this window smaller here.
| | 06:40 | So I'll make the window smaller.
| | 06:42 | You can see that as I scroll, it does
the same thing that it did to the header.
| | 06:44 | It fixes the position
and repositions the object.
| | 06:47 | So that it always at the bottom.
| | 06:49 | So that's pretty cool.
| | 06:49 | Again, something that would be really
hard to do with JavaScript, especially
| | 06:53 | worrying about different devices and
how they support different attributes, we
| | 06:58 | could do the same thing with just a
single attribute with jQuery Mobile.
| | 07:02 | So under the nav I'm going to add a
data-role for the navigation, and my
| | 07:09 | data-role will be navbar, and now my
bottom navigation switches to series of
| | 07:15 | buttons at the bottom. That's cool.
| | 07:18 | Another attribute.
| | 07:19 | So let me add some icons under
each one of these list items.
| | 07:23 | I'm going to add a data-icon="home"
and that adds the Home icon down here.
| | 07:33 | So I'll do that for the rest of them.
| | 07:37 | So these are icons that come with
jQuery Mobile, and you can just call them by
| | 07:42 | adding these data-icon attributes.
| | 07:45 | And you can even add your own icon
so that you can customize the look of
| | 07:48 | all these right here.
| | 07:49 | So these all are looking really great.
| | 07:52 | We've got all kinds of functionality
that we've just added by adding a few
| | 07:56 | attributes to a normal HTML page.
| | 07:58 | So you could see this is super easy to
do, and this is an awesome way to build
| | 08:03 | sites for smart phones
and any other mobile device.
| | 08:06 | Remember, that jQuery is going to be
taking care of all the inconsistencies
| | 08:10 | between the devices.
| | 08:11 | So this is just a simple as adding
a few attributes to any HTML page.
| | 08:16 | If you're interested about learning
more about jQuery Mobile or jQuery, check
| | 08:18 | out Joe Marini courses on jQuery Mobile Essential
Training and jQuery Essential Training.
| | 08:26 | If you're a Dreamweaver user and
want to learn more about jQuery Mobile
| | 08:29 | Integration, check out James Williamson's
Dreamweaver Essentials Training Course.
| | 08:33 | As you could see, jQuery Mobile is a
wonderful way to build sites for Smartphones
| | 08:37 | and other mobile devices, if you know
a little bit of HTML, running a jQuery
| | 08:41 | Mobile application is as simple as
adding a few attributes to your tags.
| | Collapse this transcript |
| Creating a jQuery Mobile template in Fireworks| 00:00 | If you're a jQuery Mobile user, you
know you can customize the look and feel of
| | 00:03 | your site by using or customizing a theme.
| | 00:07 | Fireworks has a great feature that
makes it easy to build and customize
| | 00:10 | jQuery Mobile themes,
| | 00:12 | and in this movie I'm going to show you how.
| | 00:13 | So I'm going to go to the Commands
menu and I'm going to select jQuery Mobile
| | 00:18 | Theme and then select Create New Theme.
| | 00:22 | So this will actually generate a
document, and in the document you'll see on the
| | 00:27 | first page just a bunch of different
icons that are the standard jQuery icons
| | 00:32 | that you can use at different sizes.
| | 00:35 | So if you wanted to customize the
look of any of these icons, you could just
| | 00:38 | select them, redefine them, and
even redraw them to whatever you want.
| | 00:43 | You have to draw the white and the black
version and then the larger white and black versions.
| | 00:48 | And then you have the standard
active button and the icon background.
| | 00:52 | So these items actually go in here.
| | 00:55 | So you could recolor this background to
make it whatever color you want, recolor
| | 00:59 | the standard buttons, and if you
click on one of these other pages, you'll
| | 01:03 | see that you have some of the
other content that you see in jQuery.
| | 01:07 | So these are different
parts of the jQuery interface.
| | 01:11 | You could see here's a top bar that you
would see for, like, maybe top navigation
| | 01:15 | or bottom navigation in the header and
the footer, and you could see that here
| | 01:19 | are the classes that they affect.
| | 01:21 | So these are the elements or the styles in
jQuery Mobile that this style would affect.
| | 01:27 | You also have link styles, as well
as a Content area and some additional
| | 01:31 | buttons right here.
| | 01:33 | So to customize your theme,
you could do a couple of things.
| | 01:36 | You could just redraw or recolor
any of these elements from scratch.
| | 01:40 | What I like to do is go to an element
or a page that is approximately what I want
| | 01:45 | and then just modify it a little bit.
| | 01:47 | So just because I know my site, I want
to go into this particular template, the B
| | 01:51 | template, and I'm going to recreate or
redefine some of the colors in here.
| | 01:56 | I know that for this gradient I'm going
to click on that and from the Gradients
| | 02:00 | little panel pop-up, I want to choose--and
I'll type in some colors here because I
| | 02:04 | already know what colors I want.
| | 02:05 | So a7a6c9. I'm going to hit Enter.
| | 02:12 | It's kind of like a light purple.
| | 02:13 | And then right here I'm going to
choose 545478, and that creates a nice little
| | 02:19 | kind of purple gradient.
| | 02:21 | I want my lines also to change so I'll click
on that, and I'll click on the line right here.
| | 02:25 | And for the line I want
717194, and I'll hit Enter.
| | 02:34 | That gives me that nice purple line.
| | 02:35 | And once I got one done, I could just
copy and paste the style. This is really
| | 02:40 | cool about Fireworks: you can go
Edit > Copy and then click somewhere else and
| | 02:44 | select Edit > Paste Attributes.
| | 02:47 | So I will do the same thing
for that one and for this one.
| | 02:50 | And I'll go in to my main Global
Assets and make sure I change this one as
| | 02:54 | well, because this is for the buttons and if
I don't do that, the buttons won't be changed.
| | 02:58 | So again, Edit > Paste Attribute. Then go
back into this b theme and I'll do it for
| | 03:05 | this one again, but then
I'll modify it a little bit.
| | 03:08 | So Paste Attributes and that would at
least give me the right border, but I do
| | 03:12 | want to go in and customize this a little bit.
| | 03:14 | So here my hover state will be C3C3EC,
and my other color, 7C7CB1. Hit Enter.
| | 03:30 | That gives me just a slightly
different hover state. It looks really nice.
| | 03:34 | So when I roll over one of these
buttons, it'll show me this right here.
| | 03:38 | I can come over here and change my link colors.
| | 03:40 | So this one is going to be 717194, and
I'll make my Normal link. I just copied it
| | 03:51 | and then Edit > Paste Attributes.
| | 03:53 | If you remember, this is a huge command
key, but if you're doing that a lot, you
| | 03:57 | can try to remember all this right here.
| | 03:58 | So--and my link hover is going to be a
little different, so that would be 9FA0D3.
| | 04:11 | There, just kinda like a little highlight there.
| | 04:13 | Okay, that looks really good.
| | 04:17 | Now you don't have to keep all these
other ones around if you don't want to use
| | 04:20 | these; you can delete them.
| | 04:22 | You can also make a copy of this one
and duplicate it to make another page.
| | 04:26 | So if you wanted to make an additional
page, you could just grab any of these,
| | 04:29 | drop them on top of this new layer icon,
and then you can call this one like F.
| | 04:33 | It's just easier to remember them as letters.
And then you can modify this one and
| | 04:37 | when you export it, it will be
available for you in jQuery Mobile.
| | 04:41 | So I like to start off with a
template that looks a little bit like what I
| | 04:45 | want and then just modify it a little
bit, because obviously this is kind of
| | 04:50 | like copy on dark backgrounds.
| | 04:52 | This one is kind of mostly like copy on
a dark background, but this is lighter
| | 04:57 | content inside, where this one
is kind of darker content inside.
| | 05:01 | So this looks more like what I
want, and this is looking really good.
| | 05:06 | So if I want to modify another one,
| | 05:09 | I've got say these two right here.
There's no reason in jQuery Mobile for
| | 05:13 | using just one template for everything,
| | 05:16 | so another thing that you might do is maybe
modify the content and the d or the c template.
| | 05:21 | So I'll modify the c template, and what
I'll do is I'll create myself an area of
| | 05:26 | content that is just a little light yellow,
| | 05:30 | so I'll pick one of these
light yellows right here.
| | 05:33 | I wanted to be even lighter,
| | 05:34 | so I'm going to grab the eyedropper
tool here from this swatch. I'm going to
| | 05:39 | move it in a little bit and just make it a super-
subtle light yellow, and that works really well.
| | 05:44 | So I can apply this to another part of
a layout and just call it as a theme c,
| | 05:52 | even though I'm going to be using
mostly theme b. And again, you don't need to
| | 05:55 | have all these other themes. As a matter
of fact, that's probably going to make the
| | 05:58 | files larger than it need to be,
| | 05:59 | so you could delete any ones
that you don't want here.
| | 06:03 | And you could see page 4
is an instructions page.
| | 06:06 | You could read all that if you want to.
| | 06:07 | You don't need to. I'll go
ahead and get rid of that.
| | 06:09 | A nice thing about having this in
Fireworks is that you can save these and you
| | 06:13 | can reuse them for different projects.
| | 06:15 | You can modify them.
| | 06:16 | That's something that maybe is not
as easy to do with the ThemeRoller.
| | 06:19 | So let's go ahead and preview this.
| | 06:22 | I'm going to go to the Commands
menu and select jQuery Mobile Theme,
| | 06:26 | select Preview Theme in Browser, and
this going to show you more or less what
| | 06:30 | this is going to look like in a browser.
| | 06:33 | So there it is, and there's the a theme,
and you could see that you have a tab
| | 06:36 | here for the b theme.
| | 06:38 | That's what that looks like.
| | 06:39 | And let's go back. It looks like
I deleted one of my c themes.
| | 06:46 | I'm going to undo a few times and make
sure keep the c theme. So that's good.
| | 06:51 | I want to get rid of d, e, and f,
perhaps even my instructions.
| | 06:57 | And then I want to get rid of a
because I don't really need a. I really just
| | 07:01 | want B and C. So once you've got that,
let's go back in preview again: Commands >
| | 07:07 | jQuery Mobile Theme > Preview Theme in Browser.
| | 07:12 | So there's the b theme. It looks really good.
| | 07:15 | There's a c theme. I'm going to use
little background maybe gradient on some of
| | 07:19 | my pages and go back here. It looks really good.
| | 07:22 | Now, one last thing that you could do
is in addition to modifying some of these
| | 07:26 | icons, you can create an additional
icon that you can use in your projects.
| | 07:29 | So I'm going to go to Commands menu,
again select jQuery Mobile Theme, and select
| | 07:34 | Insert Icon Placeholder. And we have to
give it a name here, so I'm going to call
| | 07:39 | this heart. Select OK.
| | 07:41 | It's going to run a little script.
| | 07:43 | It's going to create a new position
for us right here at the end of all of
| | 07:47 | our existing icons.
| | 07:48 | So what I'll do is I'll go in my Auto
Shapes panel and there's already a cool
| | 07:53 | auto shape for a heart right here.
| | 07:55 | So I'm going to drag that in
to my document, and there it is.
| | 07:58 | It's kind of has a nice gradient, but I
really want it to be colored like the other ones.
| | 08:03 | So back into my layers.
I'm going to turn off my Web Layer.
| | 08:07 | And then I want to change it to a solid
color. And I will just use the Eyedropper
| | 08:12 | tool to click on a color that is similar.
| | 08:16 | I don't want it to have an outline.
| | 08:19 | And that's looking pretty good.
I want to make it a lot smaller, because it
| | 08:23 | needs to fit in this little box right here.
| | 08:27 | So hit Enter to apply and
drag. That is still way too big.
| | 08:33 | So I'm hitting Command+T to bring up
the transformation handles and then just
| | 08:38 | click and drag to make it smaller.
| | 08:41 | Hit Enter to apply it, and let me go
ahead and hit Command+1 to see how it looks.
| | 08:48 | It still looks a little big, so zoom back in,
click on that, Command+T or Ctrl+T on a PC.
| | 08:54 | Smaller. And sometimes it's hard to
double-click in the middle to apply, so I
| | 08:59 | just hit Enter and it applies it as well.
| | 09:01 | So Command+1 and pretty close.
I think that's actually quite good.
| | 09:08 | I'm going to go ahead and
click on this, zoom in really deep.
| | 09:11 | I'm just modifying my handles a little bit.
| | 09:13 | I don't want my heart to be as
pointy here because it doesn't reproduce
| | 09:16 | very well at that size.
| | 09:18 | So I am going to take out
some of the pointiness here
| | 09:21 | and maybe make it a little chunkier.
| | 09:22 | Bring this in a little bit. So let's
hit Command+1 and let's see. Maybe it's
| | 09:29 | still a little big. Let me go ahead
and click on it. Command+T or Ctrl+T,
| | 09:33 | and a little smaller.
| | 09:35 | And that looks really good.
| | 09:39 | So I need to make sure that
it's centered within this box.
| | 09:43 | So I'm going to go ahead and turn
on my web layer, select both of these
| | 09:46 | documents. I'm dragging the
selection rectangle right there.
| | 09:48 | So I'm going to select both of those
elements and I want it to go to Align Tab.
| | 09:53 | It's already right here, so I don't
need to pull it up. Under Window I see
| | 09:55 | it peeking right here.
| | 09:57 | Then I'm going to hit the Align
horizontal center and Align vertical center and
| | 10:02 | that will center my heart within this box.
| | 10:06 | And I'll turn off my web layers again
| | 10:08 | because I need a copy of it right down here.
| | 10:13 | And I need to make this copy white,
| | 10:15 | so over here, click on the Eyedropper tool.
| | 10:18 | I'll click on the Fill tool, and then it
gives you the eyedropper, and then I'll
| | 10:23 | click on one of these other one's
and it'll pick up the color, which is white for
| | 10:28 | that, black for that.
| | 10:29 | And then I need to make sure
that this is also centered. Oops!
| | 10:32 | Let me go back in there, turn on my web
layer, and repeat. Just do Align center, center,
| | 10:43 | Copy. And actually I want to click on
both of these and then do Edit > Copy.
| | 10:56 | And I'm going to need to make bigger
versions, so I'll come over here hit Paste,
| | 11:02 | hit the Transform tool
here, or Command+T will work.
| | 11:06 | So I need to get that Diagonal
Resize tool, and I'll resize it. That's
| | 11:12 | a little bit too big.
| | 11:13 | Go back down, a little more.
| | 11:17 | It's looking pretty good so I'm
hitting Enter. Maybe a little bit too big
| | 11:21 | still, so select them Command+T or
Ctrl+T on a PC, make them smaller. Enter.
| | 11:29 | That's about right.
| | 11:30 | So turn on my web layer,
select these objects, align, align.
| | 11:36 | This one okay, since one is outside,
remember that when you align things, it's
| | 11:40 | going to pick the bigger of the two
and use that as the measurement or in the
| | 11:45 | case of centering,
it's going to average the center.
| | 11:47 | So I want to make sure my heart is inside.
| | 11:49 | Pull it up a little bit with the arrow keys.
| | 11:52 | So once I got it more or less
perfect, then I'll select it and then you
| | 11:55 | use Align Tools here.
| | 11:57 | It probably doesn't matter because it's
going to use the slice wherever it is,
| | 12:00 | but I just like to be careful.
| | 12:02 | Now I've got a new icon and I can
use that in any of my jQuery Mobile
| | 12:08 | templates. And I can keep on adding
icons, which is a really, really nice
| | 12:11 | feature in Fireworks.
| | 12:13 | So I really like jQuery
Mobile integration in Fireworks
| | 12:16 | a little bit better than ThemeRoller.
| | 12:18 | It just allows me to save the information
and continue to use my templates over and over.
| | 12:23 | So once you've got this, you can save it
and reuse it wherever you want, and that
| | 12:27 | makes it more convenient
than the ThemeRoller sometimes.
| | Collapse this transcript |
| Working with a jQuery Mobile template| 00:00 | So once you've created a theme using
Fireworks for jQuery Mobile, it's time to
| | 00:04 | export this theme so that you
can use it on a real project.
| | 00:08 | So I already got this theme that
I've created and I'm going to go to the
| | 00:11 | Commands menu and select jQuery Mobile
Theme and then choose Export Theme. Okay.
| | 00:17 | So now I need to go to my desktop
and find the site folder that I created
| | 00:22 | there, and that site folder just
has a basic jQuery Mobile site.
| | 00:25 | I'm going to open up this underscore folder.
| | 00:28 | That's usually where I keep all of
my CSS and JavaScript files whenever
| | 00:31 | I'm building a site.
I'll choose the CSS folder.
| | 00:34 | In this folder, you can see some styles
that I've already created for the site,
| | 00:38 | And I am going to hit Choose. It's going to generate a lot of
files, and my CSS file name is going to be
| | 00:44 | custom, so I'll click OK. And it's going to run
a little script that exports all of the files.
| | 00:50 | So now that it's done, I'm going to switch
over to my text editor. And here's my text editor.
| | 00:54 | This is what the site looks like right now;
| | 00:56 | it's just a regular jQuery Mobile site.
| | 00:58 | Let me go through on the right-
hand side to show you how it works.
| | 01:01 | So you've got a few buttons on this homepage.
| | 01:03 | If we click on some of these,
you can go to a schedule.
| | 01:06 | Schedule has an additional page that
shows a picture, and the artist that's
| | 01:11 | going to be playing in that schedule.
| | 01:13 | So you can also go to the Artist page
to see a list of artists right here. And
| | 01:19 | you also have a Gallery, and in the Gallery,
you can click and see some photos. So, back home.
| | 01:26 | So we're going to modify this
with the template that we just built.
| | 01:30 | To assign a template to a page, what you
do is you add an attribute to your item
| | 01:36 | that has a data-role page.
| | 01:37 | This is a div that wraps the entire page,
and you can see this is the homepage
| | 01:41 | because it has an ID of Home.
| | 01:44 | Here's the entire page right here, just
three buttons, which are right here, plus
| | 01:47 | an image. And we have this entire div
with an attribute called data-role="page".
| | 01:53 | So, to add a custom template, all we
have to do is add another attribute here
| | 01:58 | called data-theme, and then just
assign it the attribute that we want to use.
| | 02:02 | So in this case, we should use b, and
it's right now showing you actually
| | 02:07 | the default b template,
| | 02:08 | because one thing I haven't done
here is called in my custom CSS file.
| | 02:13 | So let me go ahead and do that.
| | 02:14 | Right before my custom style sheet, which is
right here, I need to add a link to my custom.css file that I just created.
| | 02:22 | So, link rel="stylesheet", so it's
going to be a style sheet. And the href is
| | 02:28 | going to be again, because all my
files are in that underscore folder, under
| | 02:33 | CSS, and I called my style custom,
and you could see it's already applying
| | 02:38 | some of it. And once I complete this line
here, it's going to show the actual style here.
| | 02:44 | So you can see now my buttons are all purple.
| | 02:46 | So if you don't specify a custom
style sheet, your page will look like this.
| | 02:51 | If you do, then it's going to apply
any of those styles to this page as well.
| | 02:55 | That's pretty cool! I like that.
| | 02:57 | It's looking nice already.
| | 02:58 | So let's go ahead and
switch over to the Schedule page.
| | 03:01 | This still has the old look and feel.
| | 03:05 | Let me see if I can modify that.
| | 03:08 | I'll go ahead, and just copy this
data-theme="b" and go over to the Schedule
| | 03:12 | page, which is right underneath the homepage.
| | 03:15 | Just add that in and see what happens.
| | 03:17 | Now, you could see here that it's not perfect.
| | 03:20 | It's not applying this style to the
header and footer, and it's applied it
| | 03:24 | here, but it's centering
things, which I don't like.
| | 03:27 | I don't really like this dark
purple in this particular page.
| | 03:30 | So remember, I created a style called C
that looked a little bit different.
| | 03:34 | It had maybe a yellow border here.
| | 03:37 | I see the yellow gradient right here in this
background, which I really like. That's cool.
| | 03:41 | I don't really mind these colors.
| | 03:43 | Go back to the Home. But I really don't
like the way some of these buttons are
| | 03:50 | looking, especially if I click on
them, they're still left-aligning.
| | 03:54 | So I need to fix some of these issues.
| | 03:56 | I need to make sure my header and
my footers have the proper styles.
| | 04:00 | So here's the data-role="header" part.
| | 04:03 | So I can add a theme to that by adding
a keyword here, or an attribute called
| | 04:08 | data-theme, and then I
will use a data-theme="b".
| | 04:10 | You can see that my header is now fixed.
| | 04:14 | I think it looks a lot better if it's
that purple color for that data-theme="b".
| | 04:17 | I want to do the same thing to the footer,
| | 04:20 | so I'm going to scroll down to my
footer section and paste that new data theme,
| | 04:26 | and my buttons now look
really nice. So, that's cool,
| | 04:30 | but I want to do that everywhere,
because if I go to another page, you'll
| | 04:33 | see the same problem.
| | 04:34 | My header and my footer aren't the right color.
| | 04:37 | So I want to fix that everywhere,
so I'm going to do a Find and Replace.
| | 04:40 | Almost any text editor has some
sort of Find and Replace function.
| | 04:43 | So I'm just undoing a few times.
| | 04:45 | I am just going to Command+Z on a Mac,
Ctrl+Z on a PC until it's back to
| | 04:49 | where it used to be.
| | 04:51 | What I'll do is I'll copy this div right
here with data-role="header" and that space.
| | 04:56 | I'll copy that, and then I will do a
Find, which in here is under Edit > Find.
| | 05:02 | But in any text editor, you should see
some sort of Find and Replace command,
| | 05:05 | and that's what you want to do.
| | 05:06 | So I'm going to find data-role="header"
and replace it with the same thing,
| | 05:10 | except add data-theme="B" and then
make sure you put the space right there at
| | 05:16 | the end, and I'll hit Replace All.
| | 05:18 | That will take care of
replacing all of my headers.
| | 05:21 | So, if I go to any other page, yeah,
there's the Schedule, it has the correct
| | 05:26 | Header, Artists, and even the
Gallery has the correct header.
| | 05:31 | I need to do the same thing for the footer,
| | 05:33 | so I'll go here and type in "footer"
and replace with "footer." And then add
| | 05:40 | data-theme="b" to all of them,
| | 05:42 | so I will hit Replace All, and that
should take care of all of our footers.
| | 05:46 | So now at least our headers
and footers are looking correct.
| | 05:50 | I don't like this kind of alignment here,
| | 05:53 | so I need to fix that back in the template.
| | 05:55 | I'm going to switch over to Fireworks,
and I am going to go over to my Pages.
| | 06:03 | And what's happening is on some of
these templates, like right here, if I don't
| | 06:10 | do anything to this template,
it's going to be center-aligned.
| | 06:13 | So If I want to make sure that something
is left-aligned, I need to click on the
| | 06:16 | Left-align little icon
here under Properties palette.
| | 06:19 | Even if it looks like it's
centered, it's not anymore.
| | 06:22 | So if I made these bigger,
you would see that these are centered.
| | 06:26 | But what I want is all of
these to be left-aligned.
| | 06:29 | So, I'll click on these, left-align
them, and I'm also going to copy this
| | 06:33 | gradient everywhere on this layout.
| | 06:36 | So, Paste Attributes.
| | 06:39 | I'm not really going to care about a
hover state on this one. And my link
| | 06:48 | colors are probably fine.
| | 06:51 | So now, I'm going to go to the Commands
menu, go to jQuery Mobile Theme, select
| | 06:57 | Export Theme, and back into my CSS folder.
| | 07:00 | So there's my underscore folder.
Here's my site folder that's on my desktop.
| | 07:07 | You notice that it created all
these files, including a custom.
| | 07:10 | css and then files for each of the icons,
and also an images folder that has the
| | 07:16 | images right here, all the icons.
| | 07:18 | So I'm just going to come back here, choose the
same folder, and it's going to overwrite them.
| | 07:24 | I can call it Custom.
| | 07:25 | It's going to replace
everything and go through it.
| | 07:30 | Replace everything and go back to my
editor, and then I'm going to hit Refresh.
| | 07:35 | You could see that now these are that nice
little gradient color, which is pretty cool.
| | 07:40 | So let's talk about
replacing one of these icons.
| | 07:44 | You remember in the previous movie,
I created an icon called Heart.
| | 07:48 | So let me just go to my homepage
and then click on the Schedule.
| | 07:53 | So, on the Schedule, I'm just
going to change this artists link.
| | 07:59 | So I'll scroll down to the bottom
where I have the links, and there you go!
| | 08:04 | So here, I'm using data-icon="star".
| | 08:06 | If you remembered from the last movie,
when I created my new icon, I called it heart.
| | 08:11 | So all I have to do is just put in the
new icon that I created, the name of the
| | 08:14 | new icon, and it
automatically updates right here.
| | 08:18 | So as you can see, there's no
reason to just one single style;
| | 08:21 | you can customize your styles, you can
use multiple themes for different pages,
| | 08:27 | different icons just by adding,
modifying this data icon attribute on wherever
| | 08:33 | you want the new icons to be, and
Fireworks just makes it super simple to create
| | 08:37 | any kind of new theme, new custom icons.
| | 08:41 | It's really a great way of managing
your templates and using them in your
| | 08:45 | jQuery Mobile sites.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | So I hope you enjoyed the course.
| | 00:02 | If you like Fireworks, mobile design,
or jQuery, there are a few resources you
| | 00:06 | should definitely check out.
| | 00:07 | I like this web site called fireworkszone.com.
| | 00:09 | It has a number of extensions as well
as textures and different articles on
| | 00:15 | how to use Fireworks.
| | 00:16 | It's a pretty cool site.
| | 00:18 | You can also check out this web site
from John Dunning that has a series of
| | 00:22 | extensions with Fireworks
that I've used in this course.
| | 00:25 | So you might want to check out some of
these, especially like this Grids command.
| | 00:28 | It's a really good way for laying out
grids without having to go to Templates.
| | 00:33 | I also like this Placeholder command.
| | 00:35 | You can take a look around here.
There's a lot of really cool stuff that he
| | 00:38 | has on his web site.
| | 00:40 | We also have a number of courses in
lynda.com that you should check out.
| | 00:44 | I especially like jQuery Mobile
Essential Training from Joe Marini, as well as
| | 00:48 | jQuery Essential Training. And if you're
into the JQuery features of Fireworks,
| | 00:54 | you should check out both of these courses.
| | 00:56 | You can also check out my weekly series
View Source, where I give you web tips in
| | 00:59 | about 10 minutes, or look at any
of my other courses online.
| | 01:03 | Finally, I definitely recommend James
Williamson's CSS Page Layouts course.
| | 01:07 | It's a really cool course on
laying out elements with CSS.
| | 01:11 | So it's definitely a good companion
course to the Fireworks course because so
| | 01:15 | much of what you're doing with CSS
is prepping graphics and applying them
| | 01:19 | into your web layouts.
| | 01:21 | If you're in to Dreamweaver, you may
also want to check out James Williamson's
| | 01:25 | Dreamweaver CS6 Essential Training.
| | 01:27 | So once again, this is Ray Villalobos, and I
hope you continue to enjoy building the web.
| | 01:31 | Goodbye!
| | Collapse this transcript |
|
|
