Huge Time-Saving Features in Illustrator


Would I presume too much if I were to say you could stand to work faster in Illustrator? I could—and I wrote the book on Illustrator, literally. Illustrator is a big program with lots of tools and features, but we all get stuck in our ways, don’t we? In this article, I really wanted to expose a bunch of time-saving features in Illustrator—some widely used, some not so much—explain what each is, and point you in a direction where you could find out more if needed.

So let’s stop wasting time reading this opening, and get to saving time in Illustrator. The list of time saving features we will cover is as follows:

  • Layers
  • The Appearance Panel
  • Selections
  • Global Colors
  • Recolor Artwork
  • Graphic Styles
  • Blends


Yes, I had to start the list with layers. Why? Because although most of us have pretty good intentions when it comes to layers, we usually don’t live up to our own hype. How many times have you cursed at a file because you couldn’t somewhat quickly select a series of objects or you wanted to add a mask to only certain artwork? Well, layers are the unsung

Enhancing PDF Documents

You can modify PDF documents by rearranging, cropping, deleting, or inserting pages; editing text or images; or adding multimedia files. You can also add navigational aids such as bookmarks and links.

Examining the work file

You’ll work with conference materials for the fictitious Meridien Conference. The presentation has been designed both for print and for online viewing. Because this online presentation is in the developmental phase, it contains a number of mistakes. You’ll use Acrobat to correct the problems in this PDF document.

  1. Start Acrobat.
  2. Choose File > Open. Navigate to the Lesson04 folder, select Conference Guide.pdf, and click Open. Then choose File > Save As, rename the file Conference Guide_revised.pdf, and save it in the Lesson04 folder.
  3. Click the small arrow on

Screen-based Thinking Let’s Make an App


I really don’t know when. Like all relationships, it seemed to happen in the blink of an eye—from the blur of whatever we were doing before, to a passionate, unquestioning love for the modern, handsome, beautiful interface of the moment: apps.

Maybe it was these gently whispered sweet nothings from all the way back in 2009:

“What’s great about the iPhone is that if you want to check snow conditions on the mountain, there’s an app for that.”1

Forget that the National Ski & Snowboard Retailers Association reported that only 2.6 percent of Americans actually downhill ski—or that they did so only about eight days a year2 when these nothings were first whispered.3 When we heard that siren song, nothing else mattered. Love and reason? Well, they’re like oil and vinegar.

The commercial continued. Our pulses quickened. “And if you want to check where exactly you parked the car . . .”

Don’t tease me. We all know how to end that phrase. Six beautiful trademarked words that may have unintentionally fenced in this generation’s limitations on technological creativity.

There’s an app for that.™

Forget that 780 million4 people in the world, give or take, don’t have access to clean drinking

Attain The Best Real Estate Property From Jomla To Get Effective Amenities

Real estate Joomla substance implemented to fit a multitude of real estate based on customer requirements. When obtaining real estate properties to sell or obtaining demand for renting or purchasing them, you surely will require a location, where you can search and share all realty details. A realty internet site is what you are seeking for. And the components of Joomla Real Estate can assist you systematically and effectively to organize your realty indexing and also other details on your website. It is designed not only for organizations or people doing trade in real estate to post their realty’s detail on the internet, it is also for an individual, who need to search detail about reality, to search property to rent or purchase. Based on this, let’s discuss more information about Joomla real estate in detail.

How Does Joomla Real Estate Can Work

The working process of a Joomla real estate can be partitioned into four categories such as agents, owner, customers and administrator. Initially, the agent is permitted to regulate parties,

Adventures in Experience Design Splatter!

Interface Design for Learning: Basic Principles A-Z


Most interface designers are well versed in the World Wide Web Consortium’s guidelines for web accessibility and in the various country-specific requirements, but abiding by these regulations is critical when it comes to education.

While it might not be immediately obvious, a well-designed, accessible learning experience helps everyone down the road. For example, kids and teens typically use secondhand equipment—special plug-ins and heavy download times can be frustrating. Programs like Flash aren’t available on all devices and may be blocked by corporate firewalls. Beautiful virtual worlds designed for classroom use may fail to run on classroom computers.

Native speakers of all languages and learners of all ages are accessing online learning from every country on the planet. The biggest reason to ensure that your designs comply with accessibility guidelines is so you can be sure to reach all your learners.

Check out the WAI-ARIA guidelines for detailed and definitive advice on making widgets, navigation, and behaviors accessible. If you need some inspiration, see the Thare Machi sidebar.

