Design with Adobe® Creative Cloud™ Classroom in a Book: Basic

Getting Started
Adobe Creative Cloud gives you everything you need to create your best work.
With it you can deliver eye-catching digital images and graphics that remain
crisp when scaled. You can also lay out high-impact printed pages with exquisite typography, build HTML5/CSS3 websites that look great on any screen,
and design applications for tablets and smartphones.
This Classroom in a Book introduces you to the key elements and applications
of Adobe Creative Cloud in a design workflow.
About Classroom in a Book
Design with Adobe Creative Cloud Classroom in a Book is part of the official
training series for Adobe graphics and publishing software developed with the
support of Adobe product experts. Each lesson in this book is made up of a
series of self-paced projects that give you hands-on experience using the following Adobe products: Adobe Photoshop CC, Adobe Illustrator CC, Adobe
InDesign CC, Adobe Muse CC, Adobe Acrobat XI Pro, and Adobe Bridge CC.
Design with Adobe Creative Cloud Classroom in a Book uses lesson files that
are available online along with additional learning resources. To use these files,
see “Accessing the Classroom in a Book files” later in this chapter.
Prerequisites
Before you begin working on the lessons in this book, make sure that you and
your computer are ready.
Computer requirements
You’ll need about 1.2 GB of free space on your hard drive to store all of the lesson
files and the work files that you’ll create as you work through the exercises.
Design with Adobe Creative Cloud CLASSROOM IN A BOOK 1
Required skills
The lessons in this book assume that you have a working knowledge of your computer and its operating system. Make sure that you know how to use the pointer
and the standard menus and commands, and also how to open, save, and close
files. In addition, you should know how to use context menus, which open when
you right-click/Control-click items, and scroll (vertically and horizontally) within a
window to see content that may not be visible in the displayed area.
If you need to review these basic and generic computer skills, see the documentation included with your Microsoft Windows or Apple OS X software.
Installing Adobe Creative Cloud
Before you begin using Design with Adobe Creative Cloud Classroom in a Book,
make sure that your system is set up correctly and that you’ve installed Adobe
Creative Cloud. You must purchase an Adobe Creative Cloud subscription separately. For system requirements, see www.adobe.com/products/creativecloud/techspecs.html#requirements.
Once you’ve begun your Creative Cloud subscription and installed the Creative
Cloud desktop application, you can then install any of the software required for this
book using the Apps tab in the Creative Cloud desktop app.
Because this book focuses on design, it does not use every Adobe Creative Cloud
application. You need to install only the applications for the lessons you plan to
complete.
Applications used in the lessons
Lesson
Adobe Bridge CC
Adobe Photoshop CC
Adobe Illustrator CC
Adobe InDesign CC
Adobe Acrobat Pro XI
Adobe Muse CC
1
•
•
•
2
•
•
3
4
•
5
6
7
8
9
•
•
10*
•
•
•
•
•
•
•
•
•
•
•
•
•
* Lesson 10 is available online from peachpit.com along with the downloadable lesson files for this book (see “Downloading the Classroom in a Book files”).
2 Getting Started
Downloading the Classroom in a Book files
To work through the projects in this book, you’ll need to download the lesson files
from peachpit.com. You can download the files for individual lessons, or download
them all at one time.
To access the Classroom in a Book files:
1 On a Mac or PC, go to www.peachpit.com/redeem and enter the code found at
the back of your book.
2 If you do not have a Peachpit.com account, you will be prompted to create one.
3 The downloadable files will be listed under the Lesson & Update Files tab on
your Account page.
4 Click the lesson file links to download them to your computer.
5 Any ZIP files you download are compressed, so double-click to decompress
them before beginning the lessons. When decompressed, they will appear as
folders containing lesson files.
Checking for Updates
Adobe periodically provides software updates. To check for updates in any program, go to the Help menu and choose Updates. For book updates and bonus material, visit your Account page on Peachpit.com.
Additional Resources
Design with Adobe Creative Cloud Classroom in a Book is not meant to replace
documentation that comes with the program or to be a comprehensive reference
for every feature. Only the commands and options used in the lessons are explained
in this book. For comprehensive information about program features and tutorials,
please refer to these resources:
Adobe Creative Cloud Help and Support: At helpx.adobe.com/creative-cloud/
topics/getting-started.html you can find and browse Help and Support content on
adobe.com.
Adobe Creative Cloud Learning: helpx.adobe.com/creative-cloud/tutorials.html
provides inspiration, key techniques, cross-product workflows, and updates on new
features. The Creative Cloud Learn page is available only to Creative Cloud members.
Adobe Forums: forums.adobe.com lets you tap into peer-to-peer discussions,
questions and answers on Adobe products.
Design with Adobe Creative Cloud CLASSROOM IN A BOOK 3
Adobe TV: tv.adobe.com is an online video resource for expert instruction and
inspiration about Adobe products, including a How To channel to get you started
with your product.
Adobe Design Center: www.adobe.com/designcenter offers thoughtful articles
on design and design issues, a gallery showcasing the work of top-notch designers,
tutorials, and more.
Adobe Developer Connection: www.adobe.com/devnet.edu.html is your source
for technical articles, code samples, and how-to videos that cover Adobe developer
products and technologies.
Resources for educators: www.adobe.com/education.edu.html includes three free
curriculums that use an integrated approach to teaching Adobe software and can
be used to prepare for the Adobe Certified Associate exams.
Also check out these useful links:
Adobe Marketplace & Exchange: adobeexchange.com is a central resource for
finding tools, services, extensions, code samples, and more to supplement and
extend your Adobe products.
Adobe Creative Cloud home page: creative.adobe.com is the page where you can
sign into Creative Cloud, so that you can gain access to Creative Cloud services and
application downloads.
Adobe Labs: labs.adobe.com gives you access to early builds of cutting-edge technology, as well as forums where you can interact with both the Adobe development
teams building that technology and other like-minded members of the community.
Adobe Certification
The Adobe training and certification programs are designed to help Adobe customers improve and promote their product-proficiency skills. There are four levels of
certification:
• Adobe Certified Associate (ACA)
• Adobe Certified Expert (ACE)
• Adobe Certified Instructor (ACI)
• Adobe Authorized Training Center (AATC)
The Adobe Certified Associate (ACA) credential certifies that individuals have the
entry-level skills to plan, design, build, and maintain effective communications
using different forms of digital media.
The Adobe Certified Expert program is a way for expert users to upgrade their
credentials. You can use Adobe certification as a catalyst for getting a raise, finding
a job, or promoting your expertise.
4 Getting Started
If you are an ACE-level instructor, the Adobe Certified Instructor program takes your
skills to the next level and gives you access to a wide range of Adobe resources.
Adobe Authorized Training Centers offer instructor-led courses and training
on Adobe products, employing only Adobe Certified Instructors. A directory
of AATCs is available at partners.adobe.com.
For information on the Adobe Certified programs, visit training.adobe.com/
certification.html.
Adobe Creative Cloud
Everything you need to create your best work
Creative work crosses more boundaries than ever. Projects can be
cross-media, possibly destined for print, web, and video. They can be
cross-platform, appearing on computers, tablets, and smartphones.
And they can be collaborative, with team members spread across
cities or countries.
Access to the entire collection of Creative Cloud tools helps you solve
any creative problem. Solutions such as Adobe Digital Publishing
Suite, Single Edition and Adobe Muse greatly simplify publishing
content on new media platforms. Take advantage of the Creative
Cloud website (creative.adobe.com) and integration with the Behance
creative community to easily share your work with project colleagues
or potential clients.
6
Adobe Creative Cloud helps you meet your workflow
challenges by providing you with the tools to create,
work together, share, and publish.
7
Create professional graphics and type
A design project typically involves many components, including images, drawings,
text, interactivity, and dynamic media, such as video and audio. Creative Cloud
brings together graphics, type, and color tools that you can use to create or edit a
wide range of media for any creative project.
Edit images precisely with Photoshop CC
Adobe Photoshop CC offers more speed, power, and freedom to create compelling images as the standard in professional, image editing software. You can start
from a digital camera image and create digital paintings with flexible brush tools or
graphics for websites. You can also use intelligent editing tools to create composite images by combining elements, correct lens curvatures and other distortions,
create photographic blur effects, straighten images in seconds, create 360-degree
panoramas, extend depth of field, and more.
Adobe Camera Raw 8, included with Photoshop CC, lets you edit the raw formats
of many digital cameras and provides improvements that help you heal images, fix
perspective distortions, and create vignettes. In addition, in Photoshop CC, Adobe
Camera Raw is available as a filter you can apply to any layer.
Photoshop includes robust Save for Web tools for optimizing your images for
any medium, from print to online to mobile. You can share images directly
from Photoshop to Behance so you can showcase your work or get feedback
from colleagues.
Because digital video has become an essential part of many creative projects, you
can use Photoshop to edit video with a designer-friendly user interface. You’ll edit
a video in Photoshop in Lesson 5, “Creating a Video with Photoshop.”
8 Adobe Creative Cloud
Create scalable designs and drawings with Illustrator CC
When you want to create drawings, designs, logos, and patterns that scale easily
as vector graphics, Adobe Illustrator CC provides a deep set of tools so you can
develop ideas quickly and precisely. You can use Image Trace to convert photos
or other images into vector artwork, create smooth-edged shapes using precise
drawing tools, or paint with brush strokes you can edit. The type tools in Illustrator
support advanced typography, and you can develop logos and other designs based
on font characters you’ve converted to paths.
The ability to create multiple artboards of different sizes lets you work out multiple
variations or iterations of your design projects in a single Illustrator document. For
example, you can design a set of business stationery that includes a business card,
letterhead, and envelope, and store them all in the same Illustrator file.
As in Photoshop, you can prepare your Illustrator graphics for the web or mobile
devices using Save for Web optimization tools, and you can share your Illustrator
projects directly to Behance for self-promotion or feedback.
Design with Adobe Creative Cloud Classroom in a Book 9
Gain access to thousands of fonts with TypeKit
PNote: As this book
is being written, Adobe
plans to let you use
TypeKit fonts with
any of your desktop
applications by syncing
them to your desktop.
For the current status of
this feature, check your
Creative Cloud desktop
app for updates: This
app will be used to
enable the desktop font
sync feature.
Your Creative Cloud subscription gives you access to thousands of valuable fonts
through Adobe TypeKit, making it much easier and faster for you to find the perfect font. You can use Adobe TypeKit fonts directly from Adobe Muse.
Create color schemes with Adobe Kuler
Adobe Kuler lets you create color themes in some Creative Cloud applications,
using an iPhone or using your web browser. The Adobe Kuler iPhone app lets you
capture color schemes from whatever is in front of you (such as a garden or a street
scene), or you can design your own color scheme using the Kuler app or website
(kuler.adobe.com). You can use Creative Cloud to sync your Kuler color schemes
between Creative Cloud applications, the Kuler website, and Adobe apps. The
Kuler website is also a great place to explore color themes shared by others.
10 Adobe Creative Cloud
Design publications for print
and mobile devices
Once you have completed the components for your design projects, you need to
integrate them into a finished, polished piece. Creative Cloud provides the essential
pieces that complete your design workflow.
Create print and online documents with Adobe InDesign CC
As a hub for publication design and production, InDesign is where everything
comes together: With InDesign, you can lay out pages that include content, such
as images from Adobe Photoshop CC, scalable artwork from Adobe Illustrator CC,
and styled text from your word processor. You can create documents many pages
long that remain easy to maintain and revise thanks to production-strength tools
for text and graphics.
With deep roots in high-end print publishing, the powerful and precise layout
features in InDesign help you meet the highest professional standards of creative
design, typography, production, and final output. The sophisticated layout capabilities in InDesign now drive digital publishing—from fast and efficient output of PDF
files and EPUB ebooks to the ability to work directly with Adobe Digital Publishing
Suite to create book apps for tablets and smartphones. Liquid Layout rules,
Alternate Layouts, Linked Content, and the Content Collector greatly simplify
creating and maintaining layouts for multiple devices from one publication.
Design with Adobe Creative Cloud Classroom in a Book 11
Produce professional-quality PDF files
with Adobe Acrobat XI Pro
Adobe Creative Cloud includes Adobe Acrobat XI Pro because the Adobe Portable
Document Format (PDF) plays a central role in many design workflows. With
Adobe Acrobat XI Pro, you can create and edit professional PDF files for delivery
of print design projects for final output on press, and for sharing and distributing
documents or interactive titles online.
Although Creative Cloud applications such as InDesign, Illustrator, and Photoshop
make it easy to create full-featured interactive or press-ready PDF files on their
own, Acrobat XI Pro is valuable when you want to perform further enhancement,
management, and optimization, such as combining multiple PDF files and reducing
the file size of the combined file.
If you design print publications, Acrobat XI Pro integrates smoothly with the print
production features in Adobe InDesign CC, such as color management and CMYK
support, and with long document features, such as a hyperlinked index and table
of contents. If you create online documents for desktop or mobile devices, you
can use Acrobat Pro to design interactive forms, protect sensitive information,
add media (such as video and audio), and include multiple types of materials in
one file. You can also organize and track online reviews of shared documents and
collect comments.
Share work with your community
PNote: As this
book is being written,
Adobe plans to
integrate Behance
with more Creative
Cloud applications.
For the current status
of this feature, check
your Creative Cloud
desktop app for
application updates.
Applications integrated
with Behance have
a Share on Behance
command (File > Share
on Behance).
12 Adobe Creative Cloud
Design is typically a collaborative activity between designer, client, and community,
and that collaboration increasingly happens online. Adobe Creative Cloud supports
online collaboration through features such as the Behance online creative community and file syncing.
Get connected with Behance
Adobe Creative Cloud gives you direct access to the Behance creative community
where you can showcase your work, get feedback, and find creative inspiration.
Behance provides you with a way to reach out beyond your local community and
connect with top creatives around the world.
Creative Cloud applications streamline your connection to Behance. Instead of having to switch to a web browser to work with Behance, you can upload your work
directly from applications, such as Adobe Photoshop CC and Adobe Illustrator CC,
and you can monitor your Behance activity stream directly in the Creative Cloud
desktop app. You can display your work publicly or to a specific audience and get
the feedback you need to improve your work. Behance includes direct connections
to social media like Twitter and Facebook to help you promote your work online.
Privately share files with Creative Cloud online storage
Your Adobe Creative Cloud account provides you with online file storage and
sharing. You can upload and share files through a web browser. Storing files online
makes it easier for you to work anywhere, and the ability to share files privately
makes Creative Cloud storage useful for collaboration.
PNote: As this
book is being written,
Adobe plans to let
you synchronize files
on your desktop with
Creative Cloud online
file storage so that you
don’t have to manually
upload and download
them. For the current
status of this feature,
check your Creative
Cloud desktop app
for updates.
Design with Adobe Creative Cloud Classroom in a Book 13
Create customized websites
for your work or clients
Sharing your work on your own website is essentially required in today’s design
world, but building a website can require skills, time, and energy that draw you
away from your creative projects. Adobe Creative Cloud provides several ways to
create personalized websites without writing code, depending on what you need.
Show your best work in a ProSite portfolio
You can create a professional public portfolio easily and quickly using ProSite, a
pro-level feature of Behance. In ProSite, portfolio creation begins by selecting a
layout, customizing it, and adding projects. ProSite includes beautiful templates
and powerful controls for personalizing the look of your portfolio, all within your
web browser. When you’re ready to show your work to the world, click Publish.
This example shows a portfolio containing one project; to see real-world examples
of portfolios with many projects you can explore, visit www.behance.net.
You can link your Behance account to other social network accounts, including
Twitter, LinkedIn, Google, and Facebook, so that it just takes an instant to promote
any of your content from Behance. As you grow your Behance ProSite presence,
you can monitor its effectiveness with built-in statistics reporting that includes
project views and portfolio views over time.
14 Adobe Creative Cloud
Build your own website in Adobe Muse
CC without writing code
If you want to create a fully customized website design, you can do it in Adobe
Muse CC without writing code. Adobe Muse stands out from other website
creation tools in that you can design websites using familiar tools and commands
like those in Adobe InDesign CC. You can create your website by thinking like a
designer, not a web programmer.
The design freedom Muse provides doesn’t compromise the technical quality of the
site. Websites you create with Muse adhere to web standards, and you can easily
create a single site with layouts customized for desktop computers, tablets, and
smartphones. When you create mobile versions of a website, not only are they sized
appropriately for the screen, but they also respond to touch gestures like swipes
and pinches. These advantages help provide your site’s visitors with a positive experience, no matter how they view your site.
Adobe Creative Cloud also simplifies publishing and hosting of your website by
providing you with Adobe Business Catalyst web hosting services. Your Creative
Cloud subscription lets you use Business Catalyst to host up to five websites for
you or your clients.
You’ll work with an Adobe Muse website in Lesson 3, “Creating a Mobile-Friendly
Website.”
Design with Adobe Creative Cloud Classroom in a Book 15
Work flexibly, online or offline
Adobe Creative Cloud works for you whether or not you are connected to the
Internet. When you’re connected to the Internet, you can take advantage of application integration with Creative Cloud online tools. You can continue to work
when you aren’t online because Creative Cloud applications are installed locally on
your computer. You can store your files locally (on your own disks or servers) or in
the online storage provided as part of your Creative Cloud account.
Manage project files using Adobe Bridge
With Adobe Bridge CC, you can manage your media with centralized access to all
of your creative assets. Regardless of the Adobe Creative Suite software you use,
your projects will likely involve various files and formats. You may be organizing documents and graphics from different sources or finding your way through
a large media library. Adobe Bridge is an advanced media manager that helps you
quickly locate and organize the files you need, and move them directly into the
Adobe Creative Suite software you’re using. Adobe Bridge helps you work with
images, text, the native file formats of Creative Suite software—such as Photoshop,
InDesign, and Illustrator—videos, fonts, and more. Powerful searching, content filters, and thumbnail views help you zero in on the files you need, and large previews
enable you to ensure that you’re opening the correct file. You’ll use Adobe Bridge in
many lessons in this book.
Take your work anywhere
When you’re away from your computer, you can work on any other computer that
meets the system requirements for Creative Cloud. Your subscription works on
up to two computers, such as a desktop and a laptop, or even one Mac and one
Windows computer. For example, you can work on a computer at a client’s office
by signing into Creative Cloud, downloading the applications you need, and then
16 Adobe Creative Cloud
signing out when you’re done. This flexible licensing also makes it easy to stay on
schedule on a secondary computer if your primary computer is out for repairs.
To save even more time, you can synchronize the settings of some applications
to Creative Cloud. For example, you can sync Photoshop preferences, actions,
brushes, and other settings to Creative Cloud. This makes it easy to set up your
Photoshop customizations on another computer or to quickly restore your personal
settings in case you have to reinstall Photoshop.
If you upload your project files to the online storage included with your Creative
Cloud subscription, you’ll be able to download those files on another computer.
Combined, the flexible licensing, settings synchronization, and online file storage
give you the ability to liberate your work from your primary computer so you can
complete it anywhere.
Get more training anytime
With all of the tools available to you through Creative Cloud, you’ll sometimes want
to use an application or service that’s new to you. An extensive library of Creative
Cloud training videos help you get up and running quickly when you encounter a
Creative Cloud tool that’s unfamiliar. Immediate access to relevant training helps
save time that you might otherwise spend searching for the right tutorial.
ETip: To watch
additional training
videos about Adobe
applications, visit
tv.adobe.com.
Design with Adobe Creative Cloud Classroom in a Book 17
Expand your creative universe
Although you might initially use the Adobe Creative Cloud applications that
focus on design, Creative Cloud gives you plenty of room to grow as you develop
your career.
Photography
If you routinely work with photo shoots using Adobe Camera Raw, Adobe
Photoshop, and Adobe Bridge, you might consider using Adobe Photoshop
Lightroom. It’s optimized for precise processing and highly efficient organization
of large numbers of photos and lets you easily create slide shows, videos, and books
from your photographs.
Video editing and production
You can quickly create a video using the designer-friendly video-editing tools in
Photoshop CC, as you will in Lesson 5, “Creating a Video with Photoshop.” If you
feel like tackling more ambitious video projects, Creative Cloud provides professional video production tools as well, such as Adobe Premiere Pro CC, Adobe After
Effects CC, Adobe Audition CC, and Adobe SpeedGrade CC.
Web development
Although ProSite and Adobe Muse are the best options for building websites if
your focus is on design rather than coding, experienced web programmers can take
advantage of a variety of advanced Adobe Creative Cloud web development tools,
including Adobe Dreamweaver CC, Adobe Flash Professional CC, Edge Code CC,
Edge Inspect CC, and Edge Reflow CC.
18 Adobe Creative Cloud
Touch App plug-ins
If you use Adobe Touch Apps such as Photoshop Touch or Adobe Ideas on your
smartphone or tablet, you can integrate them with Creative Cloud desktop apps
using Touch App plug-ins. For example, by installing Touch App plug-ins, you can
transfer an image you edited using Photoshop Touch from your tablet to Photoshop
CC on your desktop. You can install the Touch App plug-ins from the Creative
Cloud desktop app.
Let’s begin
Now that you’ve been introduced to the full range of applications and services that
Creative Cloud offers, it’s time to jump into Lesson 1 and start learning about the
Creative Cloud tools that will enhance your design workflow.
Design with Adobe Creative Cloud Classroom in a Book 19
4
Using Fonts with Adobe
Creative Cloud
Lesson overview
The way you set up your documents and create your assets will affect
how easily and efficiently you can design your work. This lesson will
introduce you to some important skills and concepts:
• Understanding which font formats are best for print
and web projects
• How to choose appropriate font types in various
Creative Cloud applications
• Using TypeKit fonts
You’ll probably need less than one hour to complete this lesson.
Download the project files for this lesson from the Lesson & Update
Files tab on your Account page at www.peachpit.com and store them
on your computer in a convenient location, as described in the “Getting
Started” section of this book. Your Accounts page is also where you’ll find
any updates to the chapters or to the lesson files. Look on the Lesson &
Update Files tab to access the most current content.
154
In this lesson you’ll learn about the different
types of fonts that you can use with Adobe
Creative Cloud.
155
PNote: If you
have not already
downloaded the project
files for this lesson
to your computer
from your Account
page, make sure
you do so now. See
“Getting Started” at the
beginning of the book.
Choosing font formats for creative projects
Whether you’re new to digital fonts or a veteran of print and online publishing, the
use of digital fonts has changed dramatically in recent years with new font formats
and new ways to use them. Adobe Creative Cloud stays in step with these changes
by providing a variety of fonts for print, online, and mobile use.
Fonts for printing
When you apply fonts to text in primarily print-oriented Adobe Creative Cloud
software, such as Adobe Photoshop CC or Adobe InDesign CC (or your word
processor), you typically use fonts that were designed to be installed and viewed
on a desktop or laptop computer. These are the most established kinds of fonts for
personal computers and are sometimes called system fonts or desktop fonts.
Several desktop font formats have been used for print publishing and general
personal computer use over the last 20 years. The major font formats of this kind are:
• PostScript. The earliest high-quality fonts used for personal-computer-based
print publishing were Adobe PostScript fonts. PostScript fonts made it possible
to scale type to any size while preserving smooth curves and sharp edges.
• TrueType. The most common font format in use today is TrueType, which is
now found on just about every Windows and Mac OS X system. TrueType is
ubiquitous because it started out as an Apple font format and was later licensed
by Microsoft; both companies made TrueType the standard font format for
their operating systems.
• OpenType. As personal computers and publishing software became more
powerful and typographical standards advanced, Microsoft and Adobe worked
together to advance type capabilities beyond the limitations of the PostScript
and TrueType font formats. This resulted in the OpenType font format, which is
an open standard that makes it easier for more companies to create fonts.
A wide variety of inexpensive fonts are available in TrueType format. However,
OpenType fonts are now favored by designers and publishers because of advanced
typographic capabilities, such as true small caps and old-style figures, and better
support for non-English glyphs. (A glyph can be a character or a combination of
characters, such as a ligature.) Also, you can use the same font file on Windows and
Mac OS X; whereas TrueType or PostScript fonts typically require font files specific
to Windows and Mac OS X.
You can use any of these formats in Creative Cloud applications in Windows or
Mac OS X. Many fonts are available in all three formats, although new professional
fonts are most likely to appear in OpenType format. When you install Creative
Cloud applications that support printing, a range of Adobe OpenType fonts are
installed along with the application, and those fonts are available to all of the
applications on your system.
156 Lesson 4 Using Fonts with Adobe Creative Cloud
Fonts for websites
Website projects involve font challenges that don’t exist for print. Because website
layouts are not fixed, text may be scaled or reflowed as a web page is viewed on
differently sized displays or browser windows. This is especially true today because
website layouts are increasingly likely to automatically resize for large desktop
displays and small tablet and smartphone displays. For website text to reflow as
layouts adjust, the font must be present on the device where the website is being
displayed. But all fonts are not present on all computers. If you used a font installed
on your computer (a system font) in your design, but that font is not on the reader’s
device, text on your website won’t appear as you intended because the reader’s web
browser will substitute a font that is actually present on the device. Until recently,
the solution to this display problem was to specify a font from the limited set
installed on most computers, referred to as web safe fonts. Of course, using websafe fonts limits design flexibility because there are so few of them to choose from.
On websites where unique typography was a high priority, other approaches were
to convert text to an image or to use browser plug-ins that could support highquality typography. However, images do not scale smoothly, cannot be searched or
highlighted as text, and consume more bandwidth than text, which makes pages
load more slowly. The disadvantage of browser plug-ins is that you can’t assume
they’re installed with every web browser, and browser plug-ins are typically not
available for mobile web browsers on smartphones and tablets—the fastest-growing
area of mobile usage.
Fortunately, those workarounds are no longer necessary because you can now
easily use high-quality fonts on websites thanks to advancements in web standards.
Current web browsers can now download fonts from servers. So, if a font is not
available on the viewing device, that font will simply be downloaded, and the web
page text will be displayed as you designed it. In other words, fonts can now be
linked by a URL and downloaded, similarly to how you can include images and
videos on a web page by embedding URL links to them. The fonts that you can link
to are called web fonts. When you use web fonts, they’re used only temporarily on a
site visitor’s web browser and don’t become available to the rest of the system.
The most common web fonts are available in the following formats:
• OpenType or TrueType. It’s possible for some web browsers to download the
same OpenType and TrueType fonts you would use for print projects, but those
fonts are typically not compressed for high performance over networks.
• Web Open Font Format (WOFF). A WOFF font can be based on OpenType or
TrueType but is optimized for fast downloading.
• Embedded OpenType (EOT). An EOT is a compressed Microsoft version of
the OpenType font format.
Design with Adobe Creative Cloud Classroom in a Book 157
Although you can link to web fonts, you typically do not want to link them to fonts
stored on your website the way you store images and other linked content. It’s often
best to link to fonts provided by a web font service, such as Adobe TypeKit, which
is included with your Adobe Creative Cloud subscription. Web font services are
useful because there is no font format that works with all web browsers. A web
font service can intelligently serve up whichever format works best for the browser
that’s requesting the fonts. Another good reason to use web font services is that you
don’t have to worry about font licensing issues; the fonts they serve are cleared for
use as downloadable elements of websites.
The only disadvantage of web fonts is that they require up-to-date web browsers.
Fortunately, browsers that are incompatible with web fonts are becoming less
common and are now found mostly on very old systems. The web browsers on
mobile devices typically support web fonts, which makes web fonts a practical
and current solution that lets you design websites with access to a wide range
of high-quality fonts.
Using fonts with Adobe Creative Cloud
Whether you’re designing for print, web, or video, Adobe Creative Cloud makes
more fonts accessible to you. When you install Creative Cloud design applications,
such as Photoshop CC or InDesign CC, a set of professional OpenType fonts is
installed along with the software, and you can use those fonts with any application
on your system. These OpenType fonts are system fonts that are appropriate for
print projects but are not ideal for text on web pages. For web design projects, you
may want to use the Adobe TypeKit web fonts that are included with your Adobe
Creative Cloud subscription.
If you build a website by hand coding it, using a web font involves adding
appropriate font code in the correct line in your website’s CSS code. That isn’t
necessary when you build your website in designer-friendly Adobe Muse, because
the integration of Adobe Muse with Adobe TypeKit lets you choose and apply web
fonts to your website by pointing and clicking instead of writing code.
As an additional benefit, some TypeKit fonts are also available for desktop use.
When you use the Adobe Creative Cloud desktop application to select TypeKit
desktop fonts and sync them to your computer, those fonts are installed on your
system and become available to all applications on your system.
In combination, the OpenType fonts installed with Creative Cloud applications and
the Creative Cloud access to Adobe TypeKit web and desktop fonts provide you with
immediate access to a wide selection of typefaces for your print and web projects.
158 Lesson 4 Using Fonts with Adobe Creative Cloud
Choosing desktop fonts in Creative Cloud applications
In Photoshop, InDesign, and other Adobe Creative Cloud design applications, you
might notice that the Type menu looks different than it does in other software you
may use. The reason is that the Type menu in Creative Cloud software is enhanced
to help you choose an appropriate font for your output medium. In applications
that are often used for print, the font menu includes a symbol near the font name
that indicates the format of each font, like this:
OpenType
Adobe PostScript
TrueType
Also, to the right of the font name, you may see a visual sample of the font.
The format of a font does not necessarily guarantee its suitability for a particular
purpose, but there are some guidelines you can follow. TrueType fonts are best
for printed projects, video, and online presentations. For print projects in which
professional typography is a priority, OpenType and PostScript fonts are preferred.
The same font can exist in many versions created by various type foundries
(companies that design and produce fonts). Some sources of fonts, such as the
Adobe Type Library, aspire to higher levels of typographic quality, so their versions
of fonts will typically exhibit a high level of quality in subtle design details and may
contain additional specialized glyphs. If a font exists in OpenType and PostScript
formats, the OpenType version will typically be more recent and possibly more
refined; however, when you’re deciding between multiple versions of the same font,
you should always consider the reputation of each type foundry.
Design with Adobe Creative Cloud Classroom in a Book 159
Download PDF
Similar pages