34,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Sprache: Englisch
Adobe Muse is an exciting new tool from the world's foremost design software company which allows users to create beautiful and fully functioning websites without writing any code. It provides graphic designers the power to use their print design skills over the Web. This book will help web designers as well as graphic designers to master Adobe Muse quickly. It will provide step-by-step instructions that guide you through building a website with Adobe Muse."Learning Adobe Muse" will teach you how to plan, design and publish websites using Adobe Muse. It starts by covering the tools and interface of the program and moves on to the concepts you'll need to understand for laying out your web pages. You'll learn how to format text using reusable styles, add images, create a clean navigation system, and add interactive elements such as panels and slideshows to your pages and all this without writing a single line of code!By the end of the book you will have created a smartlydesigned, fully-functioning website.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 289
Veröffentlichungsjahr: 2012
Ähnliche
Table of Contents
Learning Adobe Muse
Learning Adobe Muse
Copyright © 2012 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: September 2012
Production Reference: 1140912
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-314-1
www.packtpub.com
Cover Image by Artie Ng (<[email protected]>)
Credits
Author
Jennifer Farley
Reviewers
Corey Gutch
Ben Harrison
Cristian Radu
Acquisition Editor
Wilson D'souza
Lead Technical Editor
Unnati Shah
Technical Editors
Joyslita D'Souza
Ankita Meshram
Unnati Shah
Zinal Shah
Copy Editor
Alfida Paiva
Project Coordinator
Leena Purkait
Proofreader
Chris Brown
Indexer
Hemangini Bari
Graphics
Aditi Gajjar
Production Coordinator
Nilesh R. Mohite
Cover Work
Nilesh R. Mohite
About the Author
Jennifer Farley has over 12 years experience working in the graphic and web design industry. In 2002, she became a full time educator, teaching Adobe Photoshop, Illustrator, Dreamweaver, and Design Theory. She runs her own design business, called Laughing Lion Design but now divides her time equally between teaching design and freelance illustration work.
Thanks to my husband Jason for his support and love, and for sometimes staying up very late with me while I wrote this book.
Thanks to my parents for their support and love and for introducing me to books at a very, very young age.
About the Reviewers
Corey Gutch has worked with various web technologies at Adobe Systems since 1996, and is an Adobe Certified Expert in Dreamweaver and Illustrator. He is currently the Interactive Director for creative agency Dumb Eyes, designing and developing standards-compliant websites, the Lead Instructor for the Web Design with Creative Suite certificate program at the University of Washington, and Community Manager for Adobe Muse at Adobe Systems. Along with his knowledge of Adobe products, he is proficient in authoring HTML, XHTML, CSS, PHP, and JavaScript, and working with open source frameworks such as Wordpress and Drupal. He has deep knowledge and insight into real-world web design and development scenarios with both corporate and boutique clients.
Ben Harrison is also known as Mr. Fuddlebunker of Kelso, WA. He is married to a wonderful woman, has four kids and works at Swanson Bark & Wood Products. His current responsibilities are Digital Marketing and Brand Management. He loves to play with his kids, travel with his wife, volunteer in his community, build websites in his spare time as Fuddlebunker Design, and when he has a free weekend, he plays paintball.
Cristian Radu is a technically astute IT professional with strong experience providing support to corporate clients across diverse industries, recognized for his ability to coordinate special projects, his excellent analytical and problem solving skills, and his willingness to rise to any challenges. He started his career working for small local companies then moved to large corporations.
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Preface
Adobe Muse is an exciting new tool from the world's foremost software design company, which allows users to create beautiful and fully-functioning websites without writing any code. It provides graphic designers the power to use their print design skills over the Web.
This book will help web designers as well as graphic designers to master Adobe Muse quickly. It will provide step-by-step instructions that guide you through building a website with Adobe Muse.
Learning Adobe Muse will teach you how to plan, design, and publish websites using Adobe Muse. It starts by covering the tools and interface of the program and moves on to the concepts you'll need to understand for laying out your web pages. You'll learn how to format text using reusable styles, add images, create a clean navigation system, and add interactive elements such as panels and slideshows to your pages and all this without writing a single line of code!
By the end of the book you will have created a smartly designed, fully-functioning website.
What this book covers
Chapter 1, Welcome to Muse, discusses how Muse enables us to create websites without writing code. We will familiarize ourselves with the Muse workspace, its tools, panels, and the document window. We look at shortcuts for each of the tools which are well worth spending some time learning as you go.
Chapter 2, The Muse Workflow, addresses some of the challenges faced by designers creating web pages. These include making your design look good when viewed on multiple browsers at a variety of resolutions, and making it fast-loading. We look at the Muse Workflow and the steps involved in taking a website from an idea to a published website.
Chapter 3, Planning your Site, discusses some of the basic layouts used in web design. We look at the idea of wire framing using pen and paper and also how to set up a website structure and wireframe in Muse.
Chapter 4, Powerful Pages, looks at the concept of Master Pages and how we use them to apply a look-and-feel across many pages. We will learn how to add simple text onto individual web pages and how to add links. We use some of Muse's layout tools, namely guidelines, and the grid overlay to align our content.
Chapter 5, The Joy of Rectangles, teaches how to set up a flexible background rectangle. We added rectangles to our pages and manipulated their size, Fill color, and Stroke, and learned how to add effects such as drop shadows.
Chapter 6, Typography, Muse, and the Web, looks at how to add and style text on our web pages. We examine how to combine images and text wrapped together in a text frame. We discuss the importance of headings both from an organizational and SEO point of view, and we see how to add the hidden (to human visitors) metadata to our pages.
Chapter 7, Working with Images, teaches how to add images to our pages and how to manipulate them by changing their position, rotating, duplicating, and cropping them. We discussed the type of image file formats that are suitable for use on the Web and how to choose the appropriate format.
Chapter 8, Customizing with Widgets—Menus and Panels, looks at how to create a menu bar for our entire website. We style the menu, and the individual menu items which appear for each page in our website structure. We will use an Accordion panel as a way to put a large amount of text on a page without taking up too much space.
Chapter 9, More Widgets—Compositions and Slideshows, discusses Composition and Slideshow widgets, which allow us to add some very useful interactivity and functionality to our pages without as much as a hint of coding from our end. We also look at how to take code from another website (such as YouTube, Google Maps, or Twitter) and embed it into our Muse web pages.
Chapter 10, Muse, Meet the Adobe Creative Suite, examines how we can create a layered image in Photoshop and then place it as a Photoshop button in Muse. This allows us to create buttons with multiple states which is a useful way to give feedback to our web visitors. We will also see how easy it is to take an image created in another program and copy-and-paste it into Muse.
Chapter 11, Previewing and Testing your Site, looks at how to preview your page within Muse and in a browser, how to preview the entire website in a browser, and how to export the site as HTML and its associated assets. We also discuss testing and what you as the designer should be checking for, and we provide some tips on making your website mobile device friendly.
Chapter 12, Publishing Your Site, discusses how to publish and launch your website. You can publish using Adobe's own hosting with Business Catalyst or you can export your website as HTML and then upload it to a host of your choice.
What you need for this book
Who this book is for
This book is written for beginner web designers and also graphic designers who are interested in using their print design skills on the Web. It will teach you how to quickly build websites without the need to learn HTML or CSS.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "You can see an example of this in the previous screenshot where the site name Windsurf has an asterisk beside it."
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: " Notice that the Prototype thumbnail shows us the content of that page."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example text and image
You can download the example text and image files for this book you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Welcome to Muse
Welcome friends, to Adobe Muse! As we work our way through this book, we will learn how to use Adobe's latest web design software to create eye-catching websites. All without writing any code.
Examples of some of the interesting ways in which people have used Muse include portfolio-style websites for photographers, illustrators, and designers and interactive brochure style sites for all kinds of service providers. If you would like to see some examples of how other designers have used Muse to create their websites, check out Muse Showcase at http://www.adobe.com/products/muse/showcase.html.
In this chapter, you will learn:
What is this Muse you speak of?
Muse is a brand new offering from the software design company, Adobe. The idea behind it is to allow designers to create websites as easily as we can create layouts for print. Known as a WYSIWYG (What You See Is What You Get) web design tool, Muse allows us to build entire sites without worrying about HTML, CSS, JavaScript, or jQuery—all of which have the ability to leave a designer in a cold sweat.
If you are a graphic designer and have used Adobe InDesign, Illustrator, or Photoshop, you will find that you will have a certain level of familiarity with Muse. The interface is similar to others from the Adobe stable and the ability to drag-and-drop elements into your layout is what makes Muse special. You can focus on the look and feel, while Muse creates the code behind the scenes.
The following are some of Muse's features:
So let's get started.
Where to find Muse
In order to follow along and work with the program, the first step is to download the software to your computer. There are two ways to buy Muse: either by paying monthly or yearly as part of Adobe's Creative Suite, or you can just try it out as a thirty-day trial. Either way, you can download the software from http://www.adobe.com/products/muse.html and install it on your system. Muse is available for Mac and Windows.
The Muse workspace
A good worker knows their tools, so we're going to take a little time to find our way around the tools and panels that make up the Muse workspace.
The Muse workspace lets you plan, design, preview, and publish web pages and site assets. The toolbars and panels allow us quick access to the most common operations for creating and editing documents. Multiple documents can be displayed in the workspace and we can jump from one page to another by clicking on the tab that identifies that page.
The Welcome screen
The very first time you open Muse you will be greeted by the Welcome screen. This screen provides quick access to recently opened sites and easy creation of new sites. It also provides a direct connection to the Adobe Muse site where you can learn more about the program. A link provides information on the most current version available.
The Welcome screen will continue to appear every time you start Muse from the application icon in Windows or Mac OS. If you open a Muse file directly from a folder on your computer then the site will open without showing the Welcome Screen.
To open a recent site
Click on the site name on the left-hand side of the Welcome screen. If the site you want to work on is not listed there, click on the Open icon and browse through your folders to find the Muse site.
To create a new site
For creating a site, follow the given steps:
If you are a graphic designer used to working with units such as millimeters, centimeters, inches, points or picas, you may be wondering what units are used here. All units are in pixels as Muse is intended entirely for screen-based design work.
The fields in the screenshots can be described as follows:
Note
The settings you specify in the New Site and Site Properties dialog boxes apply to all pages and master pages throughout the new site. However, you can customize properties for individual and master pages. We'll look at how to do that shortly. It is a good practice to set your site dimensions when you start a project, just as you would if you were designing for a printed page, but don't worry if you find you need to change the settings later. You can access this dialog box at any time by choosing File | Site Properties or by right-clicking (Windows)/Ctrl + clicking (Mac) the page or master page in the Plan view.
Views
After clicking on OK, the next screen you'll see is the Plan view. The Plan view displays your site plan—an overview of how your website is organized. When you first create a new site, Muse automatically generates a Home page, also called the index page, that is linked to the Master Page design. Plan view is the default view when you open a Muse site.
At this stage, your Plan view will only have a single page: the home page, which appears as a thumbnail on the upper section of the Plan view. Beneath that you should see your Master pages. In this case you will have one master page, named A-Master. The Master pages act as templates to share common design elements such as headers, footers and logos that are required on more than one web page.
A Muse site has five views: Plan, Design, Preview, Publish, and Manage. You can switch between any of the views by clicking the links at the top of the interface. The fourth link, Publish, opens the Sign In window which starts the publishing process. We'll talk about these views in more detail in later chapters.
Saving your site
Before we go any further it's a good idea to save our site.
Opening a page in Design view
With our site saved, we can move into the Design view and check out the rest of the Muse workspace. While still in the Plan view, double-click on the homepage thumbnail to open that page.
Note
You can also switch to the Design view by clicking on Design at the top of the Muse window.
The Design view is where most of the heavy lifting of the design work takes place. This is where we add our text, images, and multimedia widgets to our web page.
The Design view workspace encompasses everything you see when you open or create a new document:
With your homepage open, notice that tabs appear for your selected page and for your site plan. You can open multiple pages in Muse and each one will appear with its own tab. To jump from a page to another page or to the site plan, simply click on the page name tab.
As shown in the previous screenshot, the letters indicate the different components of the Muse workspace, as follows:
The toolbar
The toolbarcontains tools for selecting objects, working with type, cropping, and drawing rectangles. It sits at the top of screen, to the right of the Views section. It contains some tools you may be familiar with if you've used other Adobe programs.
The following is a brief overview of the function of each tool:
Using the tools
To use a tool, simply click on the tool using the mouse or press the appropriate shortcut key. You can find the shortcuts for each tool by positioning your mouse over the tool icon. A tool tip appears, revealing the tool's name and its shortcut. For example, follow the given steps:
Even at this early stage, it's worth making an effort to remember the shortcut for each one (and there are only a few tools here in comparison with other Adobe programs). You'll find that your workflow speeds up considerably as you work with one hand on your mouse and the other hand ready on the keyboard to press shortcuts.
The Control Panel
The Control Panel (Window | Control) gives you quick access to options and commands related to the current page item or objects you select. The Control Panel is context-sensitive, so depending on which tool you have selected or which object you have clicked in the document window, the options displayed will vary. To get more information about each option, hover over an icon or the option's label to see a tool tip.
Click on Type Tool (T). Notice how the options on the Control Panel change.
Panels
Panels give us speedy access to additional tools and features. By default, the panels sit together in a dock on the right-hand side of the screen. This is not a permanent position; the panels are actually floating and are independent of the document window. We can customize the workspace by changing each panel's location and reorganizing them to suit our own needs. In the following screenshot, the Swatches, Character Styles, and Spacing panels are currently active. By clicking on the name in any Panel tab, that particular panel becomes active. Unlike other Adobe software you may have used, individual panels cannot be separated; they are "stuck" together.
Click on the Text tab, the Paragraph tab, and the Wrap tab in order to activate them.
Expanding and collapsing panels
The panels take up a small chunk of the real estate on your screen, however, you may not always want them to appear fully expanded. We can reduce the amount of space they take up by collapsing them to show icons without names. The following steps show how to expand and collapse all the panels in the dock:
Another way to save space is tocollapse the panels so that only the tab and panel name are visible. To do this, perform the following steps:
Hide all panels
You may not want to see any panels while you're working on your design. To hide all the panels choose Window | Hide Panels. When you're ready, you can show them again by choosing Window | Show Panels.
Open a panel
If you can't see any particular panel in the panel groups, you can find a full list of panels under the Window menu. To open a panel that isn't showing in the workspace, choose Window | Fill to open the Fill panel.
If the panel name has a check mark under the Window menu, this means it is already active on the screen and that particular panel will appear highlighted in its panel group.
Rearranging panels
To move a