Effortless E-Commerce with PHP and MySQL User Accounts

The next step in the evolution of the “Knowledge Is Power” e-commerce site is to create a system of user accounts. When the site is complete, PayPal will be the crucial part in the registration process, but just to understand the user account system on its own, as well as to be able to create an administrative user for the next chapter, let’s look at user accounts as a separate entity first.

There are four primary facets to the implementation of user accounts in this chapter. First, a new user registers. Second, a registered user logs in. Third, the logged-in user logs out (in theory, many people, including me, don’t always do so). Fourth, users need to be able to retrieve a forgotten password and change an existing password.

Although this example won’t be storing any sensitive e-commerce data, security will still be taken seriously, for the benefit of the customers and the site itself. In a few places, I’ll make recommendations as to how you can increase security even further, and the chapter ends with even more suggestions. Chapter 12, “Extending the First Site,” makes even more suggestions—security-related and otherwise.

Protecting Passwords

How secure a user account system is will depend largely on

Making Your WordPress Theme Responsive: Core Features

So far, you’ve seen multiple ways to make a website responsive. Now it’s time to really dig in and combine those techniques with WordPress’ unique capabilities.

In Chapter 3, you learned how to apply your responsive CSS to a WordPress theme. You also got an in-depth look at WordPress’ generated CSS classes and created some default styles for what are considered the “essential” ones. From here on out, you’ll go even further, focusing on two types of features: core and blog.

This chapter looks at some of the core features of WordPress instrumental to a good User Experience. The next chapters are about using what WordPress provides developers and leveraging those tools to create better responsive sites. That said, you’ll look at three areas of development in this chapter: navigation menus, images, and widgets.

Handling Navigation

Responsive navigation techniques are bountiful in books and blog posts; many developers have come up with their own implementations for navigation menus on responsive sites. Brad Frost outlines some of the most popular ones at

In this section, we will look at a few popular techniques and how they look on the Millennium Flights site, and then decide what’s best.

A Look at Popular Techniques

If you looked at Brad

Adding Text to Your Pages in Dreamweaver CC

When you add text, you need to deal with two different aspects of the text: its structure and its presentation. Structural elements are things like paragraphs, headings, lists, and the like; presentation is how the text looks, including things like the font, font size, text color, and so on. Most sites these days separate the structure and the presentation. Structure is about organizing the content on the page, and presentation involves making the content look good.

In this chapter, we’ll concentrate on getting text onto your page and applying structure using headings and lists. We’ll also cover using basic HTML text styles to change the look of your text. Dreamweaver CC introduces integration with Adobe Edge Fonts, making web fonts easy to use, so we’ll show you how to add beautiful type to your pages.

Adding Text

Most of the text on a webpage is formatted in blocks, which are enclosed by beginning and ending HTML tags. For example, the HTML for a line of text with paragraph tags wrapped around it looks like this:

<p>This text is wrapped in beginning
and ending paragraph tags.</p>

For a browser to understand that this is a paragraph, you (or in this case, Dreamweaver) have to make it one

A Marriage Made in Illustrator

In the graphics world, we all know that Illustrator = vector and Photoshop = raster. It’s been that way since the dawn of digital graphic time. But as these tools have developed, there has been some cross-pollination of sorts.

I can’t tell you how many times I’ve wanted to create a postcard, website design, or whatever that required me to use both vector and raster elements. While Illustrator is definitely stronger at dealing with vector, you can also import raster images you create elsewhere and make certain transformations to them without leaving Illustrator.

In this article, I want to show you how Illustrator integrates raster content, and discover what we can and can’t do.

Placing and Updating Raster

First off, Illustrator is not meant to be a raster image editing program. That’s what Photoshop and other programs like it are for. But, it can place and link to image files like PSD, PNG, TIF, JPG, and more.

Placing images in Illustrator is almost identical to how you do it in InDesign. There’s even a shortcut for placement (Cmd+Shift+P or Ctrl+Shift+P). By default, images are linked when you place them. That means if the original image is edited in Photoshop, for instance, it can be updated

Working with Panels in Illustrator CC

This chapter will help you become more intimately acquainted with the Illustrator interface features that you will be using continually as you work: the panels. In the preceding chapter, you learned how to arrange them onscreen. Here you will see what the individual panels look like and be briefly introduced to their specific functions—from choosing color swatches (Swatches panel) to switching among artboards (Artboards panel) to editing layers (Layers panel). Note: In-depth instructions for using specific panels are amply provided throughout this book.

The Illustrator panels that are used in this book*

