Intro to Adobe Creative Cloud

So you’ve got Adobe Creative Cloud up and running on your computer! The Creative Cloud is an incredibly powerful suite of software, and the possibilities for the content that you can create with it are near limitless.

But what do all of these colorful, two-lettered icons mean? You might already be familiar with a few of them, but if you’re wondering just exactly what you can do with these Creative Cloud programs, then you’ve come to the right place. In this tutorial, we’ll give you a quick overview of some of the programs that Adobe has to offer, along with some examples of what you can create with them. All of these tools integrate tightly together, so knowledge in one program will complement your work in another. For example, you can create graphics and designs in Illustrator and then put them on a website you’ve designed in Dreamweaver.

Images and Graphics

Vector vs. Raster

Before we dive into Creative Cloud’s graphics creation software, let’s go over the important distinction between raster- and vector-based graphics. Most of the images that you come across on a regular basis are raster-based, meaning that they are made up of a grid of tiny pixels that come together to form the whole image. Computer monitors, TVs, and smartphone displays all render images using pixels, so raster graphics are the most common way to show things as simple as a smiley face or as complex as a photo.

raster examplesTwo examples of raster images. Photo by Jeff Cendejas

On the other hand, we have vector-based graphics, which use mathematical expressions in the form of points, lines, curves, and shapes to make up an image, such as a logo or an illustration.

vector logosSome vector logos

jax vs jaxL: raster puppy. R: vector puppy. Notice how the details get smoothed out when we convert the photo to vector.

While it is more difficult to generate fine details with vector compared to raster, the advantage of vector graphics is that you can scale them up or down as much as you want without distortion. This means that you can use the same design on a business card or blown up on a billboard with no impact to quality.

Vector vs rasterVector vs. raster magnification

Now that that’s covered, let’s go over some of the image and graphics software in the Creative Cloud.

Top ↑

Photoshop

Photoshop is a versatile tool designed for raster-based digital image editing and manipulation. With Photoshop, you can combine images, move objects around, manipulate light and color in your photos, and put Vladimir Putin in a Fisher-Price toy.

QIQj287
by /u/blue_awning on reddit

Photos aside, you can also paint and design in Photoshop!

SILHOUETTE2

Painting by Kai Jiang

magic_of_photoshop_by_stellartcorsica-d94khfp

Design by stellartcorsica on deviantart

Designs for Destiny by Ryan Klaverweide, created in Photoshop and Illustrator

Top ↑

Lightroom

Lightroom and Photoshop work in tandem. While Photoshop provides tools for very detailed digital image manipulation, Lightroom gives you the means to edit and retouch large batches of photos very quickly. While Photoshop is capable of doing most of the things Lightroom can do, Lightroom is easier to learn, has a quicker workflow, and makes it easy to manage and organize large libraries of photos. Lightroom and Photoshop also work hand in hand with Bridge, which lets you organize your photos all in one place.

soyrisaPhoto edited in Lightroom

Top ↑

Illustrator

Illustrator is your go-to for vector-based graphics and illustration. Whether you need to design a logo for a company, a set of icons for a mobile app, or full-page infographics for a magazine, Illustrator’s got your back. Plus, the versatility of vector graphics means that your designs can translate easily from web to print to mobile apps.

cansnbottlesIllustration by Kai Jiang

DLDesign by Matthew Torres and Kai Jiang

Additional examples:

STELLAR PARK, a fictional amusement park branding campaign by Thomas Harmel.  Logo designs done in Illustrator

Watermarks mailing campaign by Makers Company, artwork done in Illustrator and laid out in InDesign

Top ↑

InDesign

InDesign is a professional page design and layout tool. Using InDesign, you can seamlessly lay out graphics you’ve made in Photoshop, Illustrator or elsewhere to create dynamic magazine spreads, brochures, posters, and resumes. InDesign also offers powerful typography tools that you can use to put the finishing touches to your designs.

ResumeResume design by Bryan Christensen