You can read through this chapter with or without glancing at or fiddling with the panels onscreen, and also use it as a reference guide as you work. Panel icons are shown on the next page. Following that, you’ll find instructions for using the Tools panel, a brief description of each tool, an introduction to the Control panel, then a description and illustration of all the other Illustrator panels that are used in this book (in alphabetical order). Note: To open a panel that isn’t already in a dock, choose the panel name from the Window menu.

Exciting Updates to Flash Professional CC

The Rebirth of Flash Professional CC

With the release of Adobe Flash Professional CC earlier this year, the application has undergone a drastic rebirth. Built from the ground up to be lean, modern, and extensible the Flash Professional application has truly started a new life alongside the Adobe Creative Cloud. Originally released along with the full suite of CC branded applications in June 2013, the application included a number of exciting features; Creative Cloud Sync, 64-bit architecture, Dark UI (as shown in Figure 1), unlimited pasteboard, Timeline enhancements, HD video export, Mobile development enhancements, a new code editor, and the ability to perform real-time drawing upon the Stage.

Figure 1 The Flash Professional CC interface

Wait… Isn’t Flash Dead?

Although the Flash Professional application began life closely tied to Flash Player and the SWF file format, starting with the introduction of Flash Player 9 and ActionScript 3.0, this relationship became much more relaxed. Today, with web standard technologies taking on many of the responsibilities that Flash Player once served, there is a decline in the use of the SWF format across many areas and Flash Professional is adapting to these changes by enabling the creation and export of content to serve a multitude

Adaptive Web Design Designing Experiences for People

  • “Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.”

The one constant on the Web is change. There’s always a new design fad; a new darling language, framework, or tool; a shiny new device to view it on; or new ideas of what it means to be “on the Web.”

It’s exceptionally difficult to wrap your head around an industry that is constantly in flux. It makes my head hurt, and if you’ve been working on the web for a while, I suspect you might feel the same.

Having worked on the Web for nearly two decades, I’ve seen the cycle play out over and over. Java applets, Shockwave, Flash, Prototype, jQuery, 960gs, Bootstrap, Angular, React…. Technologies come and go, but the Web remains. Screens went from tiny to huge and then back to tiny again, but the Web remains. Walled gardens were built and then torn asunder to make way for “app” stores and (yes) more walled gardens, but

Top 10 Reasons Why Illustrator CC Is Great for Web Design

As a web developer, I work with a designer to create awesome (we think) sites for our clients. We use a variety of tools for concepting, wireframing, content creation, code generation—which is essentially our web workflow. We always seem to come back to the same tools, and Adobe Illustrator is one of them. Why? Didn’t responsive design kill the static design process? Not exactly. Did it make it harder? Yes. But Illustrator has tools and features that we use for a variety of reasons, from creating simple mockups (wireframing) or content, to full-blown responsive designs.

I’m not trying to convince you to switch tools. Your workflow may be the best for you. Maybe better than mine, but the way content is evolving on the Web—mobile optimized, leaner, cooler—we have all been taking a long hard look at the tools we use, to see whether they are the best choices for what we need to do.

Illustrator is part of our web workflow for these major reasons:

  • Resolution independence
  • SVG, PNG, GIF, JPG—no problem
  • Hosted and icon fonts
  • Pixel perfection (working with grids)
  • Wireframe or full-blown design—you decide
  • Plays well with raster
  • Symbols and other time-saving features
  • Existing framework integration
  • Generates interactive prototypes
  • Extracts CSS

Let’s explore each of these 10 reasons in a

Creating Vector Art with Adobe Shape and Adobe Illustrator

Adobe came out with a slew of new apps for iOS in late 2014, one of them being Adobe Shape. Shape is app that is used purely for tracing images you take with the device camera, images already in the device library, or from images in your Creative Cloud account (see Figure 1). It’s pretty easy to use and simple to boot. The idea (to me) is that you can turn imagery into vector artwork that can then either be used as-is, or even brought into an application like Adobe Illustrator to edit it further or use part of it.

Figure 1 The Adobe Shape website

I found myself being oddly addicted to it, tracing everything I could think of to test its tracing prowess. What I found was that it is good for conceptualizing ideas or trying to capture the basic vector shape for something, but it falls a bit short for complex content with loads of detail. To me, the app is most likely intended more for capturing inspiration instead of hard-core vector tracing. I also find that it works best when capturing hand-drawn sketches or lettering, logos or icons, or other artwork with high contrast.

Currently, Shape is only

Optimize Your Web Animation Workflow

The animation code found on most sites is nothing short of a mess. If there’s one thing experienced motion designers miss about the old, ugly days of Flash, it’s a structured approach to motion design.

The contemporary approach to structuring animation code is twofold: leverage the workflow features of an animation engine (in this case, Velocity.js) to make your code more terse and expressive, and use code organization best practices so that it’s easy to modify your work later.

Say goodbye to deep-nesting JavaScript callbacks and to dirtying your stylesheets with unwieldy CSS animations. It’s time to up your web animation game.

CSS animation workflow

In an attempt to better manage UI animation workflow, developers sometimes switch from JavaScript to CSS. Unfortunately, once animations reach a medium level of complexity, CSS animations typically result in a significantly worse workflow.

Issues with CSS

While CSS transitions are convenient when used sparingly in a stylesheet, they’re unmanageable in complex animations sequences (for example, when all elements sequentially load into view upon page load).

CSS tries to address this issue with a keyframes feature, which lets you separate animation logic into discrete time ranges:

@keyframes myAnimation {
   0% { opacity: 0; transform: scale(0, 0); }
   25% {

Dreamweaver Meets the Challenge of Changing Times

Dreamweaver is the venerable warhorse of web development IDEs. It has outlived not only Microsoft FrontPage, which was released the same year (1997), but also FrontPage’s successor, Microsoft Expression Web. More recently, a challenge has come from Dreamweaver’s young stable mate, Adobe Muse, but Dreamweaver shows little sign of stepping aside, mainly because Muse and Dreamweaver target different markets. Muse is squarely targeted at designers who shudder at the thought of working with code, whereas Dreamweaver expects users to at least understand HTML and CSS, even if they don’t want to type everything manually. Most of all, Dreamweaver owes its longevity to the way it has embraced changes in web development. Just how much the program has changed is obvious as soon as you open a web page in Dreamweaver CC 2014.1.

Designing in the Browser Without Leaving Dreamweaver

Dominating the left side of the screen is the huge new Extract panel, a dream come true for every web developer tasked with creating a web page from a Photoshop comp. The Extract panel enables you to upload Photoshop’s PSD files to the Creative Cloud, and it makes extracting images and CSS seem like child’s play. (We’ll examine the Extract panel in more

13 Nifty Things About Macaw The New Application for Designing Responsive Websites and Prototypes

Macaw (see Figure 1) is a new application for building responsive websites and prototypes visually. “New” in this case means less than a year old, having been released to the public in March 2014. You might have heard of its Kickstarter campaign, or read about it somewhere online, but statistically speaking, you probably aren’t familiar with Macaw yet. If you’re a working web designer or developer, and you’re interested in making responsive websites that work on many types of devices, you should absolutely check it out.

Figure 1 The Macaw UI, showing the project.

The Macaw website gives a nice glance at what sets it apart from the old-school visual web design applications, but in this article we’re going to dig a little deeper and talk about some of the other things that are exciting and interesting about Macaw.

1: Breakpoints

In responsive web design, we use CSS media queries to create breakpoints, which tell a browser, “Here’s a condition where we want to change things around in some way with CSS.” Breakpoints are most commonly based on the width of the window or device (for example, “when the browser window is at least 600 pixels wide, do this”). Writing media queries

Writing Functions and Closures in Swift

We’ve covered a lot up to this point in the book: variables, constants, dictionaries, arrays, looping constructs, control structures, and the like. You’ve used both the REPL command-line interface and now Xcode 6’s playgrounds feature to type in code samples and explore the language.

Up to this point, however, you have been limited to mostly experimentation: typing a line or three here and there and observing the results. Now it’s time to get more organized with your code. In this chapter, you’ll learn how to tidy up your Swift code into nice clean reusable components called functions.

Let’s start this chapter with a fresh, new playground file. If you haven’t already done so, launch Xcode 6 and create a new playground by choosing File > New > Playground, and name it Chapter 4. We’ll explore this chapter’s concepts with contrived examples in similar fashion to earlier chapters.

The Function

Think back to your school years again. This time, remember high school algebra. You were paying attention, weren’t you? In that class your teacher introduced the concept of the function. In essence, a function in arithmetic parlance is a mathematical formula that takes an input, performs a calculation, and provides a result, or output.

Mathematical functions

Web Design Basics for Adobe Dreamweaver CC

Developing a new website

Before you begin any web design project for yourself or for a client, you need to answer three important questions:

  • What is the purpose of the website?
  • Who is the audience?
  • How do they get here?

What is the purpose of the website?

Will the website sell or support a product