Man on the Run IIPoster design by Bryan Christensen

Japan – Editorial illustrations by Arunas Kacinskas. Illustrations done in Photoshop and Illustrator, laid out in InDesign

Top ↑

Dimension

Adobe Dimension is one of Adobe’s newer products that is designed for branding, packaging design, and product shots. This program has similar qualities to 3D modeling softwares like Autodesk Maya and Cinema 4D but with very limited tools. You can place a 3D shape, like a box or carton, and place materials and stickers on it to create a product prototype. Then you can change the background and lighting, building your very own product shot!

The Baklawa Factory brand design by Baianat. A cool project that lets you see how you can integrate several Adobe apps into one project.

Top ↑

Video

Top ↑

Premiere

Premiere is Adobe’s professional video editing suite. Using Premiere, you can piece video clips together to create just about anything, from movies to music videos to your pitch for your Kickstarter campaign. You can also manipulate color and light in your clips, much like you can with photos in Photoshop. Premiere is simple enough that you can pick up the basics very quickly, and it’s also incredibly powerful in part because it integrates tightly with the other Creative Cloud tools like After Effects and Photoshop. For those of you who are just beginners in video editing, Premiere Rush is a simpler and easier to use mobile app meant for quick and easy video editing.

Night Stroll by Tao Tajima. Most likely edited in Premiere and graphics created and composited in After Effects.

Top ↑

After Effects

With After Effects, you can create stunning visual effects and animate motion graphics. After Effects works very closely with Premiere, so you can take clips directly from your Premiere projects and add explosions, turn day to night, or drop in a few motivational Shia LaBeoufs and then slide it right back into Premiere. You can also animate your work from Illustrator to create dynamic artwork for use in your videos, websites, or mobile apps.

Mobile Interaction Design by Ramotion Inc. Some really cool examples of how you can use After Effects to give mobile apps some life and personality.

Illustrations for Google Transit in Mexico, created in Illustrator and animated in After Effects

Top ↑

Audition

Audition is Adobe’s digital audio workstation. Designed for use with Premiere, you can use Audition to edit and mix audio for use in your video productions, as well as remove any extraneous noise from your clips. Basically, you can do your graphics and effects in After Effects, audio in Audition, and then put it all together in Premiere.

Top ↑

Media Encoder

Once your Premiere project is complete, you can use Media Encoder to output your content in different formats. There are tons of different settings in Media Encoder that you can use depending on what you’re going to use your video for, whether it’s web, mobile, cinema, and so on.

Top ↑

Web Design

Adobe offers two tools for web design, and while they may appear similar on the surface, they actually serve two very different purposes.

Top ↑

Adobe XD

Adobe XD is a prototyping tool to design your mobile and web apps. It is vector-based and made for user experience and interaction design. XD is made for anyone, with no coding, easy to use interface, and draggable assets. You have a whole library of assets you can import and use and you can easily bring in images and videos from other Adobe apps.

NASA App (concept design) by Yoojin Song. A detailed and clean prototype of what an app for NASA could look like.

MIRUN – Lifestyle and running app by Multiple Owners. Another example of an app prototype, but this time for running.

Top ↑

Dreamweaver

If you do know a bit of HTML, CSS, and so on, then Dreamweaver will be your best option. This program is designed for professional web development, and it allows you to quickly visualize your web code on the fly. With Dreamweaver, you can easily integrate designs from many of the other Adobe programs (including Photoshop, Illustrator, After Effects, and Adobe XD­) into your website and create content for both mobile and desktop.

NYTimes Design Concept by Tema Troinoi. Elements created in various Creative Cloud programs and assembled in Dreamweaver.

Top ↑

Adobe Spark

Spark is an easy app that is meant for web and mobile design. It’s great for creating your own portfolios, websites, social media images and videos. You can easily build off ready to use templates or create your own designs. Quickly dd text to your images and videos  and post them to whatever social media platform you use!

That’s the Creative Cloud in a nutshell. Now get out there and start creating!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.