IntroductionWelcome| 00:04 | Hello and welcome to Photoshop for Web Design!
| | 00:06 | My name is Justin Seeley.
| | 00:08 | In this course, I'll be walking you
through how to use Photoshop as a web
| | 00:12 | design and mockup tool.
| | 00:14 | We'll start off slow by covering the
basics like setting up a new document, using
| | 00:18 | grid systems, and working with color on the web.
| | 00:20 | Then we'll take a look at more complex
topics like layer management, creating
| | 00:24 | wireframes for web sites and
applications, simulating user interface elements,
| | 00:29 | and exporting graphics in a
variety of different formats.
| | 00:33 | By the end of this course,
you'll have gone through my entire workflow for
| | 00:36 | creating a web site mockup that you
can then take into Dreamweaver and code
| | 00:39 | yourself or hand off to a
developer to complete the project for you.
| | 00:44 | If you're ready, let's get
started with Photoshop for Web Design.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a Premium member of the
lynda.com online training library, you have
| | 00:03 | access to the course exercise files.
| | 00:06 | Once you download those from the
lynda.com web site, just open them up and
| | 00:10 | you'll be able to explore, chapter by
chapter, all of the files that I use
| | 00:13 | throughout the course.
| | 00:15 | If you're not a Premium member of the
online training library, that's okay.
| | 00:17 | You can still follow along
step by step by using your own assets.
| | Collapse this transcript |
|
|
1. Core ConceptsDesigning for screens| 00:00 | Welcome to the wonderful world of web design,
| | 00:03 | although I am not sure we can
really call it web design anymore.
| | 00:06 | Gone are the days where we are
merely designing for a singular
| | 00:09 | desktop experience.
| | 00:11 | Now as "designers," we are asked to
design everything from mobile applications
| | 00:16 | to digital magazines and everything in between.
| | 00:19 | The common thread here is not the
Internet, but more so the screens in which we
| | 00:23 | are viewing this type of content.
Therefore, I'm proposing that we ditch the
| | 00:26 | "web" in "web designer" and simply
replaced it with the word "screen."
| | 00:30 | As a screen designer, we are in charge
of providing engaging and user-friendly
| | 00:34 | experience for anyone coming
into contact with our products.
| | 00:37 | This includes accessing it through
mobile phones, tablets, and desktop computers.
| | 00:42 | In order to make the transition from
traditional designer to screen designer, we
| | 00:45 | really need to change our mindsets.
It's no longer acceptable to ignore the vast
| | 00:50 | ecosystem that is the world of
content-consumption devices, and we need to do
| | 00:54 | everything we can to evolve our work
habits and stay ahead of the curve.
| | 00:57 | Hopefully, by the end of this course
you'll have a better understanding of what
| | 01:00 | makes for a usable web design these days
and how you can change the way you work
| | 01:03 | and adapt your skills to provide your
users with the best experience possible.
| | Collapse this transcript |
| Decoding screen size and resolution| 00:00 | Before we start learning how to
create web graphics, we need to first
| | 00:03 | understand the difference between
something called resolution and something
| | 00:06 | called pixel dimension.
| | 00:08 | For many years, it's been assumed that
we should always design our web graphics
| | 00:11 | in a 72-pixel-per-inch or
dots-per-inch resolution.
| | 00:16 | And in many ways, that is considered
to be standard practice for creating
| | 00:19 | graphics for screens.
| | 00:21 | However, in today's day and age,
we have to deal with many device types
| | 00:24 | and screen resolutions.
| | 00:25 | For instance, Apple has a series of
retina displays that go in its iPad, iPhone,
| | 00:30 | and now MacBook Pros.
| | 00:32 | These resolutions exceed
even 300 pixels per inch.
| | 00:35 | There are also many other devices and
screens that go even higher than 72,
| | 00:40 | things like 150 pixels per
inch, 240, and even higher.
| | 00:44 | The key thing to remember here is that
no matter what the resolution, the pixel
| | 00:48 | dimension is what counts
and what stays the same.
| | 00:51 | The pixel dimension refers to the actual
amount of space an object takes up on a
| | 00:55 | given screen regardless of
the resolution or screen size.
| | 00:59 | Take a look at this example that
I have opened here on my screen.
| | 01:02 | I have opened the screen_sizes.psd
document, and I have three different screen
| | 01:07 | sizes showcased here:
| | 01:08 | 1024 x 768, 1440 x 900, and 1600 x 1200.
| | 01:14 | Directly in the middle of each one of
these screen sizes is a small white circle.
| | 01:18 | The white circle actually takes up 200
pixels by 200 pixels of actual space.
| | 01:23 | But you'll see as I start to move
through the screen sizes, the circle looks as
| | 01:27 | though it's becoming smaller simply because
it's being lost in the larger screen size.
| | 01:32 | So if I turn off the 1024x768 to reveal
the circle in the 1440, you'll see that
| | 01:38 | it looks significantly smaller than it
did before, but it's actually the same
| | 01:42 | size as it was on the previous screen size.
| | 01:44 | Same holds true for 1600 x 1200;
| | 01:46 | if I turn that off, the circle is even
smaller, directly in the middle of the screen.
| | 01:51 | This is because there are more actual
pixels in the screen, making it look as
| | 01:56 | though this graphic has gotten smaller,
when in fact, it's just on a different-
| | 02:00 | sized canvas, making it appear
to be smaller than it actually is.
| | 02:04 | Let's switch over to this monitors.jpg
document, and look at how the lynda.com
| | 02:09 | homepage is displayed on two
different resolution screens.
| | 02:12 | On the left is a higher
resolution, and on the right is a
| | 02:15 | lower-resolution screen.
| | 02:17 | The homepage doesn't change at all.
| | 02:19 | The pixel counts all remain the same.
| | 02:21 | It's just that with the monitor on the
right, you have less pixels on screen;
| | 02:24 | thus you don't have as much room to show things,
| | 02:27 | meaning you'll have to scroll
around a little bit more to find the
| | 02:30 | things you're looking for.
| | 02:32 | On the left-hand side, everything is
exactly the same size on the homepage--
| | 02:36 | images, text, et cetera--but it looks
as though things are smaller, because we
| | 02:40 | have more pixels that are able to be
displayed on this higher-resolution screen.
| | 02:44 | So, as we design our web sites,
it's important to remember and take into
| | 02:48 | account the pixel value of our images that
we create, more so than the actual resolution.
| | 02:54 | We'll explore retina graphics in a
later movie, and how we can adapt our
| | 02:58 | workflow for these new
higher-resolution screens to get the best results.
| | 03:02 | But for now, let's worry about the
pixel dimensions of the objects we're
| | 03:05 | creating as opposed to the
resolution or screen size.
| | Collapse this transcript |
| Exploring the PSD-to-HTML workflow| 00:00 | If you're new to the world of web
design or if you mainly consider yourself a
| | 00:04 | "front end" designer, you may be unaware
of the actual process that goes on after
| | 00:09 | your design is handed off to a developer.
| | 00:12 | In this movie we'll be exploring the
PSD to HTML workflow and seeing exactly
| | 00:16 | what turns our static
designs into functioning web sites.
| | 00:20 | For me, this is basically a
six-step process. Let's take a look.
| | 00:24 | I have opened here a file called
workflow.psd, and I am just going to
| | 00:28 | page-through the various parts that
I have outlined in the Layers panel,
| | 00:31 | Part One through Six.
| | 00:34 | So the first thing we do
is we start with a mockup.
| | 00:37 | This could be something as simple as
sketching things on a napkin or doing
| | 00:40 | something in Photoshop as a wireframe.
| | 00:43 | In any case, we need to make sure that
we have the skeleton in place for our
| | 00:46 | site. This is the bare-bones mockup
template that we're going to be using to
| | 00:51 | apply all of the colors,
graphics, and styles to later on.
| | 00:55 | The next step would be to aggregate our content.
| | 00:57 | Aggregating content means collecting
everything from fonts and images to color
| | 01:02 | swatches, anything we need to
make this site happen and look good.
| | 01:06 | We need to aggregate that in one single
location so that we can then load that
| | 01:10 | into our Photoshop
document and use it accordingly.
| | 01:14 | Once we have got all of our content
aggregated into our Photoshop document, it's
| | 01:17 | time to slice it up.
| | 01:19 | This means chopping our web site into
smaller pieces which are then easily
| | 01:23 | exported and used in other
applications, like Dreamweaver.
| | 01:27 | Once all of our images are sliced up
and ready to go, we need to then export
| | 01:30 | them outside of Photoshop and organize
them into a folder structure which we can
| | 01:35 | then use inside of
Dreamweaver to create our own web site.
| | 01:39 | The last thing we need to do is
we need to put the code in place.
| | 01:43 | Once we have everything exported out of
Photoshop, organized into a folder that
| | 01:47 | we can use inside of Dreamweaver, it's
time to put the CSS and HTML standards in
| | 01:51 | place and make this thing a
fully functioning web site.
| | 01:56 | If you'd like more information on
exactly how to do this type of workflow and go
| | 02:00 | from Photoshop to HTML, be sure you
check out this course by Sue Jenkins on
| | 02:05 | Designing Web Sites from
Photoshop to Dreamweaver.
| | 02:08 | She takes you step by step through the
entire process of converting a static PSD
| | 02:12 | file into a fully functional
web page, using Dreamweaver.
| | 02:17 | It's a great class and I highly
recommend it for anyone trying to make the jump
| | 02:20 | from static design into fully
functioning web designer/developer.
| | Collapse this transcript |
| Setting up Photoshop for web work| 00:00 | Before we get started mocking
anything up, we need to first make sure that
| | 00:03 | Photoshop is set up properly
for our web design workflow.
| | 00:06 | This of course will be different for
you because everyone has their own way of
| | 00:10 | working, but for me there are some
things that I need quick access to during my
| | 00:14 | web design process that Photoshop
simply doesn't give me right off the bat.
| | 00:17 | The first thing I'm going to
do is open up the Type panels.
| | 00:21 | I use a lot of text in my
designs and I'm constantly tweaking it,
| | 00:24 | so I need access to both the Character
and Paragraph panels in order to make
| | 00:28 | those changes quickly.
| | 00:30 | In order to open those up, we'll go up
to the Window menu, and I am simply going
| | 00:34 | to come down and choose Character.
| | 00:36 | By choosing Character, it
automatically opens up both the Character
| | 00:39 | and Paragraph panels.
| | 00:40 | I will collapse those by clicking this
arrow so that they stay right here in my dock.
| | 00:46 | Next, I want to bring up the
Character and Paragraph Styles panel.
| | 00:49 | These are new to Photoshop CS6, but they
have already become a necessity for my workflow.
| | 00:55 | Basically these panels allow you to
create styles the same way you do in
| | 00:58 | InDesign and then apply those styles to
various text objects throughout your design.
| | 01:03 | It's a really handy feature and
it's really become one of my favorites.
| | 01:06 | Let's go ahead and open that up now.
| | 01:08 | I'll go back up to the Window menu and
I'll go down and I'll choose Character Styles.
| | 01:13 | Again, choosing Character Styles
automatically opens up Paragraph Styles as
| | 01:17 | well, so now I have access to both of them.
| | 01:19 | I will collapse those
and they remain in my dock.
| | 01:22 | Next up, I'm going to open the Web
Color Spectrum in the Swatches panel.
| | 01:27 | I do this for two reasons:
| | 01:28 | one, it gives me a wide variety of
web-safe colors to choose from, and two,
| | 01:33 | when I hover over the swatches,
it doesn't give me a generic name like Lime
| | 01:37 | Green or Plum Purple.
| | 01:39 | It actually gives me the hex code
value of the swatch that I'm hovering over,
| | 01:44 | which for those of us who
write CSS, is a very valuable tool.
| | 01:48 | Let's go ahead and open those up now.
| | 01:49 | I will go over to the Swatches panel.
Inside the Swatches I am going to choose
| | 01:55 | the Swatches panel dropdown menu.
| | 01:56 | I will go down to the
bottom and look for Web Spectrum.
| | 02:01 | Once I find Web Spectrum, I am
going to choose either Append or OK.
| | 02:06 | Hitting Append means you are adding
the web spectrum to the already existing
| | 02:10 | colors inside of your Swatches panel.
| | 02:12 | If you hit OK, it will replace the current
swatches there with the ones you are choosing.
| | 02:16 | In this case I want to
replace all of them so I'll hit OK.
| | 02:20 | Once I have hit OK, all of the web
spectrum colors show up here inside of
| | 02:23 | the Swatches panel, and if I expand this down,
you can see just how extensive this library is.
| | 02:30 | Anytime I put my eyedropper over a color--
like, let's say, this lime-green color--
| | 02:34 | notice it doesn't say lime green.
The pop-up actually says the Hex Code value
| | 02:38 | that's associated with that swatch.
| | 02:40 | Anytime I need this to hand out to a
developer or to write in CSS, I just
| | 02:45 | simply come over, hover over the color, and it
will give me automatically the hex code value.
| | 02:50 | Now let's go ahead and shrink this
back up because I don't need this to be
| | 02:53 | displayed quite as large.
| | 02:55 | And so the final thing that I want to
make sure that I have are the layers and
| | 02:59 | Paths panel prominently
displayed somewhere in my workspace.
| | 03:03 | If you're lucky enough to have two
monitors, I would suggest throwing these
| | 03:06 | panels over to your second screen so
they get the full real estate that they
| | 03:10 | deserve; otherwise you can use the built
-in sizing handles to ensure that they
| | 03:14 | are big enough for you to
easily navigate and read.
| | 03:16 | When you are working with web site and
application mockups, you are going to
| | 03:20 | deal with a ton of layers
and a lot of paths as well.
| | 03:23 | You'll want easy access to
these panels at all times.
| | 03:26 | So what I am going to do here is I
am going to come right here where it
| | 03:28 | says Adjustments and Styles and I'm simply
going to double-click on the word Adjustments.
| | 03:34 | When I do that, the Layers panel
automatically shifts up to give me more room.
| | 03:38 | I can also adjust the height of this
panel if I need to see more swatches or if
| | 03:42 | I want to see less swatches,
I will just drag it back up.
| | 03:46 | I want to make sure that this is
large and prominent so I can easily get to
| | 03:48 | multiple layers at a time
or multiple paths at a time.
| | 03:52 | I'm also going to take the Paths panel
and click and drag it to the left so that
| | 03:56 | it's right next to layers.
| | 03:58 | I want to be able to easily switch
between the two, especially when I am
| | 04:02 | creating vector shapes.
| | 04:04 | Now that I have my workspace all set up,
I'm going to save this workspace by
| | 04:08 | going up to the workspace jump menu.
| | 04:10 | That's located right here.
| | 04:12 | When I click on that, you'll
notice that there are several workspaces
| | 04:15 | already available to me.
| | 04:16 | However, none of them are web-design-specific.
| | 04:19 | So in this case, I'm going to create
a new workspace and I am just going to
| | 04:22 | call it Web Design.
| | 04:25 | Underneath, in the Capture section, it
will tell me here that panel locations
| | 04:29 | will be saved in this workspace, but I can
also include keyboard shortcuts and menus as well.
| | 04:34 | If I had customized either one
of these, I would check the boxes.
| | 04:37 | I haven't customized either one of those
though, so I will go ahead and just hit Save.
| | 04:42 | Once I have saved it, you will notice
that Web Design now shows up inside of the
| | 04:46 | jump menu up here at the top, so
anytime that I was in a different workspace,
| | 04:50 | like let's say I was doing something
for Photography and I jumped into the
| | 04:53 | photography workspace,
| | 04:54 | I could easily get back to the Web
Design workspace by just clicking and
| | 04:58 | choosing Web Design.
| | 05:00 | This is just my personal setup.
| | 05:03 | Yours will inevitably be
different, and that's okay.
| | 05:06 | When working in software applications
like this, there is no right or wrong way;
| | 05:10 | there's only your way.
| | 05:12 | Right now you might not know
what your way is, and that's okay.
| | 05:16 | As we continue to go through this course,
you'll find things out about yourself
| | 05:19 | and about your workflow that will help
you determine exactly what you're going
| | 05:23 | to need at any given time,
and hopefully now you know how to implement those
| | 05:27 | changes going forward.
| | Collapse this transcript |
| Creating a new document for web| 00:00 | The first step in any design project is
creating a new file and if this is your
| | 00:04 | first project for the web, the setup
is probably going to be a little bit
| | 00:08 | different than you're used to.
| | 00:10 | Let's explore how I go about setting up
a new document for a web-based project.
| | 00:14 | I'll start by going up to the File
menu and choosing New. You can also hit
| | 00:18 | Command+N or Ctrl+N on your keyboard.
| | 00:22 | Once I am inside the New Document
dialog box, I have the ability to name this
| | 00:25 | project, so in this case I'll just call
it Website Mockup. And directly underneath
| | 00:31 | that I can choose from a series of presets.
| | 00:34 | Since I'm designing for a web site, I'm
going to choose Web, because this sets a
| | 00:38 | couple of essential document presets
that I need going forward, like the
| | 00:42 | Resolution--72 pixels per inch,
which is standard for screen design--
| | 00:47 | and the Color mode is also set to
RGB Color, which is also essential for
| | 00:51 | screen-based designs.
| | 00:53 | The size of the document is
ultimately going to be dictated by the project
| | 00:57 | that you're working on.
| | 00:58 | But in most cases we'll assume before
designing a web site that the end user has
| | 01:03 | a higher-resolution monitor
than just simply 1024 x 768.
| | 01:08 | In my personal workflow I design
web sites that range anywhere between 900 pixels
| | 01:12 | and 1000 pixels wide;
| | 01:14 | therefore, I design my documents at
about 1200 pixels wide so the design has
| | 01:19 | breathing room around the outside of
it and also so I can simulate what it's
| | 01:23 | going to look like in a larger browser window.
| | 01:26 | So for this document here, I am simply
going to type in 1200 pixels for the Width.
| | 01:31 | And let's assume here that I'm
designing a blog, for instance.
| | 01:34 | I'm going to increase the Height
significantly for this, because I want to leave
| | 01:38 | room for things like blog posts
widgets, footers, all that kind of stuff.
| | 01:44 | So I'm going to increase
this to about 2000 pixels tall.
| | 01:48 | If I find this works for me on a
regular basis for blog design, I can come over
| | 01:53 | to the right and I can choose Save
Preset. By choosing Save Preset, I can go in
| | 01:58 | and I can say Blog Design for the Name.
| | 02:02 | I can choose to include the
Resolution, the mode, the Bit Depth, Content,
| | 02:07 | Profile and Pixel Aspect Ratio, which
is exactly what I want, and I'll hit OK.
| | 02:13 | Once I hit OK, that is now saved as one
of my presets, so anytime I go back in
| | 02:17 | to create a new document, I can simply
drop this down, go to the top, and Blog
| | 02:23 | Design is listed right there.
| | 02:25 | Once I select that, all of my options are
exactly as I need them to be, and I can hit OK.
| | 02:32 | Once you hit OK, you're ready to
start mocking up your masterpiece.
| | Collapse this transcript |
| Creating a new document for mobile| 00:00 | As designers, our jobs aren't just
limited to standard desktop web design anymore.
| | 00:05 | We now have to design mobile
applications and mobile web sites as well.
| | 00:09 | Luckily, Photoshop is built to handle
these types of designs with no problem.
| | 00:13 | In this movie, I will show you how
to set up a document from mobile web
| | 00:17 | or application design.
| | 00:18 | First, we need to go up
and create a new document.
| | 00:20 | I will do that by pressing Command+N
on the Mac, Ctrl+N on the PC. Or you can
| | 00:26 | just go to File > New.
| | 00:27 | Once inside of this new document dialog
box, I will simply name this App Mockup
| | 00:33 | and underneath the Presets, I'll drop
that down and choose Mobile & Devices.
| | 00:38 | Once I have the Mobile & Devices preset
selected, you will notice that it does a
| | 00:42 | couple of things that we need that
are essential to screen-based design,
| | 00:46 | first of which is the Resolution, which
is set to 72--standard for any monitor--
| | 00:50 | and the Color mode, which is set
to RGB, which is also a standard for
| | 00:53 | screen-based design.
| | 00:55 | The one thing that I strongly dislike
about the New Document dialog box in
| | 00:59 | Photoshop is the fact that it only
lists the sizes based on pixel count and not
| | 01:05 | the actual device name.
| | 01:07 | This means instead of coming in and
choosing something like iPad or Galaxy tab,
| | 01:11 | I have to know the precise screen
size of each device I am designing for.
| | 01:16 | You will notice when I drop this
down, I get things like 240 x 320,
| | 01:19 | 540 x 960, 1536 x 2048.
| | 01:24 | It doesn't actually give me the
devices, so I have to know these numbers off
| | 01:28 | the top of my head.
| | 01:29 | So I have done a little research and
I have determined the devices that I
| | 01:33 | personally design for most often, and I
have created my own presets based off
| | 01:37 | those screen sizes and I've named
them according to the device, making it
| | 01:41 | much easier for me to get my project going
without having to worry about crunching numbers.
| | 01:46 | So let's take a look at how I would do that.
| | 01:48 | First off, I have to determine the
screen sizes that I design for most often.
| | 01:52 | In your case, you'll probably have to
work a little bit and get some more client
| | 01:56 | work in to know exactly what screen
sizes you need to design for most often.
| | 02:01 | In most cases, you can never go wrong with
the ones that I'm about to show you here,
| | 02:05 | the first of which is the iPhone.
| | 02:07 | The iPhone is one of the most popular
mobile devices out there today and in
| | 02:10 | order to design for the iPhone, you would
need to select a screen size of 640 x 960,
| | 02:16 | providing you're designing for the
Retina display, or you could also choose
| | 02:20 | 320x480, which is the older
iPhone, the original 3G and 3GS.
| | 02:26 | In this case, I want to design for the
iPhone 4 and 4S, so I will choose 640 x 960
| | 02:31 | and I'll choose Save Preset.
| | 02:33 | I'll call this iPhone 4 and
in parentheses S and hit OK.
| | 02:40 | Now let's say I want to design for the iPad.
| | 02:42 | I will drop this down again.
| | 02:44 | The iPad is 1024 x 768 in a landscape
orientation. In a portrait orientation that
| | 02:50 | would be 768 x 1024, so I will select that,
| | 02:54 | Save Preset, iPad, hit OK.
| | 02:59 | Let's drop this Size down again, and
let's say that I wanted to design for the
| | 03:04 | Kindle Fire or the Nook Tablet.
| | 03:06 | That would be 600 x 1024 pixels.
| | 03:08 | So I will select that, Save
Preset, Fire/Nook, and hit OK.
| | 03:17 | I also want to be able to
design for Android devices.
| | 03:21 | A common Android device is the Galaxy S.
When I drop this down, I will select 480
| | 03:26 | pixels by 800 pixels and I'll choose
Save Preset, and I will just call this
| | 03:32 | Galaxy S. Now I'll hit OK.
| | 03:36 | Again, your sizes may differ depending on
the devices that you design for most often.
| | 03:41 | You may just need the iOS devices.
| | 03:44 | You may only need Android devices.
| | 03:46 | Come in and find your screen size
and then name your presets accordingly.
| | 03:49 | When I drop down my Presets menu now at
the top, you will notice that all those
| | 03:53 | devices are now listed here:
| | 03:55 | iPhone 4S, iPad, Fire/Nook, Galaxy S.
So if I want to design for the iPhone,
| | 04:02 | I'll just select it.
| | 04:03 | It switches everything to
640 x 960, 72, RGB, and I will hit OK.
| | 04:10 | So as you continue to explore the world
of mobile and application design, take
| | 04:14 | note of the common screen sizes and
then save them out as presets on your own.
| | 04:18 | This will really save you some time
and hopefully help jumpstart your
| | 04:22 | next mobile project.
| | Collapse this transcript |
| Setting up a responsive web layout| 00:00 | One of the biggest buzzwords surrounding
web design these days is responsive design.
| | 00:04 | If you're unaware of what
responsive design is, think of it this way.
| | 00:08 | The web is a constantly moving target.
| | 00:10 | As designers, we're constantly
inundated with new devices and screens that we
| | 00:14 | have to account for.
| | 00:15 | Therefore, it's much easier for us to
design one layout which "responds" to
| | 00:20 | a given screen size versus creating several
layouts for each size that we're trying to target.
| | 00:23 | Setting up a responsive layout is
very easy in programs like Illustrator and
| | 00:28 | Fireworks, which support multiple
pages and artboards at different sizes.
| | 00:32 | Photoshop however is much different.
| | 00:34 | There's no such thing as "responsive" PSD
file, and the closest thing we have to
| | 00:39 | pages are layer comps.
| | 00:41 | So we have to be creative.
| | 00:42 | In my experience, there's only really
one acceptable way on how to design for a
| | 00:46 | responsive layout inside of Photoshop.
| | 00:49 | This requires you to create a
separate PSD for each target screen size that
| | 00:52 | you're trying to hit.
| | 00:54 | Therefore, if you wanted a desktop,
tablet, and mobile phone version of a site,
| | 00:57 | you would create three separate
PSD files to accommodate that.
| | 01:01 | As you can see, I have
three documents opened now:
| | 01:03 | one for the desktop, one for
mobile, and one for a tablet.
| | 01:08 | Each design shares things like colors,
navigation and graphics, but they're all
| | 01:12 | set to different sizes and arranged in
different ways which makes sense for the
| | 01:15 | given platform for which they're being designed.
| | 01:18 | You might find this method to be quite
tedious and really, it is, but it is a
| | 01:22 | sure-fire way to account for each
individual screen size that you're trying to
| | 01:25 | target in your design.
| | 01:26 | Let's take a look at these templates now.
| | 01:28 | I'll start with the desktop version,
and on the desktop version you'll see
| | 01:32 | that I'm using a unified color
palette that goes across all the different
| | 01:34 | designs that I have:
| | 01:36 | the orange and the dark gray and so forth.
| | 01:38 | I have a header that stretches all the
way across the top with a logo flush left
| | 01:42 | and the navigation of the right.
| | 01:44 | I have big content in the middle with
thumbnails and some Lorem Ipsum text beneath it.
| | 01:47 | I also have a footer at the bottom.
| | 01:50 | I carry over this same theme
to the tablet document as well.
| | 01:53 | Inside of the tablet document,
you'll see here that the logo has shifted upward
| | 01:57 | to give more room for the navigation.
| | 01:59 | I have to keep the navigation at a
larger size because on a tablet it needs to
| | 02:03 | be "touch friendly."
| | 02:05 | Then underneath that the
contents still remains large.
| | 02:08 | I don't have any of the text beneath
there though, because I wanted to leave
| | 02:11 | enough room for all of
the content to be displayed.
| | 02:14 | Again, it has to be a touch-
friendly interface because most tablets are
| | 02:18 | finger-gesture machines.
| | 02:20 | The footer is larger as well.
| | 02:22 | That's going to accommodate for larger
links, buttons, and widgets that I might
| | 02:25 | need to include at the bottom.
| | 02:26 | Finally, let's jump over
into the mobile document.
| | 02:28 | You'll see the mobile document is
extremely different from the other two.
| | 02:31 | That's because the mobile document
assumes that I'm looking at this on a smaller
| | 02:34 | mobile device screen, like a phone.
| | 02:37 | Here I have a header with the logo.
| | 02:39 | The logo takes up a large portion
of this so that it's easily visible.
| | 02:42 | Directly underneath that, I have the
navigation, styled going vertically as
| | 02:46 | opposed to horizontally.
| | 02:47 | Again, this is to
accommodate a touch-friendly interface.
| | 02:50 | And then finally, at the bottom, the
content is arranged much the same way
| | 02:53 | it was on the other layouts, but again,
I've designed it so that it's touch friendly.
| | 02:58 | The footer is almost nonexistent in
this layout, but I could extend it a little
| | 03:01 | bit further and just the force the
user to scroll with their finger.
| | 03:05 | As I said, there are other programs
which handle this much, much better,
| | 03:08 | including Fireworks and Illustrator.
| | 03:10 | But in my opinion this is the best
way to target individual screen sizes
| | 03:15 | utilizing Photoshop documents.
| | 03:16 | So when you try to plan out your next
responsive design, build a library of
| | 03:20 | common assets that you can share across
multiple designs like logos, headers, and
| | 03:24 | navigational components, and then
insert those into the various sizes and
| | 03:28 | rearrange and size them accordingly.
| | Collapse this transcript |
| Creating email newsletter documents| 00:00 | Another popular use for web design is
creating email newsletter templates.
| | 00:04 | Whether it be a stylized sales
announcement from your local grocery store or
| | 00:08 | even in the new releases email that
lynda.com sends out on a regular basis,
| | 00:12 | email newsletters are a great way to
stay in contact with your customers and
| | 00:15 | drive new sales and people to your web site.
| | 00:18 | We can leverage Photoshop to help us
design these templates as well, and it's
| | 00:22 | actually quite easy.
| | 00:23 | While there's no email newsletter
preset in Photoshop, you can create your own.
| | 00:28 | So, let's take a look at how we can do that now.
| | 00:31 | I am going to go ahead and press
Command+N or Ctrl+N to bring up the New
| | 00:35 | Document dialog box.
You could also go up to File > New.
| | 00:37 | I am not going to worry about creating
a name, because I am just going to be
| | 00:39 | saving a preset here.
| | 00:41 | From the Preset menu here, I can drop
this down, and I can actually choose
| | 00:44 | something like Web just to get myself started.
| | 00:47 | And then I can take a look at some of
the sizes to see what's available to me.
| | 00:50 | It should be noted that a majority of
email newsletters come in a fixed width,
| | 00:54 | meaning that they stay one
constant size, like 500 pixels.
| | 00:59 | This is good news because it means you
don't have to build this on a responsive
| | 01:02 | grid or anything like that.
| | 01:04 | One of the big no-nos of email
newsletter design is using horizontal scrollbars.
| | 01:09 | We do not want the user to have to scroll
sideways through the design to find anything.
| | 01:14 | Therefore, we should design our
template to be around 550-600 pixels wide.
| | 01:19 | Now, there is no set web size that is that small
inside of this dropdown menu, and that's okay.
| | 01:25 | You don't necessarily have to stick to that.
| | 01:28 | You can create a bigger document like
let's say 800 x 600 and then you use guides
| | 01:32 | or even shape layers to
determine the exact width of the design.
| | 01:36 | Using a bigger canvas size, like 800 x 600,
also gives you an idea of what the email
| | 01:42 | newsletter would look like on a larger screen.
| | 01:44 | But if you wanted to stick to the standard
550 x 600 pixel wide document, that's okay.
| | 01:49 | You can do that as well.
| | 01:50 | I can just click away from that,
and I can enter in a value right here.
| | 01:55 | So in this case I think I
will do 600 pixels wide.
| | 01:58 | The height really doesn't matter as much,
because users are used to scrolling up
| | 02:01 | and down on regular web pages.
| | 02:03 | So feel free to make this as tall as you like.
| | 02:05 | In this case, I think I am going
to make this about 800 pixels tall.
| | 02:09 | Remember, resolution doesn't
necessarily matter here, but pixel count does,
| | 02:13 | so for now, we'll just leave this on
the default 72-pixels-per-inch setting.
| | 02:18 | Now, once I've created all these parameters
in here, I can then save this as a preset.
| | 02:24 | So I will click Save Preset, and
I am just going to call this Email
| | 02:28 | Newsletter, and I will hit OK.
| | 02:31 | Once I hit OK, Email Newsletter now shows up
as one of my choices inside of my Preset menu.
| | 02:36 | So anytime I need to get back to this,
I can easily pick that, and hit OK.
| | 02:41 | Once I hit OK, I'm now able to design
my Email Newsletter template using the
| | 02:45 | static size that I've created here.
| | 02:47 | It would probably be a good idea to
develop a handful of templates, so you can
| | 02:51 | change them up every now and then, and
use different ones on different projects.
| | 02:55 | If you're doing client work, this is
especially useful because you can have a
| | 02:58 | different one for each client for instance.
| | 03:01 | Either way, set up your own templates,
save them, and you'll be well on your way
| | 03:05 | to creating some awesome newsletters in no time.
| | Collapse this transcript |
|
|
2. Working with ColorAdjusting color settings| 00:00 | One of the biggest problems that we
face as web designers today is something
| | 00:03 | called color shifting.
| | 00:05 | By this I mean that the colors of
graphics look differently or shift when
| | 00:09 | they're loaded in a web browser
versus what they look like when they're
| | 00:11 | inside of Photoshop.
| | 00:12 | While there are many theories on how to
remedy this problem, there is one tried-
| | 00:17 | and-true method that I use
especially when I'm creating web graphics.
| | 00:20 | I have to warn you though: no matter
what you do, it is impossible for your
| | 00:25 | graphics to look exactly
the same across every monitor.
| | 00:28 | Macs, for instance, will display graphics a
little lighter by default, as opposed PCs.
| | 00:33 | And monitors themselves show all sorts
of different color shifts and variations
| | 00:37 | based on their individual age and settings.
| | 00:40 | This is not something that you can
control and certainly not something that you
| | 00:44 | should beat yourself up over either.
| | 00:45 | The key here is to calibrate your
monitor as close to neutral as possible and
| | 00:50 | use the method that I'm about to show
you to ensure that your graphics look as
| | 00:54 | good as possible across
multiple browsers and screens.
| | 00:57 | And then just prepare yourself to
gently explain to your clients why their
| | 01:02 | graphics might look a little different on
that monitor that they bought back in 1995.
| | 01:07 | The first thing we need to do is we
need to redefine how Photoshop interprets
| | 01:11 | the color data that our images are using.
| | 01:14 | So let's go into Photoshop and I'm
going to go up to the Edit menu and go down
| | 01:18 | to the bottom and choose Color Settings.
| | 01:21 | Once I'm inside of the Color Settings
dialog box, I'm essentially going to
| | 01:25 | disable the profiles in Photoshop by
changing this top dropdown from North
| | 01:29 | American General Purpose 2 to Monitor Color.
| | 01:32 | I'm also going to uncheck this box down
here at the bottom that says Ask When Opening.
| | 01:38 | I do not want Photoshop to come up and
warn me about profile mismatches, because
| | 01:43 | I don't want my images inside of
Photoshop to have profiles at all.
| | 01:46 | You can see here the Color
Management Policies are completely turned off.
| | 01:50 | So now, once I have Monitor selected as
my preset and I've also unchecked Ask
| | 01:55 | When Opening, you'll see
now it says Custom at the top.
| | 01:58 | I can actually save this as a new preset,
call this Web Design, and hit Save. I'll
| | 02:05 | hit OK, and then from here I'll hit OK again.
| | 02:09 | Now I'm going to go up to the View menu.
| | 02:11 | Inside of the View menu,
I'm going to choose Proof Setup.
| | 02:14 | Under Proof Setup, I'm going to go
down and I'm going to choose Monitor RGB.
| | 02:20 | This tells Photoshop not to manage
the colors that we see on our images
| | 02:24 | while we're working.
| | 02:26 | Here's a little extra tip:
| | 02:28 | if you'd like to test out how your
images are going to look on both the Mac and
| | 02:31 | PC while you're actually working
inside of Photoshop, go back into the View
| | 02:35 | menu, choose Proof Setup again, and
then find something like Macintosh RGB or
| | 02:41 | Internet Standard RGB to see
the differences between the two.
| | 02:45 | Just remember to always go back and
change to Monitor RGB so that you're not
| | 02:49 | accidentally developing for only one platform.
| | 02:51 | That would not be good.
So I'll select Monitor RGB and I'm ready to go.
| | 02:56 | Finally, I need to go into
the Save for Web dialog box.
| | 02:59 | So I need to create a blank file--
just hit Command+N or Ctrl+N. And the size
| | 03:03 | doesn't matter whatsoever.
| | 03:04 | I'll just hit OK to the defaults.
And then I'm going to go up to the File menu
| | 03:09 | and choose Save for Web, or you
can hit the keyboard shortcut
| | 03:12 | Shift+Option+Command+S on the Mac,
Shift+Alt+Ctrl+S on the PC. And from inside
| | 03:17 | of this dialog box, I want to make
sure that Convert to sRGB is unchecked.
| | 03:24 | By doing this, I'm ensuring that the
graphics that I export out of Photoshop
| | 03:28 | will not have a color profile
assigned to them, and thus they have the best
| | 03:31 | chance of displaying properly
across multiple screens and browsers.
| | 03:35 | Once I have that done, I can go ahead
and just hit Done, and now anytime I go
| | 03:40 | back to File > Save for Web, you'll
notice that that Convert to sRGB is now
| | 03:45 | unchecked, which is exactly what I want.
I can hit Escape to get back out of there.
| | 03:49 | So there you have it, my three-
step workflow for effectively changing
| | 03:53 | Photoshop's color settings for web design.
| | 03:55 | If after doing this you still see those
subtle color shifts or any big changes
| | 03:59 | in your browser, chances are you
haven't calibrated your monitor properly.
| | 04:03 | Calibration software and tools
are well worth the investment.
| | 04:07 | So if you haven't already,
go and pick up those tools ASAP.
| | 04:10 | You'll be glad you did.
| | Collapse this transcript |
| Understanding web color| 00:00 | When working with color on the web you
have to understand that it is represented
| | 00:03 | in a completely different way
that you're probably not used to.
| | 00:07 | If you are a traditional designer,
chances are you're used to dealing with color
| | 00:10 | in terms of standard RGB and CMYK
values, wherein you have a numerical value
| | 00:15 | assigned to a various color channel
indicating how much of that color is
| | 00:19 | represented in the overall appearance.
| | 00:21 | On the web we have another system of
color known as hexadecimal or hex codes.
| | 00:26 | Hex color codes consist of six values,
each of which refers to an amount of color
| | 00:31 | that is present in the overall appearance.
| | 00:33 | In the example that I'm showing you
here onscreen I'm showing you the hex code
| | 00:37 | for black, which is 000000.
| | 00:41 | The number sign at the beginning of a
hex code indicates your web browser that
| | 00:45 | there is color being defined.
| | 00:46 | You don't have to worry about that in
Photoshop necessarily, but you will have
| | 00:50 | to remember that if you
are typing out HTML or CSS.
| | 00:53 | Each color in the RGB
spectrum is represented here.
| | 00:56 | We have red, green, and blue.
| | 00:59 | Directly underneath that, the
hexadecimal code indicates there is no red, no
| | 01:03 | green, and no blue, thus known of
those values are present, and so there is no
| | 01:08 | color, meaning all black.
| | 01:10 | Zero is the lowest number that you can
have in a hexadecimal code, and the letter F
| | 01:14 | is the highest value that you can have.
| | 01:17 | The full spectrum ranges anywhere from 0
to 9 and the letter A through the letter F.
| | 01:21 | Don't worry, memorizing color
codes like this is next to impossible.
| | 01:26 | You can learn some of the basic ones
which will help you get faster in your
| | 01:29 | workflow and that's want I am
going to walk you through now.
| | 01:31 | So let's go ahead and
jump in another color picker.
| | 01:34 | I'll come down here and click on the
foreground color to open up my color picker
| | 01:36 | and I'll move it into the center so
that we can see the colors that we create.
| | 01:40 | Now we have our traditional HSB
and RGB and even CMYK values in here.
| | 01:45 | I'm not going to worry about any of those.
| | 01:46 | Towards the bottom-left we have this
number sign, and then of course our
| | 01:50 | hexadecimal code, six digits.
| | 01:53 | I'm going to remove that simply by
selecting it and backspacing over it, and now
| | 01:57 | let's type in some of the values.
| | 01:59 | I want to do a red color.
| | 02:00 | Well, I need to make sure that the
red values are at their highest point.
| | 02:04 | So I'll type in "FF," and then I'll type
in "00" because I don't want any green, and
| | 02:11 | then I'll type in "00" because there is no blue.
| | 02:14 | And so therefore I have full red color,
because I have a full value of red at
| | 02:18 | the front, no green, and no blue.
| | 02:21 | If I wanted to do all green, I would
simply change the first two Fs to 0s, and
| | 02:27 | then the middle 0s I
would change to Fs, like so.
| | 02:31 | If I change those to 0 and then
change the last two to F, I get full blue.
| | 02:38 | I can also do things in the middle,
like a neutral gray for instance.
| | 02:41 | If I type in all 3s, I get a dark
gray. If I type in a higher number, like
| | 02:48 | let's say all 6s, I get a lighter gray.
| | 02:51 | And if I go all the way up to
9, I get an even lighter gray.
| | 02:57 | Same holds true for black and white.
All 0s gets me black. All Fs gets me white.
| | 03:03 | So as I said before, you're not going
to be able to memorize all of the colors
| | 03:06 | that you're going to need throughout
your workflow, but you can memorize some
| | 03:09 | of these basic ones like I've shown you here
to make it a little bit easier on yourself.
| | 03:13 | The great part about Photoshop is you
don't have to remember these codes at all
| | 03:16 | if you don't want to.
| | 03:18 | You can simply find a color, like let's
say, I wanted to do some sort of orange
| | 03:20 | color, and I can move right over it like
that, and then right here at the bottom
| | 03:26 | Photoshop gives me the hex code.
| | 03:29 | So I could then take that hex code,
copy and paste it into my CSS or HTML
| | 03:33 | document or send that off to a web
developer to say, yes, I want this color
| | 03:36 | orange for whatever it is they
might be going coding for me.
| | 03:39 | Once you're finished inside
of this box, simply hit OK.
| | 03:43 | That color that you've then mixed become your
foreground color and you can begin using that.
| | 03:48 | As I said, you won't be able to
memorize all of these codes, but at least now
| | 03:52 | you know how to read them and how to
find them if and when you do need them,
| | 03:54 | whether that'd be in Photoshop or
while writing your own HTML and CSS.
| | Collapse this transcript |
| Creating a color palette| 00:00 | As you begin your design process in Photoshop
or any application, you may find that you've
| | 00:05 | hit a wall when it comes to
developing a color palette.
| | 00:08 | In this movie, I am going to be walking you
through how to utilize one of Adobe's free
| | 00:11 | tools to help you develop color palettes based
on a variety of different criteria that you're
| | 00:16 | able to throw at it.
| | 00:17 | Now in some cases the client will give you
exactly the colors that they're looking for.
| | 00:21 | They will outline it and tell you I need this
blue, this red, and this green, and these are
| | 00:25 | the values you need to use, but in some
cases they might just give you some ideas like I
| | 00:28 | need it to look very summery,
or I needed to look winterish.
| | 00:32 | So you can utilize one of these tools like Adobe
Kuler to kind of help you along in that process.
| | 00:38 | So if you want to access Kuler, just to go
your web browser and go to kuler.adobe.com,
| | 00:44 | and once you have logged in to the Kuler site,
which you can do by using a free Adobe ID,
| | 00:48 | you are going to be brought to this home
screen here, which shows you many different types
| | 00:53 | of colors that have been
developed on the Kuler web site.
| | 00:56 | Kuler is nothing more than a community
for people who like to work with color.
| | 01:00 | So as you can see, you can mouse over these
and if you want to see them big, you can click
| | 01:03 | on them and they actually
change right up here across the top.
| | 01:06 | You can rate them, based on 1 to 5 stars and
then you filter out in those Most Popular,
| | 01:12 | Highest rated, Random. You can also go to
Mykuler to see the ones that you have developed.
| | 01:17 | Let's go back to the Newest.
| | 01:19 | Once you select a theme, you will notice that
you get information about it right here, and
| | 01:23 | you also get the ability to favorite that
theme, download it as an Adobe Swatch Exchange
| | 01:27 | file which you can then load up in the
Illustrator or Photoshop or whatever you might be working
| | 01:31 | in, and you can also make
changes to the theme as well.
| | 01:36 | If you click Make changes,
that takes you into the editor.
| | 01:40 | Once you get into the editor side, you can
actually go in and make changes to the overall
| | 01:45 | color values by clicking and
dragging these sliders around.
| | 01:49 | You can also come up here to the top and you
can find different rules that you can apply
| | 01:53 | to the colors that you are working with.
| | 01:55 | So right now I am working with this.
| | 01:57 | I can find Analogous colors.
| | 01:59 | I can find Monochromatic, Triad, Complementary,
Compound, Shades, and then I can always go
| | 02:08 | to Custom as well.
| | 02:10 | If I wanted to, I can always go back to the
home page, by going back to Themes and finding
| | 02:16 | that theme again, clicking on it,
and working with it from there.
| | 02:21 | If I'm ready to download it, I can click
here and it will download it to my computer and
| | 02:25 | then I can load it into
whatever application I want.
| | 02:28 | Let's say, for instance, that my client comes
to me and says "I sell pumpkins and oranges
| | 02:32 | and all these orange types of fruits, so
my web site needs to be extremely orange."
| | 02:37 | So I'll go right on to kuler.adobe.com
and I'll just search for orange.
| | 02:42 | Then I will go ahead and
hit the Search button.
| | 02:46 | Once I hit the Search button, it's going to
return several different values based upon
| | 02:48 | that keyword of orange and I can then search
through these until I find one that I like.
| | 02:55 | Let's say that I like this
one, Innocent Passion 2.
| | 02:57 | I will click on it and I can
see it really big across the top.
| | 03:01 | That looks good. And if I want to download it,
I can click right here and it will download
| | 03:06 | it for me: Innocent Passion 2.ase.
| | 03:08 | Now I have already downloaded this to my
exercise files folder, so if I go into Photoshop, I
| | 03:14 | can actually load that swatch by going up here,
choosing Load Swatches, choosing Innocent
| | 03:21 | Passion 2, and click Open.
| | 03:24 | Once I do that, I will scroll down in my Colors and
there are the Innocent Passion 2 colors at the very end.
| | 03:31 | So now anytime I need them, they
are loaded in my Swatches library.
| | 03:35 | I can also go back to Kuler and I can go to
the Create section and once I am inside of
| | 03:40 | the Create section, I can choose From an Image.
| | 03:44 | When I choose From an Image, it's automatically
going to give me a generic image, but I am
| | 03:47 | going to pick Upload. And in my chapter 2 folder,
there is poster.jpg and I will open it up.
| | 03:53 | So let's say my client says "I want something that
matches this poster," so I upload it. There it is.
| | 03:59 | It gives me the colors that match that and
then I can call this Vote Poster or whatever
| | 04:05 | I want to call it.
| | 04:07 | I can give it tags if I want and then I can
mark whether or not it's public or private.
| | 04:11 | In this case I will keep it Private. And then
I will Save that, and now I have this saved
| | 04:17 | in my Kuler Themes and I can download that
and I will just download it to my Desktop
| | 04:22 | this time. And now if I go into Photoshop, I can
go and Load Swatches again, go to my Desktop.
| | 04:30 | There's the Vote Poster.ase, hit Open, and
those swatches pop right there into Photoshop.
| | 04:37 | The next time you hit a wall creatively when
it comes to developing your color swatches,
| | 04:41 | tryout kuler.adobe.com and either upload some
images or type in some search words and then
| | 04:47 | download those and load
them in your Swatches library.
| | 04:51 | It's a quick and easy way of manipulating
colors and getting a nice color palette to
| | 04:55 | work from.
| | 05:00 |
| | Collapse this transcript |
| Creating custom swatches| 00:00 | There may come a time when you're asked to
create your own custom swatches here inside
| | 00:04 | of Photoshop, based upon something that a
client gave you or maybe even an image that
| | 00:08 | they've sent you or something like that.
| | 00:10 | And so in this movie I'm going to be
walking you through how to create your own custom
| | 00:13 | swatches here inside of Photoshop and then
how to export those out as a .ase file or
| | 00:18 | Adobe Swatch Exchange file that you can then
load up in another applications like Illustrator
| | 00:22 | and InDesign or simply transfer to your
clients or give to your coworkers to use as well.
| | 00:27 | First things first: I need to bring out my
Swatches panel. And you'll notice when I bring
| | 00:30 | up my Swatches panel that mine is probably
looking considerably different than yours.
| | 00:35 | That's because I've removed all the
existing swatches that were already in here.
| | 00:38 | Let me show you exactly how I did that.
| | 00:40 | I'm going to first reset my Swatches panel
and that just go up to the Swatches panel
| | 00:44 | menu and choose Reset.
| | 00:46 | That resets it to the
Photoshop defaults like you see here.
| | 00:49 | And if I want to remove colors from this,
I can just come in here and you'll notice it
| | 00:52 | has a little eyedropper
when I mouse over a color?
| | 00:55 | If I hold down the Option key on the Mac,
the Alt key on the PC, it turns into a little
| | 00:58 | scissor icon, and I can then
click to remove those colors.
| | 01:02 | And so all I have to do is just kind of click
through here and remove the colors that I don't want.
| | 01:06 | And in this case, I'm going to be developing my own
set of colors, so I don't want anything in here.
| | 01:10 | So I'm just going to click and remove each
one of these by holding down the Option or
| | 01:14 | Alt key and then clicking each time
to get rid of the colors I don't need.
| | 01:18 | Once I get all the colors
removed, I'm now ready to begin.
| | 01:20 | So I'll move Swatches panel over a little
bit so I can see all of the colors in this
| | 01:24 | image that I've got loaded up.
| | 01:26 | And I'm then going to open up my Eyedropper
tool and I can do that by hitting the letter
| | 01:30 | I on my keyboard.
| | 01:32 | Once I have that done, I simply sample this
grey color here. And I'll come over to the
| | 01:36 | Swatches panel and I'll hit the New Swatch
button and I'll call this Grey. It adds it in. Sample
| | 01:44 | this, hit the next one, and I'll call this Aqua.
Hit the next one. I'll call this Blue/Green.
| | 01:55 | Sample the next one.
| | 01:56 | I'll call this one just regular Green. And the
last one we'll call this Yellow/Green, and hit OK.
| | 02:06 | So now I have all of those sampled. And I
could actually close this document if I wanted
| | 02:10 | too. I don't need it any more.
| | 02:12 | And now in my Swatches panel, which I'll move
to the center, I can go right here and I can
| | 02:17 | choose Save Swatches for Exchange.
| | 02:20 | I'll just save these out on my Desktop, and I'll
save this as my_swatches, and save it. There we go.
| | 02:30 | Now let's reset our colors
back to normal. I'll hit OK.
| | 02:34 | It's asking me if I want to save my current
swatches. Well, I just saved them out as
| | 02:37 | an Exchange file, so I don't have to save
them now, so I'll hit Don't Save. Here we go.
| | 02:41 | Now anytime I need to load these in
to Photoshop, I can simply go here,
| | 02:45 | I can choose Load Swatches or even Replace
Swatches--in this case I'm just going to load them--
| | 02:50 | I'll find the my_swatches.ase, hit Open,
and it loads them right there at the bottom.
| | 02:56 | When I mouse over, you'll see it says Yellow/
Green, Green, Blue/Green, Aqua, and Grey.
| | 03:03 | I can also go back up here and I can say
Replace Swatches. This time my_swatches again, Open,
| | 03:10 | and it has all those, just
those, and nothing else.
| | 03:13 | I could load these up in Illustrator or
InDesign or any other program that supports the .ase
| | 03:18 | file format and then I can use these colors
throughout multiple designs and multiple projects.
| | 03:24 | So there you have it: how to create your own
custom swatches inside of Photoshop and then
| | 03:28 | migrate those out as an Adobe swatch exchange
file for use in other applications and other workflows.
| | 03:38 |
| | Collapse this transcript |
| Applying color to shapes and graphics| 00:00 | Now that we know how to effectively work
with color inside of Photoshop, it's important
| | 00:04 | to note, how do we actually start applying
color to different things that were working
| | 00:08 | on inside of Photoshop?
| | 00:10 | Well, in this in movie I'm going to be
walking you through how to apply color to various
| | 00:13 | shapes and objects that you might
encounter in your everyday workflow.
| | 00:17 | In this document, I have several different
layers over here, a couple of shapes, some
| | 00:20 | text, and then a background layer.
| | 00:22 | I'm going to show you how
to apply color to each one.
| | 00:25 | The first I'm going to do though is
turn off every layer but the background.
| | 00:27 | So I'm just going to toggle the eyeball
icon next to everything but the background.
| | 00:31 | Now there are a couple of different ways to apply
color to a background object inside of Photoshop.
| | 00:36 | You can simply select a color like--for instance, let's
say I want with this to be sort of a light green.
| | 00:40 | I just picked up from the Swatches and then
go to Edit and choose Fill and then select
| | 00:46 | Foreground Color and hit
OK and it would do that.
| | 00:50 | Let's change the color a little bit to a light
blue, and let's say I wanted to just instantly
| | 00:54 | fill this without having to go to menu.
| | 00:56 | I can choose Option+Delete or Alt+Backspace
on the keyboard and that would automatically
| | 01:01 | fill that with the light blue.
| | 01:03 | Let's change that to a yellow and then
let's press Shift+Delete or Shift+Backspace on a
| | 01:09 | PC and once I do that, it brings up the Fill
dialog box and I can actually choose Foreground
| | 01:13 | Color. Or let's say that I want it to
fill with the white background color.
| | 01:16 | I'll select that and hit OK.
| | 01:18 | So as you can see, there are lots of
different ways that you can actually apply color to
| | 01:22 | a background or a pixel-based
object inside of Photoshop.
| | 01:26 | It's not just the background layer; it's
anything having to do with the pixels that you want
| | 01:29 | to fill with a color.
| | 01:31 | So I'll go ahead and select a light green
one more time and I'll just Option+Delete
| | 01:34 | or Alt+Backspace to fill it.
| | 01:36 | And now let's turn on the buttons:
the Left Button and the Right Button.
| | 01:40 | Let's say that I want to change the Right Button to
be a red color. So I can do this one of two ways.
| | 01:46 | I can double-click the layer thumbnail,
change the color to red, and hit OK, and it changes.
| | 01:52 | Or I could switch to the Shape tools, over
here on the left, and then up at the top in
| | 01:57 | the Options bar I have the ability to
change both the fill and stroke colors.
| | 02:01 | So for instance I could change this to a
different color, and then also I could add a different
| | 02:07 | color stroke to it as well.
| | 02:09 | Same holds true with this other button.
| | 02:11 | Since it is a vector shape, I can double-
click on it to change it, make my change, hit OK,
| | 02:19 | and it applies, or with the Shape tool
selected, come up, make the change there, and also make
| | 02:25 | a change to the stroke if
I see fit. Here we go.
| | 02:29 | Now let's turn on the text.
| | 02:30 | A little bit of the
different story with the text.
| | 02:33 | I can double-click the T in the Layers panel
to select the text and then change by clicking
| | 02:39 | the color swatch icon, which is in the
Options bar, and then making a change the text that
| | 02:43 | way. Hit OK, and click Commit, make that
change. Or a little bit faster would be to pick a
| | 02:50 | color, make sure I have the text layer selected,
and then simply use Option+Delete or Alt+Backspace
| | 02:56 | on the keyboard to change the color.
| | 02:57 | If you didn't see that, let me change it to
something a little bit more radical, like blue.
| | 03:01 | Option+Delete, Alt+Backspace
automatically fills it with that color.
| | 03:06 | So if you wanted to use it that way you could.
| | 03:07 | In this case, I'll just double-click it
again, and let's change it to sort of a dark red.
| | 03:12 | And if you don't feel like clicking the
little icon here, you can also just click back on
| | 03:16 | the T and it commits to that change as well.
| | 03:20 | Now finally, the sidebar,
we'll turn that back on.
| | 03:22 | It is a vector shape, so again,
we just need to apply some color to it.
| | 03:26 | So in this case I think I want this to be
white and I'm going to put in an image on
| | 03:29 | top of it, making it look
almost like a little Polaroid.
| | 03:31 | So let's just double-click and
we'll change that to white and hit OK.
| | 03:36 | So now I have all of these things that have been
changed color-wise in just a few short and easy steps.
| | 03:42 | Depending on your workflow, you'll find one
way a little bit easier or a little bit more
| | 03:45 | convenient than the other.
| | 03:47 | But lucky for us, there is always more than
one way to skin a cat inside of Photoshop.
| | 03:50 | So take some time, learn the ways that make
sense to you, and then implement those into
| | 03:55 | your workflow.
| | 04:00 |
| | Collapse this transcript |
|
|
3. Working with LayersExploring the Layers panel| 00:00 | In this movie, we're going to be
exploring the Layers panel inside of Photoshop.
| | 00:04 | If you aren't using layers in your designs
then you're doing yourself and anyone working
| | 00:07 | with you a big disservice.
| | 00:09 | Layers are the window in your document that
give you a bird's-eye view of everything that's
| | 00:13 | happening inside your file.
| | 00:15 | By properly using the layers, you ensure that
your files are staying organized throughout
| | 00:19 | the entire design process, and that is the
essential, especially when you're working in
| | 00:23 | a team environment.
| | 00:25 | Let's take a look. I have opened a
file here called explore_layers.psd.
| | 00:30 | In this file there are several different types
of layers, and they're all scattered throughout
| | 00:33 | the Layers panel over here on the right.
| | 00:35 | I'll drag the Layers panel out so you'd
get a better idea of what I'm talking about.
| | 00:39 | Inside the Layers panel, there's a lot
going on, and at first glance, it can be someone
| | 00:43 | intimidating, so let's take a
look at that before we get started.
| | 00:46 | At the very top you'll see a filter and search
bar. This is only available in Photoshop CS6,
| | 00:52 | so if you're using Photoshop CS5 or
earlier, you won't have this available to you.
| | 00:56 | We'll cover this in its own
movie a little bit later on.
| | 00:59 | Directly underneath that, you're going
to see a Blend mode and Opacity control.
| | 01:03 | Blend modes allow you to blend layers
together based on certain criteria: Brightness, Hue,
| | 01:09 | Saturation, et cetera.
| | 01:10 | The opacity controls refer
to how opaque an image is.
| | 01:14 | So for instance, if I were to select one of
these photograph layers and turn the opacity
| | 01:18 | down, you'll see that the
photo starts to fade in and out.
| | 01:22 | Dragging it all the way up back
to 100 makes it completely opaque.
| | 01:26 | Fill opacity is a little bit different;
fill opacity will also reduce the opacity of the
| | 01:30 | pixels on that layer, but if there were any
layer styles applied to it--like a drop shadow
| | 01:34 | or stroke--the fill opacity
does not affect those attributes.
| | 01:38 | Directly to the left, we have the ability to
lock certain aspects or all of our layers.
| | 01:43 | In the Lock section, we can lock transparent
pixels, image pixels, lock layer position,
| | 01:49 | and also lock everything.
| | 01:51 | If I choose Lock everything, that means the
layer is unable to be edited whatsoever.
| | 01:56 | If I try to move this layer, Photoshop comes
up and tells me that it cannot use the Move
| | 02:00 | tool because the layer is locked.
| | 02:02 | I simply hit OK and then if I want to unlock
my layer, I click the lock icon again, and I'm
| | 02:07 | able to move and edit that layer as I see fit.
| | 02:10 | In the body of the Layers panel, you're
going to see little eyeball icons to the left.
| | 02:14 | This controls visibility;
it does not delete a layer.
| | 02:17 | So if I click the eyeball,
the layer is temporarily hidden.
| | 02:20 | It's still there. All I have to is
click the eyeball again to turn it back on.
| | 02:25 | We'll also see a layer thumbnail.
| | 02:27 | The layer thumbnail gives you short of
a bird's-eye view of the layer itself.
| | 02:31 | To the right, you'll see a layer name and
if you want to know whether or not you have
| | 02:34 | the current layer selected or not,
you just look for the highlight.
| | 02:37 | So anytime I click on a layer, see how it
highlights? That means that that is the current
| | 02:42 | layer that I have selected.
| | 02:43 | So anytime you open up a file and you don't
know which layer is selected, just look for
| | 02:47 | the highlighted portion.
| | 02:49 | At the bottom of the Layers panel, we have
several different icons, like Link layers,
| | 02:53 | which will only be available if you
have two or more layers selected.
| | 02:57 | Add a layer style: this adds special effects
to your layers, like drop shadows, glows, and
| | 03:02 | bevels. Adding a layer mask which allows you to
hide portions of your image nondestructively.
| | 03:07 | Creating a new fill or adjustment layer,
things like levels, curves, shadows and highlights,
| | 03:12 | things like that.
| | 03:13 | Create a new group; if you have several layers that are
similar to one another, you can group them together.
| | 03:18 | You can also create a new blank layer from
this icon here and you can throw layers away
| | 03:23 | by clicking the trashcan.
| | 03:25 | On the right-hand side, you'll see a scroll
bar. So if you have a lot of layers in your
| | 03:27 | document, you can scroll up and down to see
all of the layers that are available to you.
| | 03:32 | At the top right-hand corner, you'll see a small
menu icon that opens up the Layers panel menu.
| | 03:37 | From here you can do lots of the commands
that are available as icons inside the panel,
| | 03:41 | and you can also do things like change
blending options, and open up the panel options to
| | 03:46 | change the way the Layers panel behaves and appears.
Clicking away from that will close the menu.
| | 03:51 | Now I'm going to reset my workspace by
coming up to the Jump menu and choosing Reset.
| | 03:56 | That snaps my Layers panel back
to where it's supposed to go.
| | 03:58 | And so there you have it: a brief tour
of the Layers panel inside of Photoshop.
| | 04:02 | Hopefully by now you have a better
understanding of what all the little icons and buttons are
| | 04:06 | and why you would choose to
use them in your project.
| | 04:11 |
| | Collapse this transcript |
| Renaming and grouping layers| 00:00 | If you're going to be utilizing a lot of layers
inside of Photoshop, it's a great idea to start
| | 00:04 | practicing grouping and renaming
those layers to keep your file organized,
| | 00:09 | so if you handed this off to a developer or
if you simply open it up six months later,
| | 00:13 | anybody could open it up and
understand exactly what's going on.
| | 00:16 | So I've got this file opened
here called explorer layers.psd.
| | 00:20 | And as you can see, inside of
the Layers panel, it's a mess.
| | 00:23 | I need to get this thing organized so that I
can hand this off to my application developer
| | 00:27 | to further it along.
| | 00:29 | So let me bring out the Layers panel so we
can actually see what's going on, and let's
| | 00:32 | take a look at how we can
remedy this unorganized thing.
| | 00:36 | So the first thing I need to do is determine
exactly which layers need to be renamed and
| | 00:40 | which ones need to be grouped together.
| | 00:41 | So I'm just going to go through, starting at
the bottom, and find out what everything is
| | 00:46 | and what I need to do with it.
| | 00:47 | In order to do that, I'm going
to use a very simple method.
| | 00:50 | I'm just going to toggle the visibility
of the layer and see what and where it is.
| | 00:53 | If I hit this first one,
it's actually the footer down here at the bottom.
| | 00:58 | So in order to rename this layer, I'll just double-
click and then I'll type in "Footer" and hit Enter.
| | 01:04 | For this one, toggle the visibility.
That's a little stripe across the top.
| | 01:08 | It's usually where the carrier information
goes for a mobile phone. So I'm just going
| | 01:12 | to double-click again.
| | 01:13 | I'll select that text and
I'll type in "Carrier Info."
| | 01:19 | We'll find out this.
| | 01:20 | Okay, that's the blue strip across the top,
so we'll double-click that. And I'm just going
| | 01:24 | to call this the Header.
| | 01:26 | Right here, this is the bird icon.
| | 01:28 | I can tell that simply by looking at the
layer thumbnail. So I'll double-click there and
| | 01:32 | I'll type "Bird Icon."
| | 01:35 | This is a rounded rectangle.
| | 01:37 | I can tell. That this should
be this guy right up here.
| | 01:39 | So I'm going to hit that
and call it Compose Button.
| | 01:43 | Now I get in o some tricky areas because
things are just named arbitrarily like Rectangle
| | 01:47 | 3 and layer 2, Copy 3, and a bunch of text.
| | 01:50 | So I need to figure out exactly what these do.
| | 01:52 | So again, I'm going to visibility test.
| | 01:54 | So let's do this. Okay.
| | 01:56 | So that's the top rectangle.
| | 01:58 | So I'll just double-click, and I'll select
that text and I'll type in "Top Rectangle."
| | 02:06 | This is the text on the top one,
so we'll type in "Top Text."
| | 02:12 | This one here, it's the
Top Photo, and there we go.
| | 02:17 | I'll do the same thing for these.
| | 02:19 | Let's do the visibility test.
So that's 2nd Rectangle, the 2nd Text.
| | 02:29 | Select the next layer up.
Toggle the visibility.
| | 02:32 | That's the 2nd Photo. And again, I'm just double-
clicking the text, changing the name, and hitting Enter
| | 02:39 | to commit to the change.
| | 02:40 | I'll keep scrolling up.
| | 02:41 | Again, toggle the
visibility next to the layer,
| | 02:44 | in this Rectangle 3 copy 2. So I'll double-
click that and I'll change this to 3rd Rectangle.
| | 02:53 | Go up, toggle the text.
| | 02:55 | That is the 3rd Text.
| | 02:58 | This one should be the 3rd Photo. Let's see.
There we go, 3rd Photo.
| | 03:03 | Next one, 4th Rectangle, 4th Text, and that
should be the last photo, 4th Photo. There we go.
| | 03:17 | Okay, now I've got all my layers named,
but they're still not very organized.
| | 03:22 | So what I'm going to do is
start regrouping all of the layers.
| | 03:26 | So in this case, I know the Header, the Bird
Icon, and the Compose Button are all at the
| | 03:30 | very top. So is the Carrier Info.
| | 03:33 | So what I'm going to do is put these
in the order they appear on the screen.
| | 03:35 | So I'm going to put the Carrier
Info up above the Compose Button.
| | 03:41 | I'll put the Bird Icon above the Compose
Button as well. And then the Header goes behind all
| | 03:47 | of it, because the Header is the
blue part that goes behind everything.
| | 03:50 | I'm then going to select Header, hold
down Shift, and click the Compose Button, hold
| | 03:54 | down Shift, click the Bird, hold
down Shift, and click Carrier Info.
| | 03:58 | Then I'm simply going to, on my keyboard, press
Command+G or Ctrl+G. That groups those layers
| | 04:04 | together, and now I'll double-click where
it says Group 1 and I can select that text
| | 04:10 | and change this to Header.
| | 04:11 | So that's my Header group.
| | 04:13 | I am now going to go through and select all
of these rows of content--this one, this one,
| | 04:19 | this one, et cetera--and group those together.
| | 04:21 | Luckily I've named them in such a way where I can
easily grab the ones that go with each other.
| | 04:25 | For instance, this one says Top, Top, and Top.
| | 04:28 | So I'll just select all three of those.
| | 04:30 | I did that by holding down Shift and clicking,
and then Command+G or Ctrl+G, and I'll type
| | 04:36 | this in, Top Row.
| | 04:39 | Select the 2nd Rectangle, 2nd Text, and 2nd
Photo. Group those with Command+G or Ctrl+G.
| | 04:44 | Double-click and I'll type out 2nd Row.
| | 04:49 | Select all the 3rd, group them,
and this one will be 3rd Row.
| | 04:53 | And then finally, the 4th,
group those, and 4th Row, okay.
| | 04:59 | Now the Footer, I'm probably going to put
some more stuff down here with the Footer,
| | 05:03 | so I'm going to go ahead and throw it in
its own group. And I just selected it and hit
| | 05:06 | Command+G or Ctrl+G to do that,
and I'll call this the Footer.
| | 05:11 | Now the Header, I'll move that group to
the top just by clicking and dragging it up.
| | 05:15 | You've got to be careful to get it in
between one of the other rows, because if you drop
| | 05:19 | it right on top of the 4th Row,
it will actually go inside that other group.
| | 05:23 | So you see that little bounding box that's
around the outside of it when I'm on top of
| | 05:26 | the 4th Row right there?
| | 05:28 | That slight little bounding box
tells me I'm going to drop it in.
| | 05:30 | If I drag it up a little bit further,
the bounding box goes away and a little white
| | 05:34 | line appears at the top.
| | 05:36 | That's what I'm looking for.
| | 05:37 | I'm going to go ahead and let go
and the Header moves to the top.
| | 05:41 | I'll move the Top Row
right beneath the Header.
| | 05:43 | Notice I'm looking for that
little line in between again. Drop it.
| | 05:47 | 2nd Row, drop it.
| | 05:49 | 3rd Row, drop it.
| | 05:51 | So now everything is in the right order.
| | 05:52 | I've got my Header up top, Top Row, 2nd Row,
3rd Row, 4th Row, followed by the Footer, and
| | 05:57 | then of course we've the
Background in the back.
| | 05:59 | So let me toggle the visibility of the
individual groups and show you what I've done now.
| | 06:03 | So here is the Header. If I turn it off,
everything at the very top disappears.
| | 06:07 | Here's my Top Row, the 2nd Row, 3rd,
4th, and then my Footer at the bottom.
| | 06:15 | So now if I open all these up, you can see,
they've all been grouped together, they've
| | 06:21 | all got all the layers that were in there
originally, and all the layers have also been
| | 06:25 | renamed, and they're a lot easier to
find it and a lot easier to deal with.
| | 06:30 | So now instead of having to deal with all
of these layers all at once, anytime I want
| | 06:34 | to work on a specific area of this design,
I just find the group where that object is
| | 06:38 | located, temporarily open
that group, and work on it there.
| | 06:42 | So for instance, let's say I want to
change the 4th Photo down here at the bottom.
| | 06:46 | I just open up 4th row, find the 4th Photo
and I can make a change to just that photo.
| | 06:52 | I don't have to open up all these other ones,
and I don't have to go searching for it, because
| | 06:55 | I've named it something easy to remember.
| | 06:58 | It's always good practice to go through and name and
group your layers as you work inside of Photoshop.
| | 07:04 | But I realize a lot of times you're in a hurry and
you just simply don't have the time to do that.
| | 07:09 | But if you go back out after the fact and
clean them up nice and neat like this, the
| | 07:12 | developers you hand off your projects to, or
even your coworkers that you share them with,
| | 07:16 | will appreciate you so much more.
| | 07:21 |
| | Collapse this transcript |
| Searching and filtering layers| 00:00 | One of the new features in Photoshop CS6 that
users have been asking for for several years
| | 00:05 | is the ability to search for and filter out
different layers in the Layers panel inside of Photoshop.
| | 00:10 | If I drag out the Layers panel here,
you'll see that I've got several different layers
| | 00:15 | stored in groups inside of my document.
| | 00:17 | What I want to be able to do is instantly
search for or filter out different layer types
| | 00:21 | to easily find the
content that I need to target.
| | 00:24 | In previous versions of Photoshop, I would
have to go, open each individual group,
| | 00:28 | and find those layers individually by
searching through the Layers panel like this.
| | 00:33 | Now, in Photoshop CS6, I have the ability to either
search for or simply filter out different layer types.
| | 00:40 | So for instance, if I know that I'm looking
for the bird icon right here, I can go right
| | 00:44 | here to the top and choose Name and in the
search field type in the "Bird," and it automatically
| | 00:51 | finds the Bird icon layer for me.
| | 00:53 | I can then select it, and I can move or
manipulate the Bird layer any way I want to.
| | 00:59 | If I want to clear that, I can simply turn
the filtering off by clicking this little
| | 01:03 | toggle switch right here.
| | 01:05 | When I do that, all of my layers come back.
| | 01:08 | If I turn that back on,
the filter is still applied.
| | 01:11 | I have to come in here and remove the name
in order to return back to the full list.
| | 01:17 | I can also filter out by type of layer.
| | 01:20 | So when I select Kind, I can say
show me only the Image layers.
| | 01:24 | If I turn that off, it goes back to normal.
| | 01:27 | I could say show me only the Text
layers, and all the text layers appear.
| | 01:31 | Turning that off turns
everything back to normal.
| | 01:34 | You have filters for shape layers, Smart
Objects, text, and adjustment layers as well.
| | 01:40 | If we continue to look here inside of the
Filter dropdown list, we can also search by
| | 01:43 | effect, by mode, by attribute, or by color.
| | 01:48 | By selecting these, you'll be able to select
by effect, such as Bevel & Emboss, Stroke,
| | 01:54 | Inner and Outer Glow, Satin, Overlay, all
of the basic layer styles that you have the
| | 01:58 | ability to apply.
| | 01:59 | Mode, this refers to the blending modes.
| | 02:02 | So any layer that adopts any one of these
blending modes will show up if you filter it.
| | 02:07 | Attribute, you can say Visible, Locked,
Empty, Linked, Clipped, Layer Mask.
| | 02:13 | There's a lot of different ways
to filter out layers in Photoshop.
| | 02:17 | It's not just a search and a couple of buttons.
The possibilities literally are endless.
| | 02:22 | Finally, there's Color, so I
can select based on layer color.
| | 02:26 | This is a great way to keep things
organized inside of your document.
| | 02:30 | So if I were to add layer colors to a few
of these--let's go ahead and do that now--
| | 02:34 | like Carrier Info for instance--I'll
right-click on it, give it a red color--
| | 02:39 | it goes away because I
have None set as the search.
| | 02:43 | If I choose Red, Carrier Info shows up.
| | 02:45 | If I go back to None, all the layers
come back in except for Carrier Info.
| | 02:50 | Turning off the toggle
switch brings Carrier Info back.
| | 02:53 | If I right-click on it and remove the color and
then turn the filter back on, Carrier Info stays.
| | 03:00 | So as you can see, utilizing the new search and
filter capabilities here inside of Photoshop
| | 03:05 | CS6 is a great way to keep yourself
organized and find the layers that you need quickly
| | 03:10 | and easily.
| | 03:15 |
| | Collapse this transcript |
| Using layer comps effectively| 00:00 | One of my favorite features of
Photoshop has got to be layer comps.
| | 00:04 | Layer comps are really
underused in the design world though.
| | 00:07 | I think it's because a lot of people don't
really understand what layer comps are and
| | 00:10 | how you can utilize them to enhance the designs and
the presentations that you give to your clients.
| | 00:16 | In this movie, I will be exploring how to use
layer comps effectively to showcase multiple
| | 00:20 | versions of a design that you might
be working on inside of Photoshop.
| | 00:24 | First of all, let's break down
exactly what a layer comp is.
| | 00:26 | A layer comp is simply a group or
collection of layers that are displayed in different
| | 00:32 | ways in Photoshop.
| | 00:33 | Photoshop basically takes a snapshot of your
document at any given time using the layer
| | 00:37 | Comps panel to showcase different layouts,
arrangements, and even color choices.
| | 00:42 | Let's take a look at how that works.
| | 00:43 | I am going to go to the Window menu
and I am going to choose Layer Comps.
| | 00:47 | Once Layer Comps opens, I will drag
it into the window so you can see it.
| | 00:50 | By default, the only thing I have inside the
Layer Comps panel is the Last Document State.
| | 00:55 | That's currently what I
am looking at right now.
| | 00:57 | If I wanted to create a new layer comp from
the design that I'm looking at here, I just
| | 01:02 | come down and click New Layer Comp.
| | 01:05 | When I do that, I can name this Blue
Background, and I can also choose to apply the layer's
| | 01:11 | Visibility, Position, and Appearance.
| | 01:13 | In this case, I will hit OK.
| | 01:16 | So there's my first layer comp.
| | 01:17 | Now, let's go over to the Layers panel, and
you see inside the Backgrounds folder of this
| | 01:21 | layer_comps.psd file
| | 01:23 | I have three different
choices: Red, Green, and Blue.
| | 01:26 | If I turn off the blue background, and turn
on the green background, I can then create a
| | 01:31 | new layer comp called Green Background--again,
remembering the visibility, position, and
| | 01:37 | appearance. Hit OK.
| | 01:39 | Let's turn off the green and turn on the
red, and we'll create another new layer comp
| | 01:43 | there, and we'll call
this Red Background. Hit OK.
| | 01:48 | So now, anytime I want to show these to a
client, I can simply come in here and click
| | 01:51 | the eyeball next to blue background, and it
turns blue; green background, turns green;
| | 01:57 | red background, turns red.
| | 01:59 | I can also use these little
navigation icons right here.
| | 02:02 | So I can cycle through all of
my layer comps just by clicking.
| | 02:05 | If I make a change to a layer comp, I can always
update the layer comp by clicking this icon right here.
| | 02:12 | So for instance, if I wanted to, while I am
working on the blue background, let's say
| | 02:16 | for instance that I wanted to move
something around, perhaps the buttons.
| | 02:20 | Maybe those need to be a little
bit farther down on the page.
| | 02:23 | So I will select the Buttons group and I
will just nudge those down using the arrow
| | 02:26 | keys on my keyboard.
| | 02:28 | Then I'll come over and
I'll click the Update button.
| | 02:30 | When I click Update, the icon switches back
to Blue and now watch what happens when I
| | 02:34 | switch: here's Green and Red.
| | 02:38 | Watch the buttons when I switch back to Blue.
| | 02:41 | They shift down the page,
just as they should have.
| | 02:43 | So you can utilize layer comps to do all
sorts of things, and change the configuration and
| | 02:47 | layout of your design without
having to create separate files.
| | 02:51 | It's Photoshop's answer to multiple pages
or artboards like you would have inside of
| | 02:54 | Fireworks or Illustrator.
| | 02:56 | It's not much, but it's all we have, and it's
a great way to help keep your files organized
| | 03:00 | and present a
multifaceted design to your clients.
| | 03:05 |
| | Collapse this transcript |
| Using automatic layer selection| 00:00 | One of the major pain points for anyone who's
new to Photoshop, especially for people who
| | 00:05 | are used to working in programs like
Illustrator or Fireworks for instance, is the fact that
| | 00:09 | they can't just come out here inside of their
document and click on something and move it.
| | 00:14 | For instance, if I wanted to move this
photograph right here, if I just click on it and try
| | 00:18 | to move it, the only that moves is the layer I
have selected, which is the photo on the bottom.
| | 00:23 | You can see it's moving and not the one on top.
| | 00:25 | So it's kind of tedious for them, because they
have to come over and they have to find the
| | 00:29 | layer they're looking for in the Layers panel, then
come back over here, and click and drag. Well, oops!
| | 00:34 | That's not the right one, so then I have to
go back and find another layer and oh, that--
| | 00:38 | okay that was the one I was looking for.
| | 00:40 | Then I have to remember, okay, that's
layer 2 copy 2, and that's just a real pain.
| | 00:45 | Luckily there is a feature inside of
Photoshop that you can enable to get around this.
| | 00:50 | So with the Move tool selected, this little
arrow right here, which you can access by
| | 00:53 | hitting the letter V on your keyboard,
| | 00:56 | you can go up to the Options bar
and you can select Auto-Select.
| | 01:00 | Once you select that, you are then able to
come out and simply click on an object and
| | 01:04 | it will automatically become selected.
| | 01:06 | So for instance, the bird logo here, if
I click, it automatically selects it.
| | 01:10 | You can see now I can move it around.
| | 01:13 | This one right here, if I click on the
Compose button, it automatically grabs that. Same
| | 01:17 | thing for the photos. And if you look over to
my Layers panel, each time I click on something
| | 01:20 | different, it switches
where I'm currently selecting.
| | 01:26 | Same thing for text. It works on
text as well, and shapes as well.
| | 01:31 | Now if I happen to have a few objects grouped
together--for instance let's go down and grab
| | 01:36 | this rounded rectangle and the
bird logo and the blue header bar.
| | 01:41 | I'll go ahead and group these together,
Command+G or Ctrl+G on my keyboard and then I'll select
| | 01:45 | one of these other layers, just
to get my selection off of those.
| | 01:48 | If I have Auto-Select turned on, then when
I come out here and I click on any one of
| | 01:52 | these, it automatically
selects the entire group.
| | 01:56 | If I twirl open the group, I can
then select the individual objects.
| | 02:00 | But if I happen to come out and try to
move them, it selects the entire group.
| | 02:04 | So you have to be careful when
working with groups and using Auto-Select.
| | 02:08 | Auto-Select works fine when
you're just using individual layers.
| | 02:11 | However, when you're trying to select objects
that are inside of a group, if you have Auto-Select
| | 02:15 | turned on, it's going to
automatically select the group.
| | 02:18 | If you want to turn that off, you can come
back up to the Options bar, click here, and
| | 02:23 | choose Layer as opposed to Group.
| | 02:26 | Now when you come out you can then click on the layer
and it will select the layer each and every time.
| | 02:31 | So, if you wanted to do the group behavior,
you come up and change that to Group; if you
| | 02:35 | wanted to select individual
layers, then you select layer.
| | 02:39 | Either way, this is a great way to gain instant
control over individual objects in your document
| | 02:44 | without having to go over and search
tediously inside of the Layers panel.
| | 02:48 | So it's one of those little-known features
of Photoshop, but one that comes in so handy.
| | 02:53 |
| | Collapse this transcript |
|
|
4. Working with Shapes and ObjectsUsing vector shapes vs. pixel shapes| 00:00 | When you're creating shapes and objects inside
of Photoshop you have two basic choices when
| | 00:04 | it comes to creating your artwork: to either create
vector-based artwork or work in terms of pixels.
| | 00:11 | The first of which, vector shapes, enable you
to create what I call flexible artwork, which
| | 00:16 | is able to be scaled and manipulated in
ways that pixel art just can't handle.
| | 00:20 | In this movie, I'll be walking you through
the differences between raster and vector
| | 00:24 | shapes and objects inside of Photoshop.
| | 00:26 | I've got this file open and on the
left-hand side I have a vector shape.
| | 00:30 | The fact that it is a vector shape means
that I can then scale and manipulate it without
| | 00:34 | losing the quality of the overall shape.
| | 00:36 | So for instance, if I wanted to free
transform this shape by using Command+T or Ctrl+T on
| | 00:41 | my keyboard, I could shrink it way down and
hit Enter to commit and then also Command+T
| | 00:47 | or Ctrl+T and blow it right back up even larger
than it was before, and the edges still remain
| | 00:52 | crisp and clean no matter what.
| | 00:55 | Now, watch what happens when I do
the same to the pixel-based shape.
| | 00:58 | I'll temporarily hide the vector shape, and
select the Pixel shape here in my layers.
| | 01:03 | I'll use Command+T or Ctrl+T to bring up
Free Transform and then I'll shrink this down.
| | 01:08 | Hit Return to commit.
| | 01:10 | You can see now that the edges look
fairly clean at this smaller size.
| | 01:14 | That's because objects that are
downsized maintain their quality.
| | 01:17 | However, watch what happens when I blow
it up. Command+T or Ctrl+T and blow it up.
| | 01:23 | Hit Enter and I'll zoom in a little bit so
you can see. The edges are becoming just a
| | 01:27 | little pixelated and not exactly as
clean as I would like them to be.
| | 01:31 | It's probably not as evident here on a
square as it might be with a circle.
| | 01:34 | So let me undo and let's take a
look at the Elliptical Marquee tool.
| | 01:40 | I'll go ahead now and I'll select my
Background layer, grab the Elliptical Marquee tool, and
| | 01:46 | I'll just hold down Shift+Click and
drag out a circle, something like this.
| | 01:50 | It doesn't matter how big.
| | 01:52 | Then I'll create a new layer and I'll fill this
layer with the same color that I have here.
| | 01:58 | So I'll sample this color using my Eyedropper tool,
and then I'll fill the circle with Option+Delete
| | 02:05 | or Alt+Backspace on the keyboard.
| | 02:07 | Switch to my Move tool, hit
Command+D or Ctrl+D to deselect.
| | 02:11 | Now you can already see, since I'm zoomed in,
that I'm getting some pixelated edges around
| | 02:16 | the outside, whereas if I had drawn this with a
vector tool those would be nice and clean.
| | 02:21 | Let's zoom out to 100% and
I'll try to scale this up.
| | 02:27 | As I drag it up and hit Enter, notice how
fuzzy the edges are. Not good at all.
| | 02:33 | But let's say that I switch
to the Vector Ellipse tool.
| | 02:37 | I'll draw out the same circle, and then
I'll use Command+T or Ctrl+T and scale it up.
| | 02:43 | Hit Enter to commit.
| | 02:46 | When I zoom in on both of these you're going
to notice that the edges of the vector shape
| | 02:51 | are much more clean than
that of the pixel-based shape.
| | 02:54 | So now let me go back to File > Revert.
| | 02:57 | That'll revert me back to my original document.
And so now you can see the differences between
| | 03:01 | a vector shape and a pixel
shape inside of Photoshop.
| | 03:05 | Creating vector shapes really enables you
to create flexible artwork which is able to
| | 03:09 | be scaled across multiple screens and
devices and multiple web browsers as well.
| | 03:14 | So if you have the opportunity,
always use vector artwork when possible.
| | 03:18 | Occasionally, you will have to use pixel-
based artwork, and that's okay, especially when
| | 03:22 | dealing with photographs.
| | 03:23 | But just be careful when
you're scaling and resizing.
| | 03:26 | Remember, going down always maintains
the quality; going up usually destroys it.
| | 03:31 |
| | Collapse this transcript |
| Creating vector shapes| 00:00 | Now that we understand the importance of
creating flexible graphics using vector shapes inside
| | 00:04 | of Photoshop, let's explore the vector shape tools
and how we can create graphics using them right now.
| | 00:09 | I am going to create a new document.
| | 00:11 | I will just do Command+N or Ctrl+N to do that.
And I'll just set up something like 900 pixels
| | 00:15 | wide by let's say 500 pixel tall.
| | 00:18 | It doesn't really matter what the size is, as
long as it's a decent-sized canvas to work with.
| | 00:22 | And once I get that done, I am going to go
down here to the bottom-left corner of the
| | 00:25 | toolbar and click and hold right here where
the shape tools are, and let's take a look
| | 00:28 | at the various shape tools
that we have at our disposal.
| | 00:32 | We have a Rectangle tool, which allows
us to create both rectangles and squares.
| | 00:35 | We've have a Rounded Rectangle tool, an Ellipse tool, a
Polygon tool, a Line tool, and a Custom Shape tool.
| | 00:42 | Let's first start off with the Rectangle tool.
| | 00:44 | It's very easy to draw rectangles inside of
Photoshop: just click and drag and release your mouse.
| | 00:49 | If you want to draw a perfect square,
you hold down the Shift key, click, drag, release
| | 00:54 | your mouse, then release the Shift key.
| | 00:56 | Now if I want to draw an
ellipse, same basic principle.
| | 00:59 | Go back and I'll select the Ellipse tool.
And to draw out a regular ellipse, just click and drag.
| | 01:04 | If you want to draw out a perfect circle,
hold down Shift, click, drag, and release
| | 01:08 | the mouse, release the
Shift key. Let's go back.
| | 01:12 | Let's draw a polygon.
| | 01:14 | Now the interesting thing about the Polygon
tool is you can control how many sides it has.
| | 01:17 | By default, it should have
something like five, like this.
| | 01:19 | So you can see, as I click and
drag, it draws out five sides.
| | 01:23 | Let's undo that, and let's
come up here to the Options bar.
| | 01:26 | Right here in the Options bar
we have the amount of sides.
| | 01:29 | So let's say I want to draw an octagon.
| | 01:31 | I'll do eight sides, hit Enter,
and then I'll just click and drag.
| | 01:35 | If I hold down Shift, it draws out a perfect shape,
and I can release my mouse and release the Shift key.
| | 01:42 | Switch to the Move tool, and I can just move that
over a little bit. And let's go back into the
| | 01:46 | shapes and let's check out
the Rounded Rectangle tool.
| | 01:49 | Much like the Polygon tool, you will be able
to choose the Radius number up here, much like
| | 01:54 | you could the sides on the polygon.
| | 01:57 | In this case you might not know what
this number needs to be, and that's okay.
| | 02:00 | Just take a stab at it.
| | 02:01 | In this case I'll shrink this down to about
6 pixels, hit Enter, and I will just draw
| | 02:06 | out a rounded rectangle shape.
| | 02:09 | Now, one of the downfalls of Photoshop is the
fact that I can't alter that corner radius
| | 02:13 | after I've drawn the shape.
| | 02:14 | In other applications like Illustrator and
Fireworks, you do have the ability to do that,
| | 02:18 | depending on how you drew to shape.
| | 02:19 | For instance, you have Smart Shapes inside of
Fireworks and you have the ability to apply
| | 02:23 | rounded corners as a live
effect in Illustrator.
| | 02:26 | So if you're looking to develop rounded
rectangles, my suggestion would be to actually do those
| | 02:30 | in another application which
supports this more flexible workflow.
| | 02:33 | Now let's go back over here and
let's go down to the Custom Shapes tool.
| | 02:39 | The Custom Shapes tool is pretty interesting
because you have access to a variety of different
| | 02:42 | shapes in Photoshop by default, but you also
have the ability to find shapes online and
| | 02:47 | then load them into Photoshop if you choose to.
| | 02:50 | So let's go up here to the Options bar and
find the Shape menu and click on that to drop
| | 02:54 | it down, and you'll see several options
that are available to you inside of the Shapes
| | 02:58 | panel automatically.
| | 02:59 | You can also load other shape libraries by
clicking this little Settings icon right here
| | 03:04 | and you can choose Load Shapes,
| | 03:06 | if you have something that you have
downloaded from the Internet, or you could simply load
| | 03:09 | up the ones that ship
with Photoshop by default.
| | 03:12 | There's actually a Web
section towards the bottom.
| | 03:14 | If I click on that, you will get the
option to either OK to add or append it. Here.
| | 03:18 | I am just going to click OK so it replaces
the current library with the web-based shapes.
| | 03:23 | Once I do that, you're going to see a
lot of different UI type of shapes.
| | 03:27 | So like plus and minus icons, forward and
backward, up and down, this little save icon,
| | 03:31 | mail, shopping carts, et cetera.
| | 03:33 | These aren't really complex or even that
good to look at, but they are a great starting
| | 03:37 | point, and if you're just looking to learn
how to draw some shapes, you could just pick
| | 03:40 | one and bring it out, and there you go.
| | 03:45 | Now if you're not big on clicking and drawing--
I know a lot of people don't like doing that--
| | 03:48 | you can also just simply click with the Shape
tool selected and you can draw out a shape.
| | 03:54 | You can also, when you're drawing shapes that
need to be in proportion like this shopping
| | 03:57 | cart, choose to Preserve Proportions.
| | 04:00 | So in this is case I will just set it
I need it to be, let's say 100 pixels wide.
| | 04:05 | It automatically adjusts the Height and then I
hit OK and it draws out my shape. Pretty easy!
| | 04:11 | So if you're looking for some places to
find vector shapes online, my suggestion would
| | 04:16 | be to do a Google search for "Photoshop
Vector Shapes" and see what you come up with.
| | 04:20 | You can also check out the Adobe Exchange.
You can search Adobe's web site for that for
| | 04:24 | the exact address.
| | 04:25 | At the Adobe Exchange people post different
things, some of them paid, some of them free,
| | 04:29 | which you can download.
| | 04:30 | You can also check out a great
web site at premiumpixels.com.
| | 04:33 | That's www.premiumpixels.com, which is run
by a guy named Orman Clark, who develops all
| | 04:40 | types of free Photoshop stuff that you can
download: shapes, colors, icon sets, all kinds
| | 04:45 | of things that you can open up and load and use
in your Photoshop designs completely for free.
| | 04:51 | So, now that we've seen how to create vector
shapes inside Photoshop, let's take that one
| | 04:57 | step further and see how we can start to
manipulate these by working with their fills and strokes.
| | 05:02 |
| | Collapse this transcript |
| Working with fills and strokes| 00:00 | New to Photoshop CS6 is the ability to control
both the fill and the stroke values independently
| | 00:06 | on your vector shapes that you've created.
| | 00:08 | In this movie, I will be walking you through
how to manipulate the fill and the stroke
| | 00:12 | utilizing the new vector shape
tools inside of Photoshop CS6.
| | 00:15 | If you're utilizing an older version of
Photoshop, like CS5 or earlier, you still have control
| | 00:20 | over the fill color of your shapes independently, but
you'll have to add strokes by utilizing layer styles.
| | 00:27 | So I have a shape here in the middle of my
document which is this light bulb shape and
| | 00:31 | I also have several shapes surrounding it, which
actually are comprised of one single shape layer.
| | 00:35 | If I turn them on and off, you can
see they are all connected.
| | 00:38 | So let's worry about the shape in the middle first and
then we will worry about those shapes on the outside.
| | 00:42 | So when I have this shape selected, I want
to be able to change both the fill and stroke
| | 00:46 | colors of the shape.
| | 00:47 | In order to do that, I have that one of the
shape tools selected in the toolbar and once
| | 00:52 | I have that selected, you'll notice that I get the
option in the options bar for Fill and Stroke.
| | 00:57 | Again, this is completely new in Photoshop CS6.
| | 01:01 | If I want to change the fill color--that's the
color that is being represented right here--
| | 01:05 | I can drop this down and I can choose from any
one of the color swatches that are available
| | 01:08 | to me in Photoshop or I can simply mix
my own by bringing up the color picker.
| | 01:13 | I get a list of recently used colors, which
are going to be propagated by the various
| | 01:17 | colors that I've been using
throughout my design workflow.
| | 01:20 | If I wanted to, I could also go here to this little
icon and I could choose New Swatch, copy the fill.
| | 01:26 | I could change the thumbnail listing, go into
the presets, load various swatches, even go
| | 01:31 | out and save my swatches for Exchange.
| | 01:34 | This is basically the Swatches panel
in a pop-up at the top of your screen.
| | 01:37 | I will click away from that to close it,
and now let's go ahead and select a color.
| | 01:42 | So I will find a color
somewhere in this list, maybe this.
| | 01:46 | There we go. And once I have selected that, I simply
click the Fill icon again and it closes back up.
| | 01:52 | For the Stroke, right now it's currently set
to 3 points, but the Stroke Color is set to
| | 01:57 | None, so it's not actually showing up.
| | 01:59 | If I want to change that, I drop it down.
Let's pick a darker shade of that same color.
| | 02:03 | Now you see it automatically
applies it for me. It's 3 points.
| | 02:07 | I can then come here and I can adjust the
size of this. So if I want to blow it up,
| | 02:12 | I can increase it by dragging that to the
right, decrease it by dragging it to the left.
| | 02:19 | I can also just type in a value.
| | 02:20 | So let's say I wanted it to be 5
points. Type in 5 and hit Enter.
| | 02:25 | I can also come here to the right and change
whether or not it is a solid stroke or a dash
| | 02:30 | or dotted stroke as well.
| | 02:31 | If I do dashed, it dashes it
like so. I'll attempt to dot it as well.
| | 02:38 | You can change the alignment of the stroke
to be either on the outside or the inside
| | 02:46 | or aligned on the center.
| | 02:49 | Totally up to you.
| | 02:49 | In this case I think I will go with the outside,
and I will switch that back to a solid stroke.
| | 02:57 | If I want to change the color of the stroke,
remember, I just go back to here, pick a different
| | 03:02 | color, and then click back
again. And there you have it.
| | 03:07 | Now let's focus on this shape up here.
| | 03:09 | Since these shapes are all connected in one
single vector layer, I control the fill and
| | 03:13 | the stroke for all of them simultaneously.
| | 03:16 | So let's change the fill color. Go back up.
| | 03:18 | In this case I will change this to maybe a
reddish-orange color and then for the stroke,
| | 03:26 | let's change that to kind of a darker
purple, maybe almost the same as that.
| | 03:32 | We will change the stroke options here, to have
those on the outside; that creates some interesting
| | 03:39 | looks, down through there. And we can even
dash them if we wanted to. There we go. And
| | 03:49 | I will collapse that back up. And if I want to
change how big it is, I can shrink that down.
| | 03:54 | I want it to kind of be a fine
point stroke. There we go!
| | 04:00 | So, since we have this ability to control
these independently inside of Photoshop CS6,
| | 04:05 | it really lends itself to some
creative things that we can do.
| | 04:08 | It's also great because this is a vector object and
the edits we are making to this are nondestructive.
| | 04:14 | We could scale these up or down, change the
colors as many times as we want, change the
| | 04:19 | stroke pattern, the stroke alignment.
Any of that stuff that we want to change at any
| | 04:22 | given time we can, and we don't affect the
overall integrity of the file or the clarity
| | 04:27 | of the images that we are working on.
| | 04:29 | That's the benefit of working with vectors
and one of the great advantages of utilizing
| | 04:33 | these new fill and stroke
tools inside of Photoshop CS6.
| | 04:38 |
| | Collapse this transcript |
| Working with Smart Objects| 00:00 | When people ask me what my favorite feature
of Photoshop is, I always have two answers,
| | 00:06 | the first of which is layers, because layers
are the most useful thing that's ever been
| | 00:10 | added to Photoshop,
| | 00:11 | and the second one is always Smart Objects.
| | 00:15 | Smart Objects are a way of encapsulating the
photo or object that you're working on inside
| | 00:20 | of a protective shell so that you can then
work on them in a nondestructive way. Running
| | 00:26 | filters, manipulating, scaling, whatever you
want to do to it, you can pretty much do by
| | 00:30 | utilizing Smart Objects.
| | 00:32 | In this movie, I am going to be exploring how
to utilize Smart Objects inside of Photoshop
| | 00:36 | to create more flexible graphics and
work nondestructively at all times.
| | 00:41 | So I am working on a file here that's kind
of a mockup for an application splash screen.
| | 00:46 | And so I am going to be utilizing the
background elements that I have here, as well as this
| | 00:50 | text at the bottom, and I am also going to
be incorporating some artwork that I created
| | 00:54 | inside of Adobe Illustrator.
| | 00:56 | And so, right here on the background,
the first thing I want to do is I want to add
| | 00:59 | a little bit of texture to the background,
but I don't necessarily want this to be a
| | 01:03 | destructive change.
| | 01:04 | I want to be able to turn it on and off if I
send it to the client and they don't like it.
| | 01:08 | So, what I am going to do is first unlock
the Background layer by double-clicking out
| | 01:12 | to the right-hand side of it. That's going
to unlock it. And I am just going to call
| | 01:15 | this Sky, and I will hit OK.
| | 01:19 | Now, once I've done that, I need to
convert this into a Smart Object.
| | 01:23 | There are a couple of
ways that you can do that.
| | 01:25 | You can right-click the layer and you can
choose Convert to Smart Object or you can
| | 01:30 | go to Filter and choose
Convert for Smart Filters.
| | 01:33 | Either way, you're creating a
Smart Object inside of Photoshop.
| | 01:37 | Let's go ahead and take a look at what I mean.
| | 01:39 | I will right-click the layer and
choose Convert to Smart Object.
| | 01:43 | When I do that, you're going to notice that
this little icon appears on top of the layer
| | 01:46 | thumbnail, indicating that
it is now a Smart Object.
| | 01:49 | Basically, I have a protective coating around
this background layer that enables me to do
| | 01:54 | things to it without actually
affecting the pixel values underneath.
| | 01:58 | Whereas before, if I had added texture or
grain or whatever it is that I am going to
| | 02:01 | run in the Filters menu
through this object before,
| | 02:04 | it would have really altered the pixel
value and made it impossible for me to get back
| | 02:08 | to the normal state later on.
| | 02:10 | So let's go ahead and run a
filter on this Background layer.
| | 02:13 | I will go to Filter and I am going to go down
and choose a new filter called Oil Paint inside
| | 02:18 | of Photoshop. I'm just going to
give it a little bit of texture.
| | 02:21 | And so now I am going to come in and just
kind of manipulate these settings. It really
| | 02:28 | doesn't matter which ones you choose,
as long as you give it a little bit of texture in
| | 02:33 | the background. I will kind of dial this
down a little bit, something kind of like that.
| | 02:40 | So right now my Stylization is at 1.98,
my Cleanliness 4.9, Scale is at 0.35, Bristle
| | 02:47 | Detail at 1.95, Angular Direction is
104.4, and my Shine is down to 0.85.
| | 02:54 | Again, totally up to you, but this just gives me a
subtle change in texture in the background, so I'll hit OK.
| | 03:00 | Once I do that, you'll see the texture has
been applied to that layer, and I also see
| | 03:05 | over here on the right-hand side that I
have a new Smart Filter applied to this.
| | 03:09 | I can mask out the Smart Filter
utilizing this built-in mask.
| | 03:13 | I can also at any time I want come in and adjust
the Oil Paint settings by finding the word
| | 03:17 | Oil Paint and double-clicking.
| | 03:19 | That takes me back into the filter.
| | 03:20 | So if I wanted to change the Angular Direction
of this again, something like that, and maybe
| | 03:26 | bump up the Shine a little bit, hit OK,
| | 03:29 | it automatically updates for
me when that comes back out.
| | 03:32 | Now, if I don't think that
I like this, that's okay.
| | 03:35 | I can simply remove the Smart Filter by
finding it, clicking on it, and dragging it to the
| | 03:40 | trashcan, and it's automatically removed.
| | 03:43 | Let's say, though, I want to
undo this, Command+Z or Ctrl+Z.
| | 03:46 | Let's say I want to make a change to the
Background layer itself, the actual blue background.
| | 03:51 | How do I make a change to that?
| | 03:53 | I'll come over here and I'll double-
click on the icon, and it opens it up.
| | 03:57 | I will hit Don't show again because
basically all this is doing is telling me I am about
| | 04:01 | to open a Smart Object.
| | 04:03 | When you're finished, you need to save
it in order to commit to the change.
| | 04:05 | So you just hit OK and it takes you here.
| | 04:08 | Let's say, for instance, that I wanted
to add a gradient to the background.
| | 04:12 | No problem. I'll just double-click to the right,
add a gradient overlay. And I'll change the
| | 04:18 | blend mode of the gradient overlay to overlay, and
then I am also going to reverse it and hit OK.
| | 04:27 | Now, I'll hit Command+S or Ctrl+S to save it,
close this document, and look how it updates
| | 04:33 | when I get back into this other document.
| | 04:36 | If I don't like that, I can use Command+Z and
Control+Z to undo, and it switches right back to normal.
| | 04:42 | So let's go back and I'll remove the Oil
Paint filter now, and I'll add just a standard
| | 04:46 | noise adjustment to this.
| | 04:48 | So Filter > Noise > Add Noise and I will do
about 5 pixels of Gaussian monochromatic noise.
| | 04:56 | And actually 5 is a little strong, so maybe 2.
There we go. Hit OK and there we have it.
| | 05:01 | I am going to actually bring in some
artwork that I created outside of Photoshop, and I
| | 05:06 | am going to do that by going to File > Place.
| | 05:09 | In my chapter 04 exercise
files folder, I have robot.ai.
| | 05:13 | I will find that, place it, and hit OK,
and then I will just move it down till it hits
| | 05:21 | the bottom, just like this, hit Enter to commit.
And now I'm going to make sure that the clouds
| | 05:26 | are behind the robot,
| | 05:27 | so I will drag that up in the Layers panel.
| | 05:32 | Once I've placed this in there,
it is still a vector object.
| | 05:35 | I can scale it, rotate it, do whatever I want
to it, and it will not lose the quality that
| | 05:39 | it had from Illustrator.
| | 05:41 | I can also jump back into Illustrator and
make changes to this artwork anytime I want,
| | 05:46 | and then save it and it
will update here in Photoshop.
| | 05:49 | Let me show you what I am talking about.
| | 05:50 | I will go over here and
double-click where it says robot.
| | 05:54 | When I jump into Illustrator, it's going to
tell me that there's a PDF modification detected,
| | 05:58 | indicating that I've modified
this outside of Illustrator.
| | 06:00 | I am just going to say Discard Changes, hit
OK, and then I'm going to hit Command+1 or
| | 06:07 | Ctrl+1 to zoom in to 100% on this.
And basically what I am going to do is I am going to put
| | 06:11 | a fill behind the eyes and behind the smile.
| | 06:14 | So I am just going to grab the Rectangle tool,
and I'll draw a shape that goes all the way
| | 06:20 | back behind here.
I want it to be white.
| | 06:22 | There we go. And I am going to set the Stroke
Color to None and the Fill Color to White,
| | 06:28 | and then I'll use Command+Left Bracket key or
Ctrl+Left Bracket key on my keyboard to send it behind the current
| | 06:34 | object that I'm working on.
| | 06:36 | You could also right-click on it and
choose Arrange > Send to Back. In this case I've
| | 06:42 | already got it in the back, so I
am good to go. I will save it.
| | 06:46 | Once I save it, if I jump back over into Photoshop,
you can see that the white fill is now behind
| | 06:51 | the robot, just like I needed it to be.
| | 06:53 | So again, anytime I need to make a change to
a Smart Object, I find it over in the Layers
| | 06:57 | panel, double-click the Smart Object icon.
| | 07:00 | If it's a Photoshop Smart Object, the Smart
Object opens directly from within Photoshop.
| | 07:04 | I make the changes, save,
close it, and it updates.
| | 07:08 | If it's an Illustrator Smart Object, like the one
you see here, you double-click it, Illustrator
| | 07:12 | launches, you make your changes, save that
artwork in Illustrator, and then you jump
| | 07:16 | right back into Photoshop, and it
should auto-update each and every time.
| | 07:20 | The beauty part about this is I can always
save this file and open it back up anytime
| | 07:25 | and get back to editing that
original vector piece of artwork.
| | 07:28 | I don't have to worry about
losing that vector quality ever again.
| | 07:33 | That's the beauty of Smart Objects, and
it's a great thing for designing web sites, UI,
| | 07:37 | applications like the one you have here,
anything that you're designing that needs to go across
| | 07:40 | multiple screens or devices needs to be able
to be flexible, and vector formatting gives
| | 07:45 | you just that.
| | 07:50 |
| | Collapse this transcript |
| Importing images| 00:00 | When we are using Photoshop as a web design
tool we are not just going to be working with
| | 00:04 | text and shapes; we also need to know how
to work with photographs and images that we
| | 00:08 | get either from the web, from our
clients, or even off of our digital camera.
| | 00:12 | In this movie I'll explore various ways that
you can bring in images into your designs.
| | 00:17 | I have open a file here and I basically
need to put in a product shot over here on the
| | 00:21 | left-hand side inside of this product frame.
And I want to do that by bringing in a JPEG image.
| | 00:25 | I can do that a couple of different ways.
| | 00:27 | I can either find the JPEG file online, like
at a stock photography agency, and simply copy
| | 00:33 | it and paste it in here or I can open the
file inside of Photoshop, copy it, and paste
| | 00:38 | it into this document, or I could place
the file into this document as well.
| | 00:43 | Let's take a look at a couple of those.
| | 00:45 | The first thing I am going to do is access
Mini Bridge, which is down here at the bottom of my screen.
| | 00:50 | You can go into the Window menu and bring
up Mini Bridge if it's not there, and you
| | 00:54 | can also just double-click to
either expand or contract it.
| | 00:59 | Once you have Mini Bridge open, you can use
it to navigate your chapter 4 exercise files
| | 01:02 | folder, and inside of the chapter 4 exercise files
folder, you'll see something called red_robot.jpg.
| | 01:08 | I can right-click on this and I can choose Open
With and choose the application that I want use.
| | 01:13 | In this case I want to use Photoshop. And it will
open that file directly in the window just like so.
| | 01:20 | If I wanted to take this file and copy it
and then paste it into the other document,
| | 01:24 | all I have to do is Command+A or Ctrl+A,
Command+C or Ctrl+C, and then go over to the document
| | 01:31 | and hit Command+V or Ctrl+V.
| | 01:34 | Once I paste it in, you're
going to see that number one,
| | 01:36 | it's too big and it's also in the wrong spot.
| | 01:38 | So what I need to do is
put it on the correct layer.
| | 01:41 | Well, let's open up the content. And I know
I need it to be on top of the product frame,
| | 01:45 | so I will click and drag it up until it's
on top of the product frame, and then I can
| | 01:50 | move it into position.
| | 01:52 | Now I would have to resize this image,
and we will cover that in the future movie.
| | 01:55 | But I just want to give you an idea of how
easy it was to get the image inside of Photoshop.
| | 01:59 | So let's take this now
and let's throw it away.
| | 02:02 | I also have the ability to place this
file directly within Photoshop as well.
| | 02:06 | This is probably the easiest way and
also one of the least destructive ways.
| | 02:11 | If I take this file from Mini Bridge down
here at the bottom and simply click and drag
| | 02:14 | it into the window, when I release my mouse,
the file is automatically placed into Photoshop.
| | 02:20 | I can then use the transform handles, along
with my Shift key and my Option or Alt key,
| | 02:24 | and shrink down the image until it's
the correct size to fit inside my frame.
| | 02:33 | Once I get it resized, I simply hit Enter
to commit, and now that file is right there
| | 02:38 | placed inside of my document.
| | 02:40 | The best part about this:
it's now a Smart Object.
| | 02:43 | So if I wanted to, I could
double-click the Smart Object.
| | 02:46 | It would temporarily open red_robot.jpg.
| | 02:49 | I could then add things to it like Adjustment
layers, Hue/Saturation, Levels, Curves, whatever
| | 02:55 | I wanted to use, save it, and return back and it
would automatically update in my other document.
| | 03:01 | Let's close this up now
and go back into this document.
| | 03:04 | Let's say that I didn't want to use Mini Bridge, or I
am not comfortable using something like the Bridge.
| | 03:09 | Let's close that up
and I can simply go to File > Place.
| | 03:13 | Go into my chapter 4 folder,
grab red_robot, and hit Place.
| | 03:20 | This also gives me the transform
handles and I can shrink it down,
| | 03:24 | move it over, and get it
right where I need it to go.
| | 03:29 | Once I get it sized properly, hit Enter to commit
and then move into place with my Arrow keys.
| | 03:35 | So no matter if you're importing JPEG files,
PDFs, PSDs, or even Illustrator files, you
| | 03:40 | can place the images directly into Photoshop,
either by copying and pasting, using File >
| | 03:45 | Place or just simply dragging and dropping
out of the Mini Bridge. Whichever way works
| | 03:50 | for you, that's the way you should go with,
| | 03:52 | whatever makes sense, because remember, there
is no right or wrong way; there is only your way.
| | 04:01 |
| | Collapse this transcript |
| Cropping and resizing images| 00:00 | As you continue to work with photographic
images inside of Photoshop, you're undoubtedly
| | 00:04 | going to need to resize and crop
images for your web site designs.
| | 00:08 | A lot times we're bringing in photographs
that we've taken with a digital camera and
| | 00:11 | they're simply too big to display on the web.
| | 00:14 | So in this movie, I'm going to walk you
through a couple of my techniques for cropping and
| | 00:17 | resizing images as well.
| | 00:19 | Let's tackle cropping first.
| | 00:21 | In Photoshop CS6,
they have an all-new Crop tool.
| | 00:24 | You can access that by finding the Crop tool
in the toolbar or simply by pressing the letter
| | 00:27 | C on your keyboard.
| | 00:29 | Once you press the letter C,
you're automatically going to get cropping handles all the way
| | 00:32 | around the outside of the document.
| | 00:35 | You can simply just click and drag to crop them
and the image sort of moves along with you.
| | 00:40 | The Crop tool is very fluid now, and I actually
like it a lot better than the old Crop tool.
| | 00:44 | So you just kind of maneuver this around and
place it wherever you need it to go, just like so.
| | 00:50 | Also new is this checkbox at the
top called Delete Cropped Pixels.
| | 00:54 | When this is checked, that means that as soon
as I commit to this crop, the pixels around
| | 00:59 | the outside of it are gone.
| | 01:00 | However, if I uncheck this box and hit Enter,
I didn't actually remove any pixels from the image at all.
| | 01:08 | In fact, if I were to start cropping this
again and I drag this handle out to the left,
| | 01:13 | notice the portions of the
original image are still there.
| | 01:17 | This is great because if I ever made a mistake--
like accidentally chopping off the head of
| | 01:21 | the robot for instance, like this--I can
always get back to that simply by dragging the Crop
| | 01:27 | tool back up and making that adjustment.
| | 01:29 | So let's continue.
Let's crop this up, just like this.
| | 01:35 | I'll crop it in a little bit on the
side, and I'll hit Enter to commit.
| | 01:40 | Once I'm done with that, I'll switch to my
Move tool to deactivate the crop around the
| | 01:43 | outside, and now I'm
ready to resize this image.
| | 01:47 | If you look at it right now,
I'm looking at it at 33.33%.
| | 01:50 | That means it's zoomed out really far.
| | 01:53 | If I hit Command+1 or Ctrl+1 on my keyboard,
you're going to see just how big this object is.
| | 02:00 | If I want to see the true image size, I can
go up to the Image menu and choose Image Size
| | 02:05 | and it'll give me the exact
pixel dimensions of the document.
| | 02:08 | In this case,
it's 1050 x 1210 after I cropped it down.
| | 02:13 | So if I want to change this to something like
400 pixels wide, that's going to make it 461
| | 02:19 | pixels tall. And I'll simply hit OK.
| | 02:24 | Going down in size is
always easier than going up.
| | 02:27 | Let me undo that and go back into the Image
Size dialog box to show you a little something.
| | 02:33 | When you're resizing images, you want to make
sure that you try to go down as much possible,
| | 02:37 | as opposed to going up.
| | 02:39 | Going up tries to create pixel
data where there is no pixel data,
| | 02:42 | so you wind up with artifacts and pixelations and
things that really make your photos look nasty.
| | 02:47 | But if you go from a large image to a smaller
image, chances are you're going to maintain
| | 02:51 | that quality, because you're not actually
trying to create data where data doesn't exist;
| | 02:55 | you're simply getting rid of
data that you don't need anymore.
| | 02:58 | At the bottom of the Photoshop Image Size dialog box,
there is something for the resampling algorithm.
| | 03:04 | You can choose which one of these you're using,
based upon the action that you're about to perform.
| | 03:08 | And you'll see here they have in parentheses a
guide to tell you exactly what it's best for.
| | 03:13 | For instance, Bicubic, (best for smooth gradients);
Bicubic Smoother, (best for enlarging photos);
| | 03:20 | Bicubic Sharper, (best for reductions).
| | 03:22 | So if you're trying to reduce the size of your
image, you might want to try Bicubic Sharper.
| | 03:27 | In this case, I'll choose Bicubic
Sharper and I'll go with 450 pixels.
| | 03:32 | Then I'll hit OK, and there's my
newly resized image, just like that.
| | 03:38 | If I want to take this file now and place it
into another document, I can do that simply
| | 03:43 | by selecting it all and then copying and pasting,
or I could save this and then place it into
| | 03:48 | the document using any number of the File >
Place methods that we have available to us.
| | 03:52 | So as you start to aggregate your content to
put into your web site design, whether it
| | 03:56 | be photographs, logos, PDFs, whatever it may
be, take some time to learn how to utilize
| | 04:01 | the crop and resizing tools inside of
Photoshop to make it a little bit easier on yourself
| | 04:06 | when you start assembling
your final composition.
| | 04:11 |
| | Collapse this transcript |
|
|
5. Creating WireframesPlanning your project| 00:00 | Your first step when starting a new web-based
project is going to be to plan out the project itself.
| | 00:06 | This means determining exactly what you're
building, where it's going, and what the intended
| | 00:11 | audience is going to be.
| | 00:12 | This will be your driving force throughout
the entire design process, everything from
| | 00:17 | mockup to changing it into actual images, to
converting it all the way over to CSS and HTML.
| | 00:23 | So the planning stage is very
important, but it can be really simple.
| | 00:27 | I've got a file opened here, and this is
something that I created by utilizing an application
| | 00:32 | on my iPad called Adobe Ideas.
| | 00:35 | Adobe Ideas is basically a sketching
application that allows me to easily just sort of draw
| | 00:39 | things with my finger.
| | 00:41 | This is what I've started doing for a
lot of my web and application projects.
| | 00:45 | I go into Adobe Ideas, I make a quick sketch,
I send it out, open it up in Photoshop, and
| | 00:50 | use that as a template going forward for
whatever it is that I might be working on.
| | 00:55 | For instance, let's assume here that I'm making
a WordPress theme that I'm going to then hand
| | 00:59 | off to a developer to code into
PHP, CSS, and all that good stuff.
| | 01:04 | This is the basic
structure for the entire theme.
| | 01:06 | As you can see here at the top, I've got a
header it goes all the way across the top.
| | 01:09 | I'm going to have a content slider underneath.
| | 01:12 | I'm going to have a row of
video thumbnails beneath that.
| | 01:14 | I'll have some text down here at the left,
an image flush right, and then we'll have a
| | 01:18 | footer down at the bottom.
| | 01:20 | Now of course I would go through a lot of
different things in terms of planning this out.
| | 01:23 | I would determine the overall width of the
document, the overall width of the theme itself,
| | 01:29 | how tall the header is, how big is the slider,
how big are the thumbnails, is the text farther
| | 01:35 | to the left than the image, or where does the
image fall in relationship to the text, how
| | 01:39 | tall should I make the footer, is the
footer a full width, is it just the width of the
| | 01:43 | theme, et cetera.
| | 01:44 | You have to take all of this stuff into
account when you're planning, but starting from a
| | 01:48 | sketch like this, it's a lot easier than just
trying to do it off the top of your head.
| | 01:53 | And with apps like Adobe Ideas or any other
type of sketching application that you can
| | 01:57 | download onto a tablet or a mobile device,
you no longer have to do this on paper.
| | 02:02 | I call these apps the modern-day cocktail
napkin, because now instead of actually sketching
| | 02:06 | on a napkin, I can just sketch in any one
of these programs and I can instantly bring
| | 02:11 | that into a program like Photoshop or Illustrator
and I can build working prototypes off of them.
| | 02:16 | It's very cool.
| | 02:17 | So after I've got my basic sketch down inside
of Photoshop like this, I'll start by creating
| | 02:23 | a new blank document. So I'm just going to do
Command+N or Ctrl+N on my keyboard to create
| | 02:28 | a new document and then I'm
going to start setting this up.
| | 02:31 | Now I have a preset in my
Presets menu called Blog Design.
| | 02:35 | My Blog Design preset that I've created and saved has
a width of 1200 pixels and a height of 2000 pixels.
| | 02:42 | So if you want to create a document just like
that, just type in a Width of 1200; a Height
| | 02:46 | of 2000; Resolution can be set to 72,
that's fine; Color mode should be set to RGB; and
| | 02:53 | then I'm simply going to hit OK.
| | 02:56 | Once I hit OK, I've now got the
basic backbone of my document in place.
| | 03:02 | From here it's just a matter of determining
the exact sizes of everything inside of the
| | 03:06 | blog design itself and then implementing
that utilizing guides, grids, and shape layers.
| | 03:11 |
| | Collapse this transcript |
| Using guides and rulers| 00:00 | As you continue to make mockups inside of
Photoshop, you're going find that your best
| | 00:04 | friends start to become the rulers and the guides
that are available to you inside Photoshop.
| | 00:09 | In this movie, I am going to be walking you
through how to utilize the rulers and the
| | 00:13 | guides inside of Photoshop to make it a
little bit easier to start laying out all of your
| | 00:17 | different mockups that you might have.
| | 00:18 | So the first thing you have to do is make sure
that your rulers are actually present onscreen,
| | 00:23 | and in order to do that, you can simply hit
Command+R or Ctrl+R on your keyboard or go
| | 00:27 | up to the View menu and make sure
there is a check mark next to Rulers.
| | 00:31 | As long as there is a check mark there,
the rulers are being displayed right here.
| | 00:35 | Just in case you haven't set your document
up properly and these don't look like they
| | 00:39 | are representing pixel values, you can always
right-click on those and change it from Pixels
| | 00:44 | to Inches, to Centimeters, to Millimeters, or
whatever it is you might be wanting to use.
| | 00:48 | For web and screen-based design, we want to
use pixels though, so I will go ahead and
| | 00:51 | leave that on Pixels.
| | 00:53 | I also like to bring up the Information
panel, or Info panel, so that I can see where I'm
| | 00:58 | at, at any time in my document.
| | 01:00 | So I will go to Window and select Info.
| | 01:02 | You can also hit F8 on your keyboard in
order to do that. And I like to have this sort of
| | 01:06 | free floating out in the window, so I
will undock it and move it right there.
| | 01:11 | This is only for when I am creating my grids
and guides that I am going to be working with.
| | 01:16 | Why do I do this? Because when I move my mouse over my
document, watch what happens in the Info panel.
| | 01:21 | I get an instant read of exactly where my
cursor is, both on the X and Y axis, and it
| | 01:26 | also samples the color that I'm hovering
over at any given time as well, making it easy
| | 01:31 | for me to see color values as well as X and Y
coordinates for placing guides inside of my document.
| | 01:37 | In order to start placing guides in your document,
all you have to do is click and drag out from
| | 01:42 | a ruler and then drop the guide by releasing your
mouse anywhere you want it to go inside the document.
| | 01:47 | I can do Command+Z or Ctrl+Z to
undo that and remove the guide.
| | 01:51 | Now in this case, I have
got a pretty big document.
| | 01:54 | If I open up the Image Size dialog box by
going to Image > Image Size, you will see
| | 01:58 | that it's 1200 pixels wide by 2000 pixels tall.
| | 02:02 | So now I am going to put what I call an anchor
shape directly in the middle of the document
| | 02:05 | so that I can set up the overall width of
the blog template that I'm trying to design.
| | 02:10 | So I am going to grab my Shape tools, and I
can do that by hitting the letter U on my
| | 02:13 | keyboard or simply by coming down, clicking
and holding, and finding the rectangle tool.
| | 02:18 | Once I have the Rectangle tool selected,
I am simply going to click in the middle of
| | 02:21 | the document somewhere and I am going to type out 960
pixels wide. And it can be whatever Height you want.
| | 02:29 | I only need it to be that specific width.
| | 02:31 | So I will go ahead and hit OK.
| | 02:33 | That generates a 960-pixel-wide rectangle
in the middle of my document, but it's not
| | 02:38 | right in the center where I need it to be.
| | 02:40 | So I am going to select the Move
tool with the letter V on my keyboard.
| | 02:44 | I will use Command+A or Ctrl+A, or
you can go to Select > All in the menus.
| | 02:51 | Once you have the entire canvas selected,
just hit Align vertical centers and Align
| | 02:55 | horizontal centers.
| | 02:57 | That gets this directly in the middle of your
document, making it easy for you to drag out
| | 03:01 | guides that snap to it.
| | 03:02 | I am going to press Command+D or Ctrl+D to
deselect, and I am going to zoom in so I can
| | 03:07 | see exactly what I am doing.
| | 03:09 | I will come over to the left and I will grab
a guide and I will let it snap to the edge
| | 03:15 | of that shape, come out, drag another guide,
let it snap to the edge of that shape, and
| | 03:20 | now without having to do any math or calculations,
I've actually created a 960-pixel-wide window
| | 03:26 | in which to place objects inside my design.
| | 03:30 | I can now throw away my anchor shape.
| | 03:32 | I am going to pan up by temporarily holding
down the spacebar key and I am going to drag
| | 03:37 | out a guide for the header
at the top of the screen.
| | 03:40 | So I am going to click and drag.
| | 03:42 | You will notice as I drag, I get this little
pop-up that tells me exactly where I am on
| | 03:46 | the X and Y axis.
| | 03:48 | This is sort of like a mini Info panel that is
associated with the guides, as I draw them out.
| | 03:53 | So in this case, I am going to drag this down
until it reaches 100 pixels and once it does,
| | 03:57 | I'll release the mouse.
| | 03:59 | So that is going to be the height of my
header that's going to be at the top of my blog.
| | 04:04 | Hold down the spacebar key and pan down, and I
am going to click and drag out another guide.
| | 04:09 | Now remember, this document is 2000 pixels tall,
so if I want this to be around 300 pixels
| | 04:16 | tall for the footer, I need to drag this
guide down until it hits about 1700 pixels.
| | 04:21 | So once it hits 1700, I'll release, and
now I have my guide placed there as well.
| | 04:27 | I can also build in margins if I want to.
| | 04:30 | So I will go ahead and
click to drag out another guide.
| | 04:32 | I am going to let it snap to this guide.
And it's at 120 pixels, so if I want a 15-pixel
| | 04:39 | margin, I will just drag this in till it
reaches 135. And if you can't get it right on the
| | 04:46 | dot, that's okay; just release your mouse
and then zoom in a little bit and you should
| | 04:50 | be able to make that one-pixel adjustment.
| | 04:53 | So I will do that. 135. There we go!
| | 04:56 | Now I'll click and drag out another guide.
| | 04:58 | I am going to bring all the way over until
it's right on top of that other guide, which
| | 05:03 | is at 1080, so I need to back that in 15
pixels, so that needs to be at 1065.
| | 05:10 | Once it gets there, there we go, and now I
can do the same thing: click and drag a guide
| | 05:14 | from the vertical. And remember it's 2000
pixels tall, so 15 pixels would be 85, 1985.
| | 05:23 | There we go. And same thing for the top.
| | 05:28 | I will pan up by holding down the spacebar,
click and drag, and I can just drag this out
| | 05:33 | to 15 pixels, like that.
| | 05:37 | So now I have 15-pixel margin on the inside,
15-pixel margin on the top, and also on the bottom.
| | 05:45 | I have my header space carved out.
| | 05:47 | I have my footer space carved out.
| | 05:49 | If I zoom out on my document, you can see
that I've laid down the basic structure of
| | 05:54 | my blog design simply by utilizing the
rulers and some guides here inside of Photoshop.
| | 06:00 | Now, another thing that might be helpful for
you is if you turn on a grid. So if I go to
| | 06:05 | the View menu, go down to Show, I can actually
go over and turn on a grid, and that grid might
| | 06:11 | make it a little bit easier for me
to place items inside my document.
| | 06:15 | Now in some cases, this is a little bit
distracting, especially if you've already drawn out your
| | 06:19 | own guides, like I have here.
| | 06:21 | So if you're more of a guide person, use
your guides; if you are more of a grid person,
| | 06:25 | try using the grid.
| | 06:26 | In this case, I am going to turn it back off
by going to View > Show and uncheck the grid.
| | 06:33 | So now that I've got all of my guides in place,
I'm now ready to start adding shapes to this
| | 06:38 | in order to complete my mockup.
| | 06:43 |
| | Collapse this transcript |
| Using a grid system| 00:00 | When it comes to creating mockups inside of
Photoshop, one of the best ways to create
| | 00:04 | a mockup is to utilize
something called a grid system.
| | 00:07 | There are a ton of different grid systems
available that you can download templates for online.
| | 00:11 | The most notable is probably the 960 grid system,
which you can go to by going to www.960.gs in your web browser.
| | 00:20 | You can download a template there which will give
you a Fireworks, Illustrator, Photoshop template.
| | 00:24 | There are all kinds of different
ways that you can utilize that design.
| | 00:27 | However, the 960 grid template can be
somewhat confusing for some people.
| | 00:31 | Because it uses a width of 960 pixels, it doesn't
lend itself well to things like responsive design.
| | 00:37 | Therefore, in my workflow, I've actually
adopted something called the Responsive Grid which
| | 00:41 | was developed by a web designer named
Elliot Jay Stocks and you can visit his web site
| | 00:45 | by going to the following
address: eliotjaystocks.com.
| | 00:50 | And inside of the document that I have open
here, you can actually see that web address
| | 00:53 | at the bottom of this document.
| | 00:56 | Let me explain the premise of
this design and how it works.
| | 00:59 | Basically, Eliot came up with the idea that
the 960 grid system for responsive design
| | 01:03 | just doesn't work, because of the fact that
when you try to divide things up evenly to
| | 01:08 | be "responsive" or expandable or contractible,
960 pixels doesn't lend itself well to even
| | 01:14 | percentages, whereas a
1,000-pixel grid does so very nicely.
| | 01:18 | So for instance, here I've got six columns
inside of this grid, and I want these columns
| | 01:24 | to be evenly spaced based on a percentage so
that when the user resizes his or her browser
| | 01:29 | window, these automatically adjust to
show different portions of the screen.
| | 01:33 | Let's go over to a live
HTML example really quick.
| | 01:36 | Inside of this example, you're going to see
that I have the same type of layout that I
| | 01:39 | have in my Photoshop document.
| | 01:41 | Each one of these columns that goes across
the top here is equal to 15% of the width.
| | 01:47 | Since I'm using a 1,000-pixel-wide container, each
one of these is approximately 150 pixels across.
| | 01:53 | Of course, depending on the actual browser size,
when I drag and move it around, that might change.
| | 01:59 | So for instance, if I were to drag this in to,
say, a tablet size, notice how they all adjust.
| | 02:05 | I can drag it down to a mobile
phone size and they continue to adjust.
| | 02:10 | This is all done through HTML and CSS.
| | 02:12 | But in Photoshop, we can mimic that by
utilizing what we call the responsive grid.
| | 02:18 | So how do you set up a responsive grid?
| | 02:19 | It's actually pretty simple.
| | 02:21 | I've given you the template here, but if you
wanted to start your own, all you would have
| | 02:24 | to do is create a brand-new document in Photoshop,
Command+N or Ctrl+N. And I'll make this 2,000
| | 02:31 | pixels wide by 1,000 pixels Tall. H it OK.
| | 02:35 | There we go!
| | 02:36 | Now what I'm going to do is
create what I call an anchor object.
| | 02:41 | So I'll grab the Rectangle tool and click.
| | 02:43 | I'll make this 1,000 pixels wide
and I'll make it 1,000 pixels tall.
| | 02:48 | Hit OK. I'm then going to move
it till it snaps in the center.
| | 02:53 | I want to make sure that it's
centered in my layout as well.
| | 02:56 | So with my Move tool selected, Command+A or
Ctrl+A to select everything, and then I'll
| | 03:01 | center it vertically on the page.
| | 03:03 | Now I'll hit Command+D or Ctrl+D to
deselect and I'm going to draw out some guides.
| | 03:06 | If you can't see your guides, hit Command+R
or Ctrl+R on your keyboard, or go to View
| | 03:11 | and make sure Rulers is turned on.
| | 03:13 | Now I'll drag out from
the left. It should snap.
| | 03:17 | Drag out to the right and it should snap.
Now, we're basing this off the premise that
| | 03:20 | I want six columns and then I could do three
columns, two columns, one column, whatever
| | 03:25 | I wanted to do, so that basically when I'm
mocking things up, I can say, okay, this div
| | 03:29 | spans one column or this div spans two
columns or three columns. And it's just an easier
| | 03:34 | way to determine exactly how wide the columns are
going to be and how wide the content is going to be.
| | 03:39 | So, based on this 1,000-pixel grid, I'll
come up and I'll start to draw out rectangles.
| | 03:44 | I can actually throw away
the original rectangle.
| | 03:47 | I don't really need it
anymore. And I'll start clicking.
| | 03:51 | I'll make this 15% of the overall width.
| | 03:53 | That's how wide I want each column to be.
| | 03:55 | So 15% would be 150 pixels,
and we'll make it 100 pixels tall.
| | 04:00 | Hit OK and there we go!
| | 04:02 | Now I'll just move this till it snaps over
here to the left-hand side. And I want six
| | 04:06 | columns, so I'll duplicate this five times.
| | 04:09 | I'll hold down the Command key and press
the letter J five times. There we go!
| | 04:15 | Now I'll take this copy,
drag it over until it snaps here.
| | 04:22 | Then in my Layers panel over here I'll
select all the layers by Shift+Clicking and I'll
| | 04:26 | distribute them evenly across, just like that.
| | 04:30 | Now I can move them up a
little bit, and there we go!
| | 04:33 | I'm going to use this to set up my guides.
| | 04:36 | So now I'll snap this
there, just like that. There we go!
| | 04:47 | And the guides are just snapping to the
edges of the boxes that I've drawn out.
| | 04:52 | And this is the basis for my
entire template. There we go!
| | 05:01 | Now, I also want to zoom in, because I need to put a
guide directly in the center to imitate the margins.
| | 05:07 | So I'll come out here and I'll put one--by
the way, if you can't get them precise enough,
| | 05:14 | you can zoom in a little bit more and you'll
get more precise control over your guides.
| | 05:19 | So in this case, I want 490
right there. Drag this over.
| | 05:26 | I'm just hitting the middle portion of each
one of these, and I'm using that little heads-up
| | 05:30 | display to see that.
830, scroll over. Here we go!
| | 05:36 | That should snap right to
the middle. There we go!
| | 05:43 | Two more, right there. And we'll
drag this out to 1510. There we go!
| | 05:50 | All right! Now I can take the same
rectangles and I can throw them away.
| | 05:55 | I'm all done with those rectangles.
| | 05:57 | Now I have a grid template that I
can now use to design my sites.
| | 06:02 | So let's see how we can put this into play.
| | 06:04 | I'm going to grab my Rectangle
tool and just make a quick mockup.
| | 06:09 | So let's say I want a header that goes
all the way across the top. All right!
| | 06:12 | So I'm going to drag that out,
| | 06:14 | let it snap, and I want it to be
about 50 pixels tall. There we go!
| | 06:21 | There's my header. Maybe right underneath
that I need a large image that's flushed left,
| | 06:26 | so I'll have that span across three
columns and I'll make it 200 pixels tall.
| | 06:33 | Now, maybe I have another div over here, spans three
as well. We'll make it 200 pixels tall to match the other.
| | 06:42 | There we go!
| | 06:44 | And I can always just kind
of nudge that into place.
| | 06:46 | Now I'm going to grab my Shape tool again.
| | 06:50 | Let's say that I need another smaller div here that
goes across all the way. Maybe it's 50 pixels tall.
| | 06:59 | Then I've got some thumbnails down here
which are just evenly spaced out, and I'll create
| | 07:06 | a couple copies of these.
| | 07:11 | So six copies to be exact. And then I'll take
that, move it over, and then evenly distribute
| | 07:19 | those across so there are some thumbnails.
And then I'll duplicate all of these with
| | 07:23 | Command+J or Ctrl+J, give me another row of
thumbnails. And then I'll draw out a footer
| | 07:30 | at the very bottom.
| | 07:31 | So you can see in just a few minutes
I have mocked up a web site with a header, a big
| | 07:42 | content area on the left and right, a banner
ad in the middle, some thumbnails for images
| | 07:46 | in the middle, and then
also a footer at the bottom.
| | 07:49 | And now this would translate really easily
over into a design like we have in our browser,
| | 07:55 | because it uses these widths that I specified
as percentages and so therefore it would be
| | 07:59 | easy to turn this into a responsive design that
would adjust according to the user's window.
| | 08:05 | So the next time you go to start mocking up
a project inside Photoshop, take a look
| | 08:09 | at some of the grid systems
that are available to you online.
| | 08:11 | Just do a web search for "web design grid
systems" or go to 960.gs or go to elliotjaystocks.com
| | 08:19 | to look up his responsive Photoshop grid.
| | 08:22 | You'll be well on your way to making cleaner
mockups that are easily translated into HTML
| | 08:26 | and CSS.
| | 08:31 |
| | Collapse this transcript |
| Developing a layout with shape layers| 00:00 | Now that we've got all of our guides in place
on our blank blog design that we're creating
| | 00:04 | here inside of Photoshop, it's time to start
utilizing shape layers to quickly mock up the
| | 00:09 | rest of this design.
| | 00:11 | Now I've also got my sketch document open
here, and inside of the sketch I have basically
| | 00:15 | a blueprint for exactly what I need.
| | 00:17 | I need a header, a content slider, two rows
of thumbnails, some text, an image, and a
| | 00:22 | footer, and that's exactly
what we're going to put in place.
| | 00:25 | So let's go back over into my blank blog here, and I
am just going to start working with the shape tools.
| | 00:30 | So I'll back down here and select the
Rectangle tool. And by the way, the Rectangle tool is
| | 00:33 | the main tool that I use
when I'm mocking things up.
| | 00:36 | I'm also going to make sure that the Rectangle tool is
set to create shape layers and not paths or pixels.
| | 00:43 | I'm going to select the fill color of a dark
neutral gray and then I am just going to come
| | 00:48 | out I am going to start
clicking and designing shapes.
| | 00:51 | So I'll click, and in this case I know the
header needs to be 100 pixels tall because I set
| | 00:55 | up my guides to be that way, and I also
need it to be the full width of the template,
| | 00:59 | which is 1200 pixels wide.
| | 01:01 | So I'll do 1200 pixels by
100 pixels and I'll hit OK.
| | 01:05 | That creates a brand-new shape layer
exactly the height that I needed to be.
| | 01:09 | I'll grab my Move tool, and I'm
just going to throw it up at the top.
| | 01:12 | If it doesn't line up perfectly, that is okay,
because we can always come back in and make
| | 01:16 | what I call pixel-perfect
adjustments a little bit later on.
| | 01:19 | I am now going to grab the
Shape tool again. I'll click.
| | 01:24 | I want this to be 960 pixels wide by
about 350 pixels tall and I'll hit OK.
| | 01:31 | And again, I'll just kind of move this up in
the area of where I think I want it to go,
| | 01:35 | the content slider is going to go up there.
| | 01:38 | Then I'm going to grab my
Rectangular tool again.
| | 01:40 | I am going to start adding in the
thumbnails for the little video rows that I have.
| | 01:45 | So I'll just click and I want this to be about 300 pixels
wide, and let's make them 200 pixels tall and hit OK.
| | 01:53 | That creates 1, and let's go
ahead and create two other copies.
| | 01:58 | And then I'll just kind of move these in place.
Select that one, move it over, select that one,
| | 02:05 | and move it over. Again, it does not matter
if these don't line up properly. That's okay.
| | 02:09 | We can make adjustments on that later.
Again, remember, this is just a rapid prototype.
| | 02:14 | Now if I want to create a second a row,
the easiest way to do that is to select all three
| | 02:17 | layers right here and
then hit Command+J or Ctrl+J.
| | 02:20 | Once I do that, it duplicates all the layers
and then I can use my Move tool to just drag
| | 02:25 | them down, something like that. Pretty simple.
| | 02:30 | Now I'll grab my Text tool, because I do
have a bit of text according to my sketch that
| | 02:33 | goes underneath here.
| | 02:35 | So I'll go back. And I am just going to click,
draw out a box, something kind of like this.
| | 02:40 | I want to make sure I'm using just a regular
font, like Helvetica. I'm going to choose Regular.
| | 02:47 | I'll set it to 14 points is okay.
| | 02:50 | And I'm going up to Type > Paste Loren Ipsum.
| | 02:55 | That just pastes in some text for me. And if I
need to increase the size of that, I can.
| | 02:59 | In this case I am just going to shrink up the
size of the box a little bit to match it.
| | 03:03 | Switch to my Move tool.
We will move it down just a little.
| | 03:07 | I'll grab my Shape tool again, and I
need an image over on the right-hand side,
| | 03:10 | so I'll move that in and draw out, just like
that. And again, we can always make adjustments
| | 03:15 | to this if we need to later.
| | 03:16 | Final thing that I need to include
in here is going to be my footer.
| | 03:19 | That's the only other required thing that I need
according to my design, so I'll just come
| | 03:23 | down. And instead of clicking and typing in
numbers, I'll just click and drag out a box,
| | 03:28 | something kind of like this,
that fits at the very bottom.
| | 03:30 | And so just in a few short minutes, I have actually
put together a full mockup of this blog design.
| | 03:37 | So you see, I started off with the plan,
which was just a hand-drawn sketch just like this
| | 03:41 | and moved over into Photoshop,
| | 03:43 | and I put together some guides, threw together some
shapes, and now I've a pretty nice-looking mockup.
| | 03:49 | It's messy, but I can always fix that later on.
| | 03:52 | So as you continue to evolve your workflow,
try to get in the habit of going from one
| | 03:55 | phase to the other
throughout your design process.
| | 03:59 | And it is going to make things a lot more
streamlined and a lot easier for you to understand
| | 04:02 | everything that's going on inside your file.
| | 04:07 |
| | Collapse this transcript |
| Making pixel-perfect adjustments| 00:00 | During the course of your rapid prototyping
session, you may find that your mockups tend
| | 00:04 | to get a little bit messy, and that's
because we're just simply drawing out some shapes
| | 00:09 | to give you an idea of exactly what
the web site is going to look like.
| | 00:12 | I didn't worry about what I
call pixel precision in any case.
| | 00:16 | But now I have opened this mockup that I've
done quickly inside of Photoshop, and I want
| | 00:20 | to actually refine this so that it looks
exactly like it's supposed to. And in order to do
| | 00:24 | that, I am going to have to
make "pixel perfect adjustments."
| | 00:28 | So let's take a look at how we can do that now.
| | 00:30 | As you can see, if I zoom in on this file,
I have several of these elements that aren't
| | 00:34 | really fitting in between the guides that I
have created, some of which go off the page,
| | 00:38 | some of which aren't inside the margins, and so
I need to fix these so that they flow exactly
| | 00:43 | as they are supposed to.
| | 00:44 | So in order to do that, I need to start targeting
those individual elements and moving them around.
| | 00:48 | It's actually pretty easy to do.
| | 00:50 | The first thing I am going to do is work on
the header, so I will select the Header layer
| | 00:53 | over here on the Layers panel and I am just
going to just nudging it over to the left.
| | 00:58 | As long as I have the Move tool selected,
I can use my arrow keys to do this.
| | 01:02 | So I will just nudge it to
the left until it lines up.
| | 01:04 | You could also use Command+A or Ctrl+A on
the keyboard to select everything and then
| | 01:09 | use your Alignment tools up here.
| | 01:12 | So I could align it flush to the left and
then align it to the top, and it should fit
| | 01:17 | right there in that
window that I have created.
| | 01:20 | Command+D or Ctrl+D to deselect.
| | 01:23 | The Content Slider. The Content Slider needs to
be centered directly in between both of these
| | 01:28 | guides that I have right here.
| | 01:30 | That's easy enough. All I have to do is just
click and drag and it will snap right to those
| | 01:34 | guides, or at least it should.
| | 01:36 | I can also zoom in to see if it's matching up exactly
with the edges of the guides, which it seems to be.
| | 01:42 | So that's all good.
| | 01:43 | I may want to space this out a little bit
more precise from the bottom of the header
| | 01:47 | though, so in order to do that, what I
need to do is drag out another guide.
| | 01:51 | So I am going to come up
to the top, click, and drag.
| | 01:54 | I will find out where the other guide
stops, which is right at about 100 pixels.
| | 01:59 | Let's say I want to make this a 15-pixel margin, so I
will drag that down to about an 115 and let it go.
| | 02:07 | If I find that's too close, I can always
expand. Maybe 30 pixels will look better.
| | 02:11 | So take that to 130. T here we go.
| | 02:14 | Now I take the Content
Slider and just move it up.
| | 02:17 | It should snap right to the guide.
| | 02:19 | I will do the same thing at the bottom
of the Content Slider. Drag out of guide,
| | 02:24 | let that snap to the bottom of the Content
slider, and then we will drag out of guide
| | 02:29 | and take it 30 pixels down beneath it.
So from right there, 480, I need to go to 510.
| | 02:35 | And if you won't go exactly to 510, that's okay;
you can zoom in a few times and it should
| | 02:40 | make it a little easier to get there. 510.
There we go. Zoom back out.
| | 02:47 | Now I will take the row 1 thumbnails and I
will drag those up, snap those to that guide,
| | 02:52 | drag them over, snap them to that guide.
| | 02:55 | You notice this square over here on
the right exceeds the margin over here.
| | 02:59 | So what I need to do is open up that group.
| | 03:02 | I need to target that one, which is Rectangle
3 copy 2, and I will just move it over until
| | 03:10 | it snaps. Then I can select all three of
these and distribute them across the centers to
| | 03:17 | center it up. Then I will close that.
| | 03:20 | I can do the same thing to Row 2 or I could
simply delete Row 2 entirely by dragging it
| | 03:26 | to the trashcan and then select
Row 1 and hit Command+J or Ctrl+J.
| | 03:31 | That's going to duplicate the entire group.
| | 03:32 | I will double-click and rename this Row 2,
and then I will just drag this down.
| | 03:38 | I will snap it to the bottom
and see exactly where it is.
| | 03:42 | I will move it down 30 pixels, just like that.
| | 03:50 | Now I can drag out guides to snap to these if
I need to. I will drag this out, like that.
| | 03:58 | Snap there, snap there.
| | 04:00 | I am just dragging out these guides so if I ever
need to use this again, I already have them in place.
| | 04:06 | Now I am going to take the Text/Image
and I am going to drag those up a little bit.
| | 04:10 | I need to make sure I have a guide in place
though, so I will drag that out. And so this
| | 04:14 | is about 940, so that means
it needs to go about 970.
| | 04:16 | Here we go, and I will drag
these up, until they hit that.
| | 04:23 | I need to open up that group because this
image should be flushed to the right, so I
| | 04:27 | will do that:
grab that and move it over.
| | 04:30 | I also want it to be a little bit taller.
| | 04:32 | It needs to match the height of the text,
so I will do Command+T or Ctrl+T and I will
| | 04:37 | drag it down until it snaps to the
bottom of that text, just like so.
| | 04:43 | I'll drag out a guide, have it snap to
the bottom of that image, drag out another
| | 04:50 | guide, and make that 30
pixels from there, so 1160.
| | 04:54 | It needs to go about 1190,
something like that. There we go.
| | 04:59 | The Bottom Banner, it's already in the middle.
| | 05:01 | I just need to drag it up. There we go.
| | 05:06 | And then towards the
bottom, we have our Footer.
| | 05:08 | I'll select the Footer. And you can see when
I select it, it's actually way off the page
| | 05:13 | and not aligned with the bottom.
| | 05:15 | So I am going to Command+T or
Ctrl+T to bring up Free Transform.
| | 05:18 | I will drag it down till it matches all the
guides and it should just snap right to them.
| | 05:25 | And then once I am finished, I will
hit Enter to commit to my change.
| | 05:29 | Now I will zoom back out and we can
see the entire layout as it should be.
| | 05:36 | So there we go, pixel
perfection all the way across the board.
| | 05:40 | I've got my Header inline, my Content Slider,
all of my thumbnails, my text and image are
| | 05:44 | in the right place, my banner is now centered
and 30 pixels beneath everything, and my Footer
| | 05:49 | now fully fits within a
window of which I have defined.
| | 05:52 | So it's going to take a little bit of time,
but getting this mockup as close to perfect
| | 05:56 | as you can is a great way to jump-start the
other portion of this, which is then bringing
| | 06:01 | in the content that you've aggregated to make
this a real web site design where we add in
| | 06:07 | images, buttons, navigation, UI
elements, and all that kind of stuff.
| | 06:11 | This is just a skeleton, something to
give us an idea of where everything goes.
| | 06:15 | Now it's time to take this one step further
and start adding the real content to make
| | 06:20 | it a true working web design composition.
| | 06:25 |
| | Collapse this transcript |
|
|
6. Working with TextUsing point text vs. paragraph text| 00:00 | When dealing with text inside of Photoshop,
you have two basic options to choose from:
| | 00:04 | one called point text and
one called paragraph text.
| | 00:08 | In this movie we'll be exploring both
of those and how you can utilize them.
| | 00:11 | I'm going to go up to the File menu and
choose New, and I'll just stick with the Default
| | 00:14 | Photoshop Size and hit OK.
| | 00:17 | In order to activate the Type tool inside of
Photoshop, simply press the letter T on your keyboard.
| | 00:22 | You can also select the Type tool from
the options over here on the toolbar.
| | 00:25 | In order to create what is called point text,
all you have to do is point your cursor, click,
| | 00:30 | and start typing.
| | 00:32 | Once you have that done, you can simply
click the check mark to commit to that change.
| | 00:37 | If you wanted to create paragraph text which
was locked inside of a box that you define,
| | 00:41 | you can simply come out, click, drag out of box,
and then you could type away inside the box.
| | 00:48 | With this selected now, I'm just going to
increase the size so you can see how it flows
| | 00:54 | inside the box, just like that.
| | 00:58 | Let me make this a little bit more readable.
Turning on the options. There we go.
| | 01:05 | So if you're doing something like a header
or something like a button that just requires
| | 01:10 | one single small line of text, you'd
probably consider doing point text, where you just
| | 01:14 | take your mouse, point, click, and go.
| | 01:17 | If you're doing something like body copy for
a blog post or a news article or something
| | 01:20 | like that, you might consider drawing a box
to constrain your text inside of the exact
| | 01:25 | dimensions that you need it to fit in.
| | 01:27 | Either way, using point text or paragraph text
are your main two options that you have available
| | 01:32 | to you inside of Photoshop.
| | 01:34 | If you go over to the toolbar and click and
hold on the Type tool, you'll see that you
| | 01:37 | also have the ability to do things like vertical type,
horizontal, and vertical type masking as well.
| | 01:44 | If you'd like more information on tools like
this, my suggestion would be to go look at
| | 01:48 | Photoshop CS6 Essential Training with Julieanne
Kost or check out Deke McClelland's Photoshop
| | 01:53 | series on lynda.com as well.
| | 01:55 | They both do a great job of
explaining all of the type tools in depth.
| | 01:59 | For the purposes of this course, we're only
going to be using point and paragraph text,
| | 02:03 | so I wanted to take some time and explain
to you exactly what those meant, so in case
| | 02:06 | you hear me refer to them later or you
didn't know what I was talking about, now you do.
| | 02:11 |
| | Collapse this transcript |
| Using text as text vs. using text as an image| 00:00 | Seeing as our typographical options are
somewhat limited when it comes to the fonts that can
| | 00:04 | be displayed on the web, you might be tempted
to simply save your text out as an image and
| | 00:09 | then place those images
accordingly in your web pages.
| | 00:12 | This is definitely a way around the
font issue that we see as designers.
| | 00:15 | But at the same time it goes against the best
practices and it can cause several serious headaches.
| | 00:21 | By using images in your designs instead of
actual text, you're not providing selectable
| | 00:25 | or searchable text for your end user;
therefore, you're limiting their ability to interact
| | 00:30 | with your content.
| | 00:31 | You're also killing the accessibility of your
site for people with disabilities and doing
| | 00:36 | irreparable harm to your SEO as well.
| | 00:39 | Not to mention the fact that if you save your
text out as an image versus using live text,
| | 00:43 | you won't be able to change or modify that
text unless you go back into Photoshop, make
| | 00:48 | your changes, then re-export
and re-upload it to the server.
| | 00:52 | That's a lot of work,
| | 00:53 | whereas if you'd just used live text, you could've just
gone in and made the change, hit Save, and you're done.
| | 00:58 | It's also been my experience that many
people don't save live text for the objects that
| | 01:01 | they are using as images on their web site.
| | 01:04 | Instead, they'll only have a
flattened JPEG or PNG file.
| | 01:07 | This means they're no longer able to edit
the text in Photoshop and they have to start
| | 01:10 | all over again redesigning
that part of their web site.
| | 01:13 | Take a look at his
example that I have onscreen.
| | 01:16 | I have this file open and I have two layers
inside: one called IMAGE and one called TEXT.
| | 01:20 | The one that's called TEXT is
actually live editable text.
| | 01:23 | So if I need to change that at any time, I just
double-click the T and I can make changes to it.
| | 01:29 | I could change it to say Image for instance.
| | 01:32 | If I wanted to do the exact same thing over
on the word IMAGE, double-clicking that only
| | 01:37 | brings up the Layer Styles.
| | 01:39 | There is no way to change
this because it's rasterized.
| | 01:41 | Sure, I can move it around and I can do things
with it, but I can't ever change the text itself.
| | 01:47 | I can't easily change the color of it either.
| | 01:49 | If I want to change the color of the other
text, I just simply double-click to highlight
| | 01:53 | it and then I can change
the color, just like that.
| | 01:57 | I can also take this live text object here and
free transform it using Command+T or Ctrl+T.
| | 02:03 | I can shrink it down, I can blow it back up,
and because it's still vector text, it maintains
| | 02:08 | the edge integrity all the
way around all of the text.
| | 02:12 | Try to do the same thing
with the image on the right.
| | 02:14 | Let's move it up. Command+T or Ctrl+T and
I'll shrink it way down. Then let's Command+T
| | 02:20 | or Ctrl+T again and blow it right back up.
It looks great, doesn't it? Not really.
| | 02:27 | So let's undo that.
| | 02:29 | Let's get back to our original.
| | 02:32 | Just go up to File and
choose Revert. There we go.
| | 02:36 | So I think by now you're getting my point.
| | 02:37 | Yes, you can use images instead of live
text in a web page and I get it that sometimes
| | 02:42 | that's the only option, but that
doesn't necessarily make it a good option.
| | 02:47 |
| | Collapse this transcript |
| Understanding web-safe fonts| 00:00 | When you're dealing with web typography, there are
certain restrictions that you have to abide by.
| | 00:05 | In this movie we'll be exploring the
web-safe fonts and some ways that you can get around
| | 00:10 | those restrictions to add more
rich typography to your layouts.
| | 00:13 | The problem that we face as designers is that
many computers, operating systems, and mobile
| | 00:17 | platforms ship with different
browsers and different font sets by default.
| | 00:22 | This means that not everyone has every font
installed on their computer, and thus our
| | 00:27 | choices become rather limited when
creating our web design projects.
| | 00:31 | Web-safe fonts by definition are fonts that
are generally installed on most computers
| | 00:35 | and operating systems, and are
considered to be "safe" for use in our designs.
| | 00:40 | We have three basic categories of web-safe
fonts; they are serif, sans serif, and monospaced.
| | 00:47 | The serif family includes the Georgia
typeface, Palatino Linotype, and Times New Roman,
| | 00:54 | while sans serif contains Arial, Helvetica,
Lucida Grande, Verdana. And the monospace
| | 01:00 | family contains Courier
New and Lucida Console.
| | 01:04 | Now, there are some other fonts that fit into
these families that might be on other computers.
| | 01:09 | These are just the basic ones that I've outlined
here that are generally installed on most computers.
| | 01:14 | All of these fonts can be used in your design
without much problems, and they should translate
| | 01:18 | just fine when they're converted
over to HTML and CSS later on.
| | 01:21 | If you're dead set on using some wild-and-
crazy font in your design, you might consider
| | 01:26 | taking a look at a service like
Google Web Fonts or Adobe's Typekit.
| | 01:31 | Typekit was purchased by Adobe in 2011, and it's one of
the most popular web font services out there today.
| | 01:37 | Typekit allows you to use their entire
library fonts on your web site by injecting small
| | 01:41 | bits of code that they provide you.
| | 01:43 | Many of the fonts that ship with the
Creative Suite are available as Typekit web fonts,
| | 01:47 | which makes it really handy.
| | 01:49 | Google Web Fonts is a nice free alternative
to Typekit, and it's continually growing in
| | 01:54 | popularity and inventory as well.
| | 01:57 | Much like Typekit, Google Web Fonts allows
you to use alternative font families on your
| | 02:01 | site by injecting small bits
of code into your web designs.
| | 02:04 | One of my favorite things about Google Web
Fonts, though, is the fact that you can download
| | 02:08 | the fonts that they show you here to your
computer and use them in Photoshop or Illustrator
| | 02:14 | or whatever program you
might be doing your designs in.
| | 02:16 | That makes it my top choice in this arena.
| | 02:19 | If you'd like more information about
Typekit or Google Web Fonts, be sure to check out
| | 02:23 | James Williamson's courses on lynda.com entitled
Up and Running with Typekit and Web Fonts First Look.
| | 02:31 | Hopefully by now you have a better
understanding of what fonts are "safe" to use on the web,
| | 02:37 | and also how you can get around those
restrictions should the need arise.
| | 02:42 |
| | Collapse this transcript |
| Inserting placeholder text| 00:00 | As you continue to design your web sites
inside of Photoshop, you're going to find a need
| | 00:04 | to use filler text every now and again.
| | 00:07 | In Photoshop CS6 we actually have the
option to insert "placeholder text" anytime we
| | 00:13 | want using a menu item.
| | 00:15 | Let's take a look how that works now.
| | 00:16 | I'm going to create a brand-new document using
Command+N or Ctrl+N on my keyboard, and I'll
| | 00:20 | just hit Default Photoshop size underneath
the Preset because it really doesn't matter
| | 00:24 | how big this is, and I'll hit Ok.
| | 00:27 | Once I do that, I am going to grab my Type
tool and then with my Type tool selected,
| | 00:31 | I'm going to click and drag out a
box, something kind of like this.
| | 00:37 | Once I do that, I can set up my type parameters.
| | 00:38 | So in this case, I am going to
set my Font to Helvetica,
| | 00:41 | I am going to set it to Regular, and I am
going to change the Font Size to something around
| | 00:46 | 12 points, and I'll change the color of it
to black so it's easy to see. Here we go.
| | 00:52 | So now I've got all that set up.
| | 00:53 | I am going to go up to Type menu. At the
bottom, I am going to choose Paste Lorem Ipsum text
| | 01:00 | and it just pastes in a paragraph that actually
says, "This is Photoshop's version of Lorem Ipsum."
| | 01:05 | You can use this in your designs to simulate
paragraphs or blog posts or any type of text
| | 01:10 | information that you might not
have the body copy for just yet.
| | 01:13 | This is a great way of simulating what actual
text is going to look like in your designs.
| | 01:18 | I could also create some space here, go
to Type > Paste Lorem Ipsum, and just paste
| | 01:22 | in another paragraph if I needed to.
| | 01:24 | You could also just copy and paste
as many paragraphs as you needed.
| | 01:27 | These live editable texts inside of Photoshop
you can go in anytime you want and you can
| | 01:32 | change that and alter it
in any way you see fit.
| | 01:35 | When you're finished, you can just check the box
here to commit to that change and there you
| | 01:38 | go: some nice Lorem Ipsum text
directly from within Photoshop.
| | 01:42 | Now if you're not using Photoshop CS6,
there are couple of other options that you have
| | 01:47 | available to you.
| | 01:48 | The first option is one of my favorites, and
if you're using a Mac, it's a great option
| | 01:52 | for you. It's called a Little Ipsum,
and you can find that in a Mac App Store.
| | 01:56 | It is a free application.
| | 01:58 | And it's right here and basically just download
it for free. And it puts a little item in your
| | 02:03 | menu bar right here and you can pick whether
or not you want 1, 2, 3, 4, or 5 words, how many
| | 02:08 | sentences as you want, or you
can pick paragraphs that you want.
| | 02:12 | And by picking this, it automatically copies
that your clipboard and allows you then to
| | 02:16 | just paste it right into whatever it is you
might be working on. It's a really great little app.
| | 02:22 | It's only for the Mac though.
| | 02:23 | I haven't found a good PC equivalent, but
if your PC person, that's okay. I've got a
| | 02:28 | couple of options for you as well.
| | 02:30 | Go over to the web browser and
take a look at baconipsum.com.
| | 02:35 | This is a really interesting site because I
can come in here and I can generate as many
| | 02:38 | paragraphs of Loren Ipsum text that I want.
The cool part about this is it's all about bacon though.
| | 02:44 | So I generate all of these different paragraphs
with words that are related to bacon in them.
| | 02:48 | So for instance, if I wanted one paragraph
here, I'd just want it all meat, and I'll start
| | 02:53 | with word Bacon, and I'll
say you Give me Bacon.
| | 02:57 | Once I do that, I get a paragraph of Lorem
Ipsum text which is just a lot of things about
| | 03:01 | bacon. And I'll copy that and I can take it
right over into Photoshop and I'll just replace
| | 03:08 | this last paragraph with the
Bacon paragraph, and there we go.
| | 03:12 | If you're not much of a bacon person, you're
more of a tuna kind of person, you can go
| | 03:15 | back over into your web
browser and go to tunaipsum.com.
| | 03:20 | And once you go to tunaipsum.com, you can select
one paragraph, Give me Tuna Ipsum, and it gives
| | 03:25 | you a nice learn Ipsum text
paragraph full of tuna-related material.
| | 03:31 | And I can go right back into Photoshop and I
can paste that in with Command+V or Ctrl+V.
| | 03:36 | So as you continue to work, you're going to find the
need to utilize some of these placeholder text methods.
| | 03:41 | If you're using Photoshop CS6, it's built
directly into the program, inside of the Type menu.
| | 03:46 | If you're not using Photoshop CS6 and you're
on a Mac, you can certainly use Little Ipsum,
| | 03:50 | which is a great tool, or if you're on a PC
where you don't want to download the application,
| | 03:55 | you can simply go to those two web sites
that I pointed out and you will be all on your
| | 03:58 | way to inserting placeholder
text into your designs in no time.
| | 04:03 |
| | Collapse this transcript |
| Creating and using character styles| 00:00 | When you're working with type in Photoshop,
chances are you're going to apply some formatting
| | 00:04 | to a certain piece of text that you're going
to need to use over and over again, especially
| | 00:08 | if you're doing something like web site
design where you have to use a lot of body copy.
| | 00:12 | In this movie, I'll be exploring the Character
Styles panel inside of Photoshop and how you
| | 00:16 | can utilize that to help
streamline your text workflow.
| | 00:19 | Let's first zoom in on this top portion of
text right here. So I'll just go ahead and
| | 00:22 | use Command+Plus or Ctrl+Plus to zoom in and I'll just
pan over to show you that right in the middle.
| | 00:29 | And so I've got this bit of text here which is
sort of like a blog post and I've got several
| | 00:33 | other examples of it down
here at the bottom as well.
| | 00:35 | And what I want to do is apply some formatting
to some pieces of this text and then use that
| | 00:40 | in other places in my design.
| | 00:41 | So I'm going to grab my Text tool first and
once I have my Text tool selected, I'm just
| | 00:45 | going to click inside of
this text box to open it up.
| | 00:49 | And then let's open up
the Character Styles panel.
| | 00:52 | That's over here in my dock.
| | 00:53 | If you don't see that, just go to Window and
select Character Styles and it'll appear for you.
| | 00:58 | Now I notice when I have this open that there
is automatically a None in the Character Styles
| | 01:03 | which is selected.
| | 01:04 | And I I'll also see this little
Plus sign, which is next to it.
| | 01:07 | The Plus sign indicates that there's a
style override, meaning that there is something
| | 01:11 | overriding what this style
is supposed to look like.
| | 01:13 | I'm going to go ahead and remove that right
off the bat, so I'm just going to clear the
| | 01:16 | override with this little button here.
| | 01:18 | When I do that, this is just going to give me
plain text just like this, and that's okay,
| | 01:23 | because this is what I want to
start from, just plain old text.
| | 01:26 | So now what I'm going to do is
just select a piece of text.
| | 01:31 | I'm going to come over into my
Swatches panel and change it to blue.
| | 01:35 | I am then going to come up and click on the
Type panel button right here to toggle on
| | 01:40 | the Character and the Paragraph panels,
and then I'm going to underline that text.
| | 01:46 | Once I have that done, I'm going to come
back over to my Character Style panel, click on
| | 01:50 | New, and it creates a new
character style for me.
| | 01:55 | With this character style here, I'm going to
double-click where it says Character Style
| | 01:58 | 1, and I'm going to call this Hyperlink.
| | 02:03 | So now it should apply the color of blue and the
Underline to whatever text I have, and I hit OK.
| | 02:08 | There we go.
So now the Hyperlink style has been created.
| | 02:11 | Anytime I want, I can go in and I can
select a piece text, like this for instance, and I
| | 02:17 | can apply that Hyperlink style and
it automatically adjusts that for me.
| | 02:23 | For the remainder of this text, if I want to set
it up where I can utilize the other properties
| | 02:27 | of this, I'll need to set up something
called a paragraph style, which would affect the
| | 02:31 | overall look and feel of this
paragraph as well as this heading.
| | 02:34 | And that's something that we're
going to explore in the very next movie.
| | 02:39 |
| | Collapse this transcript |
| Creating and using paragraph styles| 00:00 | Now we are going to continue our look at
formatting text by exploring the Paragraph Styles panel
| | 00:04 | inside of Photoshop.
| | 00:06 | So the first thing I need to do is I need to
actually start formatting some of this text.
| | 00:10 | So I am going to select this paragraph here.
| | 00:14 | With this paragraph selected,
I am going to make some changes.
| | 00:16 | I'm going to change the font, for instance.
So I will scroll up and I'll change this font
| | 00:21 | to Helvetica. Once I have that done, I am
going to make sure that it's on the regular
| | 00:26 | font weight, and let's change the Size to 12.
| | 00:30 | There we go. And I want to make sure that the color
is set to somewhat of a dark gray. There we go.
| | 00:38 | Now I've got all of this set. I am going to
go over to the Paragraph Styles. Notice Basic
| | 00:43 | Paragraph is currently being
overwritten, and that's okay.
| | 00:46 | I'm going to create a new paragraph style, and I'll
double-click on it and I'll call this Body Text.
| | 00:54 | Now underneath here, it's overriding some of
the settings that I set up before, so I am
| | 00:57 | just going to change some
of those. So Font Family,
| | 01:00 | that's going to be Helvetica,
12, and we are ready to go.
| | 01:07 | So I will hit OK, and there we go.
| | 01:10 | So now when I come in, I can actually start
a new line of text and just start typing and
| | 01:19 | it should adopt that Body Text style.
| | 01:22 | If I select that text, you are going to notice
there is a little Plus sign right there, and
| | 01:26 | if there is a Plus sign, that means there is
an override happening. So I will just clear
| | 01:28 | the override and it should automatically snap
it back to my original text, just like so.
| | 01:36 | If I want to make a change to the Body
Text style, that's pretty easy to do.
| | 01:39 | I come over here, double-click on Body Text,
and I can come into all of these different
| | 01:43 | sections, like Advanced Character Formatting to
change the width and height of the characters,
| | 01:49 | turn on different portions of OpenType features.
I can also change the Indents and Spacing.
| | 01:55 | So for instance here, if I wanted to change the
indents, I could change any of that that I wanted to.
| | 02:00 | I could add space before or after a paragraph.
In this case, I think I'll add some space after.
| | 02:08 | So let's add maybe 10 points after.
And by the way, you're seeing me use something called
| | 02:19 | a scrubby slider right here.
| | 02:20 | If you notice when I mouse over this portion of the
dialog box, it actually shows me that little hand.
| | 02:25 | That allows me to scrub by clicking and dragging to
the left or to the right to increase the value number.
| | 02:30 | Once I do that, I can move this panel out
of the way and I can start to see a preview
| | 02:34 | if I want, of what that looks like.
| | 02:36 | So here is a preview of before and after.
| | 02:39 | So it's adding some space
between those paragraphs.
| | 02:40 | I might actually add a
little bit more space to this.
| | 02:43 | Let's go back to about maybe 15.
| | 02:46 | There we go. And I will just round
that off to 15 even. Now I'll hit OK.
| | 02:57 | So now anytime I apply this paragraph style,
it's automatically going to have the Helvetica
| | 03:01 | Font, regular weight, 12 points, it's going
to be black, and it's going to have 15 points
| | 03:07 | of space after it.
| | 03:09 | If I want to use this somewhere else,
no big deal. I can come right down here.
| | 03:13 | I will commit to the change up top first.
Still using my Text tool, I'll come down and click
| | 03:18 | in this section of text.
| | 03:19 | I will grab this text
here and select Body Text.
| | 03:24 | When I select Body Text,
there might be a style override happening.
| | 03:27 | That's because I had formatting
already applied to this text. That's okay.
| | 03:29 | Just clear the override, and it should go
right to the Body Text. And if I hit Enter,
| | 03:35 | it gives me that amount of
space. So there you go.
| | 03:38 | And again, anytime I need to make a change to
Body Text, I just double-click on the word,
| | 03:43 | go in, change it up any way I need to.
| | 03:47 | Character Formatting, Open Type, Indents and
Spacing, Composition, Justification, Hyphenation.
| | 03:58 | Once you're done with that, hit OK.
| | 04:01 | Any changes you make should
automatically update inside of your document.
| | 04:04 | Let's add one more piece to
this to complete the look.
| | 04:06 | I am going to come up here and I am going to
select Sample Heading, and once Sample Heading
| | 04:11 | is selected at the top, I'm going to change
this to Helvetica. Once I have Helvetica changed,
| | 04:19 | I am going to change the size to 18.
Actually let's bump that up a little bit more, maybe
| | 04:24 | 24. Give it a nice big heading.
| | 04:26 | Once I do that, I'm going to open up the Character and
Paragraph panels. And inside of the Character panel
| | 04:33 | I don't think I need to do anything other
than maybe underline it to give it a little
| | 04:36 | bit of an underline. And then in the Paragraph
section, I am going to add some space after.
| | 04:42 | So I am just going to take
this and I will crank it up.
| | 04:47 | You see it moves everything down a little bit.
| | 04:49 | I think 10 points should be enough there.
| | 04:53 | Close that panel, go into my Paragraph Styles, and
I'll click New to create a new paragraph style.
| | 05:00 | Double-click to open it up. Paragraph Style 1,
| | 05:02 | I am going to change this to Heading.
| | 05:04 | It has adopted all my things here:
Helvetica, Regular, 24 points.
| | 05:08 | Let's change the color while we are in here.
| | 05:10 | Let's change it to a nice
orange color. Hit OK.
| | 05:16 | You notice as I do that, it
updates right there. And I'll hit OK.
| | 05:20 | Now, if I come down here to these blog
posts, select this sample text, pick Heading,
| | 05:27 | notice it's got an override
because of the previous formatting.
| | 05:29 | That's okay; just clear it and it
goes right back to where it should.
| | 05:32 | I am going to shrink this box up just a tad.
| | 05:37 | Hit the check mark in the Options bar to commit,
pan down, grab this Heading. Again, I will
| | 05:43 | remove the style override and
apply the Heading, and there we go.
| | 05:49 | So now instead of having to go in and
individually format each one of these, I've gone through
| | 05:53 | and formatted the paragraphs
using my Paragraph Styles.
| | 05:56 | I also added some hyperlinks using some of
the character styles that I created, and it
| | 06:01 | is just a great way for you to streamline
your workflow when you are working with text.
| | 06:05 | So take some time, set up your own paragraph
and character styles, and see if it doesn't
| | 06:08 | help you get where you are
going a little bit faster.
| | 06:13 |
| | Collapse this transcript |
| Creating editable 3D text| 00:00 | There may come a time as you're working
with text inside of Photoshop that you want to
| | 00:03 | create something that's a little
bit out there, something like 3D.
| | 00:07 | In previous versions of Photoshop, like CS3
and CS4, we had to mimic 3D in a way that used
| | 00:12 | layer styles and extra copies of
a layer and a bunch of trickery.
| | 00:16 | In Photoshop CS5, they introduced something
called 3D Repousse, which allowed us to create
| | 00:20 | 3D text, but once we rendered the text, it
was pretty much useless because we couldn't go in
| | 00:24 | and change it anytime we want it to.
| | 00:26 | In Photoshop CS6, we now have the ability to
create what's called a 3D extrusion on our text,
| | 00:31 | and that allows us to then edit the text
after the fact, even after we've rendered it.
| | 00:36 | It's pretty cool.
Let's take a look.
| | 00:38 | I'm going to reset my workspace really
quick to my Web Design workspace.
| | 00:42 | You could also just work from the Essentials
workspace. No big deal. And I'm going to make
| | 00:45 | sure that I have the text layer
selected that's THE FUTURE IS NOW...
| | 00:49 | You can open up the layer group 728 x 90
and find that text layer right there.
| | 00:53 | Once I have that text layer selected, I'm
going to go to the 3D menu. And this is something
| | 00:56 | that's only available in
Photoshop CS6 Extended.
| | 01:00 | So if you're working with Photoshop
CS6 regular, you won't have this option.
| | 01:04 | So I'm going to select New 3D Extrusion from
Layer and that's going to pop up with a box
| | 01:08 | saying that I'm about to crate a 3D layer,
asking me if I want to switch to the 3D workspace.
| | 01:12 | I'll hit Yes just so you
can see what it looks like.
| | 01:15 | So basically I get all these controls over
here to set up how the camera works, where
| | 01:18 | the text is in relation to me, et cetera.
| | 01:21 | And so right now I'm just going to do a
simple rotation on this. I'll click and drag to
| | 01:24 | rotate it around as if it's sort
of falling off the page there.
| | 01:29 | And once I'm done with that positioning,
I'll switch to my Move tool and I'll come out here
| | 01:32 | and I'm just going to click somewhere
on the text so that 3D mesh is selected.
| | 01:36 | You'll notice that little blue line
appears around the outside of it.
| | 01:40 | Once I have that selected, I can then grab
my Type tool, come out, and I can right-click
| | 01:45 | and choose Edit Type.
| | 01:47 | It jumps into a temporary document that allows
me to just grab a hold of the type and change
| | 01:51 | it. And you have to be sure to click directly
on the type mesh so this blue line appears;
| | 01:55 | otherwise, you won't be able to edit the text.
| | 01:58 | So if I want it to say, instead of The FUTURE IS
NOW... ROBOTS ARE COOL with an exclamation
| | 02:05 | point--I know that's hard to see because it's
white text, but I'll just do that right there.
| | 02:10 | Then I'll save it, and close it.
| | 02:12 | I come back into this and ROBOTS ARE COOL!
is now the 3D text layer.
| | 02:17 | Of course this is unrendered and still kind
of wonky because I twisted it a little bit
| | 02:21 | and all that good stuff, but if you take
some time to learn about 3D, you can create
| | 02:25 | some really amazing compositions that are
now more flexible than ever since they have
| | 02:29 | this new editable 3D Text
tool inside of Photoshop.
| | 02:33 | If you want more information about the 3D
features in Photoshop CS6, my suggestion would
| | 02:38 | be to go check out Deke McClelland's
Photoshop CS6 New Features course.
| | 02:41 | Deke has a great movie inside of there that
explains the full breadth of the new 3D tools
| | 02:46 | inside of Photoshop CS6, and that's
available in the lynda.com online training library.
| | 02:51 |
| | Collapse this transcript |
|
|
7. Using Layer StylesUnderstanding layer styles| 00:00 | One of the easiest and most effective ways
to add special effects to your artwork inside
| | 00:05 | of Photoshop is to utilize layer styles.
| | 00:08 | Layer styles are pretty cool because of the
fact that they are applied nondestructively
| | 00:11 | to the layer that they're affecting and
they can be changed, modified, or even deleted
| | 00:16 | and taken away any time without affecting
the underlying pixel values whatsoever.
| | 00:21 | In this movie, we'll be exploring layer styles
and how they can help us add a little something
| | 00:24 | extra to our designs.
| | 00:27 | I'm going to start off on this file right
here that I'm looking at, and you can see here
| | 00:31 | that I've created a tablet mockup that has a lot
of depth and three-dimensional qualities to it.
| | 00:36 | But in reality, this is nothing more than a few
basic shapes with layer styles applied to them.
| | 00:42 | If I look at the original file, you can see
here that it's just very, very basic. Nothing
| | 00:47 | really exciting going on here.
| | 00:49 | There's just squares and rectangles.
| | 00:51 | So how do I go from this to this?
| | 00:54 | That's the beauty of layer styles.
| | 00:56 | So let's jump back over and let's see if
we can re-create this on the original file.
| | 01:01 | I'll jump back over here and I'm going to start
on the tablet itself, down here at the bottom.
| | 01:05 | In order to add somewhat of a bevel to
this, I'm going to first add a layer style.
| | 01:10 | I'm going to do that by either double-clicking
to the right-hand side or coming down to the
| | 01:14 | bottom and choosing the small fx icon. And then I
can go in and I'll choose something like Stroke.
| | 01:20 | Once I'm inside of this dialog box, I can set
different properties for the layer styles themselves.
| | 01:25 | In this case, I think a 3-pixel stroke
works okay, and the color needs to be sort of a
| | 01:31 | lighter gray, and I'll hit OK.
| | 01:34 | Now it's going to be difficult to see this
because it is a dark tablet on a light background.
| | 01:38 | But if I were to switch this to a dark
background, you'd be able to see the edge a little bit
| | 01:41 | better, and it would create almost a three-
dimensional appearance. Now I'll hit OK.
| | 01:46 | When I apply that, you're going to notice
a small fx icon appears next to the layer,
| | 01:50 | and underneath that you get Effects and the
name of any effects that you currently have
| | 01:54 | applied to that layer.
| | 01:55 | You also have eyeballs
next to each one of these.
| | 01:58 | If you toggle the eyeball next to the word Effects,
it turns off all of the layer style visibility.
| | 02:03 | If you turn off the eyeball next to the
individual effect names, it only disables that style.
| | 02:09 | So for instance, if I have multiple effects
applied to this, I could uncheck individually
| | 02:13 | or disable them all simply by
clicking those two eyeballs.
| | 02:17 | If you don't want to see these--because they
do clutter up the Layers panel don't quite
| | 02:20 | a bit--you can click the small icon
here and it'll fold it right back up.
| | 02:23 | So now let's move on to the Home button.
| | 02:25 | The Home button is just a circle
with a rounded rectangle on top of it.
| | 02:29 | What I want to do is create a three-dimensional
appearance to the Home button so that it looks
| | 02:33 | as though it's recessed
into the tablet somewhat.
| | 02:36 | In order to do that, I'm just going to double-
click out to the right of where it says Ellipse 1.
| | 02:41 | And once I do that, I'm going
to choose Gradient Overlay.
| | 02:45 | Inside of Gradient Overlay, it automatically
applies a black-to-white gradient on the top
| | 02:49 | of this circle for me.
| | 02:51 | In order to edit that gradient, I come right
here and I'll click on the Gradient Editor.
| | 02:56 | Inside of the Gradient Editor, I'll take this and
I'll just drag this to the left, to 50%, and
| | 03:01 | I'm also going to change the color to a gray.
| | 03:07 | Then I'll take this slider, drag it
in till it meets it, right about there.
| | 03:14 | And now it's pretty much finished,
although I need it to be flipped over.
| | 03:17 | So in order to do that, I'll just drag
these until they switch positions, like so.
| | 03:22 | If you have a little bit of trouble
lining these things up, that's okay.
| | 03:25 | You can just hit OK here and then check the
Reverse box right there and it will automatically
| | 03:29 | reverse the direction of the gradient for you.
| | 03:32 | Once I hit OK, it takes me back out into the
document, and if I click away from this, you'll
| | 03:37 | be able to see it.
| | 03:38 | Now it looks as though that's a glossy button
that's sort of embossed into the tablet. Pretty neat.
| | 03:44 | I'll collapse up the Home
button. Let's continue to work.
| | 03:47 | I'll select the screen. And the first thing
I'm going to do is add sort of a beveled edge
| | 03:51 | at the outside, and I can do
that simply by adding a stroke.
| | 03:54 | So I'll double-click to the right-hand side.
| | 03:57 | I'll click on Stroke.
| | 04:00 | Inside of the Stroke, I'm going to back the Size
down to 1. I'll change the Color to a dark gray.
| | 04:09 | Now I want to make it look as though this is sort of
recessed or pressed back into the tablet as well.
| | 04:14 | In order to do that,
I'll click on Inner Shadow.
| | 04:17 | One of the cool things about the shadows
inside of Photoshop is the fact that you have the
| | 04:20 | ability to actually bring them out here
and control them by clicking and dragging.
| | 04:25 | Now I want to come over here and turn
off this Use Global Light checkbox.
| | 04:28 | I'm doing that so that I don't affect the overall
appearance of any of the other effects in my document.
| | 04:33 | Once I uncheck that box, I can come out here and I
can simply position the shadow anywhere I want.
| | 04:37 | See, if I drag it all the way over,
you can kind of see the shadow.
| | 04:41 | So what I like to do is drag it out where I
can actually see it. Then I work with the
| | 04:45 | Size and maybe the Opacity a little bit.
| | 04:49 | And then when I'm finished, I just drag it right
back up until it fits right where I need it to go.
| | 04:54 | And if you need to increase the
Size a little bit more, that's okay.
| | 04:57 | The higher the size, I think the more it looks as
though it's pressed down into the tablet itself.
| | 05:02 | So I'm going to actually shrink
that back just a tad. There we go!
| | 05:05 | Now we'll hit OK.
| | 05:07 | And so once I do that, I'll click away from
it so we can kind of see the finished product.
| | 05:10 | And there you have sort of a beveled edge
at the outside, and then that shadow really
| | 05:14 | makes it look as though it's
pressed down into the tablet.
| | 05:17 | Now finally, we have this layer called Gloss,
| | 05:20 | and the Gloss layer is simply a shape
layer that has no fill and no stroke.
| | 05:25 | It's completely transparent at the moment.
| | 05:27 | And what I want to do is fill it with a gradient to
add somewhat of a glossy appearance to the tablet.
| | 05:32 | So in order to do that, I'm going
to double-click out to the right.
| | 05:36 | I'm going to add another gradient overlay.
| | 05:38 | You can see when I do that,
it automatically adds a somewhat glossy appearance.
| | 05:41 | And I'm going to come into the Gradient Editor.
Click. I'm going to select this black color
| | 05:48 | stop here, and you can do this one of two ways.
| | 05:51 | You can either leave this as black or you
can click the stop on top of it and change
| | 05:56 | the Opacity to 0.
| | 05:59 | That way this fades from
white all the way to transparent.
| | 06:02 | So if you were to change the color of the
tablet, for instance, from black to white
| | 06:05 | or whatever you might change it to,
the gloss still fades on top of it without actually
| | 06:09 | showing the black color that you had.
| | 06:11 | So from white to transparent. I'm also going
to back down the opacity of this white stop
| | 06:15 | over here, so I'll select this, and tone that
back, maybe to like 25%, something like that.
| | 06:24 | And you can make this as bright or as dark as you
want it to be. Totally up to you. Hit OK and hit OK.
| | 06:30 | And so now I have essentially re-created this
tablet mockup using nothing but layer styles.
| | 06:37 | As you can see, they're just basic shapes
set on top of each other in different ways
| | 06:41 | with different layer styles applied, and I've
created a three-dimensional product in just
| | 06:45 | a few short and easy steps.
| | 06:47 | So as you continue to create graphics inside
of Photoshop, play around with the layer styles
| | 06:50 | and learn your way around them and all that
they do so that you can take advantage of
| | 06:54 | them and nondestructively alter your images
and turn them into something that you might
| | 06:58 | not have thought possible before.
| | 07:03 |
| | Collapse this transcript |
| Creating and using drop shadows| 00:00 | The drop shadow is one of the most popular
and widely used effects in all of design.
| | 00:04 | It helps make objects seem more organic, and
it simulates depth in our designs, giving them
| | 00:09 | a more realistic feel.
| | 00:10 | That's a huge trend in web design today:
having things that feel like they're almost coming
| | 00:14 | at you off of the screen.
| | 00:16 | In this movie I'll explore how to add
drop shadows to your images in Photoshop.
| | 00:20 | The first thing I'm going to do is
go up and create a new document.
| | 00:22 | Go to File > New and I'll create something that's,
let's say 500 pixels by 500 pixels, and hit OK.
| | 00:30 | And so I'm going to come down and grab one
of my Shape tools, this time the Rectangle
| | 00:34 | tool. And I'll switch the Color to just be
white for now. And I'll just click and draw
| | 00:42 | out a rectangle, like so.
| | 00:45 | With that rectangle out on the canvas, I now
want to switch to my Move tool, and then I'm
| | 00:50 | going to use Command+A or Ctrl+A to select
the entire canvas and then I'll use the Options
| | 00:54 | bar to center that shape.
| | 00:57 | Now chances are you can't see that
shape, because it's white on white.
| | 01:00 | So what I want to do is create a drop shadow
behind it to create a little bit of separation.
| | 01:04 | In order to do that, I'm going to come to
the right-hand side and double-click and I'm
| | 01:09 | going to choose Drop Shadow.
| | 01:11 | Immediately when I do that, you're going to
start to see that this almost looks like a
| | 01:14 | small piece of paper
floating above the background.
| | 01:18 | Now, one of the interesting things about the
layer styles inside of Photoshop is the fact
| | 01:23 | that you can come over here and start to
manipulate them on your own if you want to.
| | 01:27 | I'm going to turn off this checkbox that says
Use Global Light, and that's because I don't
| | 01:32 | want to affect any other effects
that are inside of my document.
| | 01:35 | And then I'm just going to come over and I'm
going to drag this over until it's kind of
| | 01:39 | behind, like that. And you can
manipulate this any way you want.
| | 01:43 | You can drag it as far down or
as far up as you want it to go.
| | 01:46 | In this case, I'll just kind
of center it right behind it.
| | 01:49 | I'm going to increase the Size a little bit,
| | 01:52 | just give it a little bit
more depth, and there we go.
| | 01:54 | It seems almost like a piece of paper
sitting on top of a background there.
| | 01:58 | And then when I'm
finished with that, I can hit OK.
| | 02:02 | Anytime I want to get back in and change
this effect--like let's say the client looks at
| | 02:05 | it and they are like "no, that doesn't look
realistic; I think the shadow needs to be
| | 02:08 | more offset towards the bottom,"
| | 02:09 | that's okay. I've used a layer style, so now
I can go back to Drop Shadow, double-click.
| | 02:15 | It takes me right back, and I can simply come
back in and adjust like this. Hit OK. So now
| | 02:21 | it looks like it's little bit more 3D perhaps.
| | 02:24 | Now, anything that I've set on top of
this, this could almost be like a frame.
| | 02:27 | So if I grabbed another Rectangle tool and
just kind of drew inside like this and then
| | 02:34 | changed the color to let's
say a blue, there we go.
| | 02:39 | Now, that almost looks like some sort of frame
around the outside of that, and then this blue
| | 02:43 | object is coming at me off of the screen.
| | 02:46 | So just with one single layer style, I've
simulated some depth in my design and made it feel a
| | 02:50 | little bit more interesting and added a little
bit of pop to a graphic that would otherwise
| | 02:54 | be really boring.
| | 02:56 | So explore the possibilities of
simple little effects like drop shadows.
| | 02:59 | You'll be amazed at what
it can add to your designs.
| | 03:01 | And then what's even better is when you hand
this over to a developer, most of the effects
| | 03:05 | like drop shadows can be applied through CSS
these days, which means you're not going to
| | 03:09 | have to hand them this complex object.
| | 03:11 | You can just hand them a plain object,
| | 03:12 | they'll apply the shadow with their CSS,
and your image will load even faster than you
| | 03:16 | thought it would before.
| | 03:17 | It's really neat, and it's a great way to add
just that little something extra that your
| | 03:21 | design might have been lacking otherwise.
| | 03:26 |
| | Collapse this transcript |
| Creating better bevels| 00:00 | When it comes to designing things like
icons and buttons, you have to be on your game,
| | 00:04 | and your designs have to be "pixel perfect."
| | 00:08 | Therefore it's imperative to get things like
bevels and 3D extrusions and things like
| | 00:12 | that to look as good as possible. And there
are some layer styles that are built into
| | 00:15 | Photoshop that are meant to do that
right off the bat, like the Bevel and Emboss.
| | 00:19 | But those don't really give me the
finite level of control that I'm looking for.
| | 00:23 | So therefore, I have to utilize
other layer styles to achieve this.
| | 00:27 | Let me show you what I mean.
| | 00:28 | I am going to create a new document.
And it really doesn't matter how big this is.
| | 00:32 | I am just going to show you a demonstration.
| | 00:33 | So I am going to do 400 pixel 100 pixels tall.
| | 00:38 | That should be big enough. And I'll grab my
Shape tool and select the rectangle, and I
| | 00:45 | am just going to draw out a rectangle, something like this.
| | 00:48 | So let's pretend that we're drawing a button.
| | 00:50 | I am going to come over to the Layers panel
and double-click, and I'll give this an orange
| | 00:54 | color, something like that.
| | 00:56 | There we go. And now I am going to zoom in.
| | 00:58 | Anytime you're working on something small,
it's always best to work on it on a large scale.
| | 01:03 | Since this is vector, it will be easy to see everything.
| | 01:06 | I am going to come over here to the right-
hand side of the rectangle that I've drawn and
| | 01:10 | I am going to double-click to the right-hand side.
| | 01:13 | When I do that, I am going to turn on the
traditional Bevel and Emboss. Watch what happens.
| | 01:17 | When I do that, I get the sort of halo-looking
thing here and a dark edge around the bottom,
| | 01:23 | and it looks very generic.
| | 01:24 | It looks almost like something you see on an
old GeoCities homepage or something like that.
| | 01:29 | So I could come in and make changes to this,
like shrinking up the depth and decreasing
| | 01:34 | the size and softening it up or sharpening it
down, but I really don't like these controls
| | 01:39 | because I'm in here having to drag sliders
around while simultaneously looking over to
| | 01:43 | the left, controlling the angle of the
shading with this little orb-looking thing here.
| | 01:48 | It just doesn't suit me.
| | 01:50 | So, as opposed to using Bevel and Emboss,
I've learned to use things like Inner Shadow
| | 01:55 | and Inner Glow to achieve to
achieve the same type of effect.
| | 01:59 | So the first thing I am going to do here is I
am going to create a stroke around the outside,
| | 02:03 | and I will set this to an inside stroke, just so it
snaps to the corners all the way around the outside.
| | 02:09 | I am then going to change the color of this,
and I will sample this orange to get a base,
| | 02:14 | and then I will just kind of click to make it darker.
Something kind of like that. There we go! Hit OK. All right!
| | 02:21 | So now it still just looks like a rectangle with a
border on the outside of it, but watch what happens.
| | 02:27 | I'm going to choose Inner Shadow.
| | 02:29 | When I choose Inner Shadow, there's a couple of
things I can do to make this look like it's beveled.
| | 02:34 | I'll go up to the Blend mode and change it
to Normal, then I'll click on the color, and
| | 02:39 | I'll sample the orange color here, and then I will pick
a lighter version of that, something like this. Hit OK.
| | 02:46 | Now, let's change the Choke to 100.
| | 02:52 | When I do that, see that nice
crisp line that comes in right there?
| | 02:55 | I am also going to increase the
Opacity to 100% so I can see it all the way.
| | 03:00 | And now, since this is a shadow, I can come in
here and I can just click and move it around.
| | 03:05 | First, I will turn off the Global Light.
Notice that snaps back to this little L shape.
| | 03:10 | And now I can just position
this wherever I need it to go.
| | 03:14 | So if I need that to be something like that.
| | 03:17 | Now, I can decrease the size as well.
| | 03:21 | I'll decrease the size to 1 and then
I can bring that out just like that.
| | 03:26 | See how that creates that
little beveled edge right along there?
| | 03:30 | I can also throw on an Inner Glow if I wanted to,
to add a little bit more depth right there.
| | 03:35 | So if I throw in the Inner Glow, change its
Blend mode to Multiply, change its color to
| | 03:44 | something like the orange, change its Choke
to 100, see how it's coming out right there?
| | 03:53 | Then I can change the Size a little bit,
something like that tucks it back underneath, and I
| | 03:58 | might even make that darker.
There we go, something like that.
| | 04:06 | So now, I've got this beveled edge around
the outside and also this background, so it
| | 04:10 | looks like it's almost set outside
of that background a little bit.
| | 04:13 | If it's too dark, you can adjust the Opacity.
| | 04:15 | You can kind of dial it back, then you hit OK, and
there we have our nice three-dimensional-looking button.
| | 04:23 | If you needed to increase or decrease the
bevel, you can do that simply by adjusting
| | 04:26 | the shadow and the glow.
| | 04:27 | Now, let's add some text. Grab the Type tool.
And if I try to type inside of here, it's
| | 04:33 | just going to type inside the shape.
| | 04:35 | So what I need to do is click outside of that
to start the text. And I will just type
| | 04:38 | in "CLICK HERE." And I'll move it to the center,
something like that, and Command+T or Ctrl+T
| | 04:46 | and I will blow it up.
| | 04:48 | Okay, it doesn't matter what font
you're using or anything like that.
| | 04:52 | Now I'm going to
double-click out to side of that.
| | 04:55 | I am going to add a drop shadow.
| | 05:00 | This time switch the Blend mode to Normal,
change the color to the same dark color that
| | 05:06 | I have on the outside, uncheck Global Light,
change the Angle to something like -90, change
| | 05:16 | the Size to 0, and then just dial back the
Distance, something like that. 1 pixel might be enough.
| | 05:24 | There we go, and hit OK.
| | 05:27 | So now it almost looks
like that is carved into the button.
| | 05:31 | If I change the font to something a little bit
more bold--I will change it to Helvetica Bold--
| | 05:34 | you'll be able to see it a
little bit easier. There we go!
| | 05:37 | See the dark edges around the outside?
| | 05:38 | Now, if I zoom out, I have a nice clean three-
dimensional looking button with text that's inset inside
| | 05:46 | of it, and I did that all with
layer styles. They can all be changed,
| | 05:49 | they can all be altered, and they can all
be thrown away at a moment's notice because
| | 05:53 | as we know, layer styles are
nondestructive edits that we perform to our images.
| | 05:58 | So, the next time you need to create something
that looks a little bit more three-dimensional,
| | 06:02 | try utilizing Inner Shadows and Glows as
opposed to the actual Bevel and Emboss.
| | 06:05 | You will be amazed at the amount
of precision and accuracy you get.
| | 06:10 |
| | Collapse this transcript |
| Simulating metallic textures| 00:00 | A big trend in the web design world right
now is realism, things that are drawn by hand
| | 00:05 | but actually look like an actual
object or something like that.
| | 00:09 | And metallic textures
are really big on the web.
| | 00:12 | You see this all the time in Apple's iOS, the
little knobs and buttons that you click on.
| | 00:16 | A lot of people are using it for
navigational components in their sites.
| | 00:19 | And in this movie, I'm going to go over how to build
your own metallic textures by using layer styles.
| | 00:23 | I'm going to create a new
document by going to File > New.
| | 00:28 | Once I'm inside of the New Document dialog box,
I'll set this to be about 600 x 600. Hit OK.
| | 00:34 | I'm then going to grab my Ellipse tool
inside of my shapes and I'll just hold down Shift
| | 00:39 | to draw out a circle.
| | 00:41 | You can draw any type of shape you want.
| | 00:42 | So just most of the time, you see the circle
as an example for this, sort of like a knob
| | 00:47 | or a button that you would press.
| | 00:49 | And so mine is white right now;
you can make this any color you want.
| | 00:52 | I'll make it a dark gray so we can actually
see what's going on. So it's just a circle.
| | 00:56 | And so what I want to do is add a layer style to
this that simulates that it's a metallic texture.
| | 01:01 | So I'll go up to the right-hand side of this
layer, double-click, and I'm going to choose
| | 01:05 | Gradient Overlay.
| | 01:07 | Inside of the Gradient Overlay, I want to
first change the Style from Linear to Angle.
| | 01:14 | I get something that looks like that.
| | 01:16 | Then I'm going to pick the Gradient Editor
by clicking right on the gradient itself.
| | 01:20 | Inside of the Gradient Editor, I'm just
going to come in and start clicking where I see
| | 01:23 | this little hand.
| | 01:24 | Click, all the way down. I'm just going to
create several different stops all the way across.
| | 01:30 | Now in my Swatches panel, which you need to
make sure you can see--if you can't see your
| | 01:34 | Swatches panel, then just cancel out, bring
your Swatches panel out where you can get
| | 01:38 | to it, and then come back
in here and do this again.
| | 01:41 | I've got my Swatches panel up here.
| | 01:43 | I'm just going to start selecting these stops,
and then adding neutral-gray colors to this.
| | 01:48 | It really doesn't matter which ones you pick
necessarily; I'm just going through and picking randomly.
| | 01:55 | Get a dark one in there, throw a really
light one in the middle, throw a really dark one
| | 02:02 | in there, light one like this.
| | 02:07 | And you can add more to this if you want.
| | 02:11 | It helps to add a little bit to the realism.
| | 02:13 | You can see the more I add, the better
it looks. Something kind of like that.
| | 02:19 | And if you wanted to throw in some
different colors here and there, you could do that.
| | 02:25 | I would stay with a
neutral-gray palette though. There we go!
| | 02:30 | So that looks pretty good. And I've added
several different stops all the way across, and I'm
| | 02:34 | just using different metallic
colors up here in the Swatches panel.
| | 02:39 | Now I'm going to go ahead and call
this Metal, and I'm going to click Save.
| | 02:47 | This is going to save this in my gradients
so I can get back to it anytime I want.
| | 02:50 | And I'll just call this Metal,
hit Save, and I'll hit OK.
| | 02:56 | So now that is there. And so if I want to
really simulate this metal look, I'll add
| | 03:01 | a stroke to this. And the stroke color, I
want this to be sort of a darker gray, and I'll
| | 03:09 | set it to Inside.
Increase the size quite a bit.
| | 03:15 | Now I'll click on Inner Shadow
to give it a little bit of depth.
| | 03:18 | If you want to create a little bit shine
inside of here, you can change the blend mode of
| | 03:22 | the shadow to Normal, change the color to
white, then uncheck your Use Global Light
| | 03:28 | box and kind of drag it in, like so,
| | 03:32 | change your Size to 0, and that will create sort of
like a beveled edge around the outside of that.
| | 03:38 | Then we hit OK and there we go!
| | 03:41 | Now if you wanted to add something to the
middle of this--maybe it's becoming an icon
| | 03:44 | now--I can come over, I can grab a custom
shape tool, and I'll just go up to my shapes,
| | 03:50 | and if you want to load all the shapes in
Photoshop, just go up here, click All, and hit OK.
| | 03:56 | It'll load every shape that's available to you.
| | 04:00 | And so I'm just going to
grab some sort of shape here.
| | 04:03 | Let's grab a question mark.
And I'll draw that out so that it's right there.
| | 04:10 | And then I'll just kind of
move it towards the center.
| | 04:15 | I'll change the color to be a really dark gray,
something like that, and then I'll double-click
| | 04:22 | and I'll add a drop shadow to this.
| | 04:25 | But the drop shadow, I'm going to change the
mode to Normal, change the color to white.
| | 04:30 | See what I'm going for here?
| | 04:31 | It looks like it's carved in.
| | 04:33 | Change the Size to 0, and we'll dial back the
Distance just a tad bit, and maybe I'm going
| | 04:40 | to take down the Opacity just a little.
| | 04:43 | Distance down to 2. Hit OK.
| | 04:46 | Now click the Background
layer to see the final product.
| | 04:49 | You see that I've created something that
looks very metallic, very realistic in just a few
| | 04:53 | short and easy steps.
| | 04:54 | So now I've got that gradient saved.
| | 04:56 | If I wanted to save that layer style, I could
also do that, and that way I could apply that
| | 05:00 | instantly to anything that I wanted
to in any of my designs going forward.
| | 05:05 | And I'll cover how to save
layer styles in the next movie.
| | 05:10 |
| | Collapse this transcript |
| Saving and applying layer styles| 00:00 | As you continue to create layer styles
inside of Photoshop, undoubtedly you're going to
| | 00:03 | want to save those so that you can then apply
them to other pieces of artwork that you have
| | 00:07 | in other documents.
| | 00:09 | In this movie, I'm going to be showing you
how to save your layer styles and then how
| | 00:12 | to apply them to other objects that might not
even exist in the document that you're working on.
| | 00:17 | The first thing we need to do
though is save the layer style.
| | 00:19 | So I have a series of effects applied to
this circle in the background, and it's Ellipse
| | 00:23 | 1 in my Layers panel over here.
| | 00:25 | So what I want to do is
save this as a layer style.
| | 00:28 | In order to do that, I can go just by double-
clicking on the fx icon in the Layers panel, into my
| | 00:32 | Layer Style dialog box,
and I can choose New Style.
| | 00:36 | When I choose New Style, I can set it to be
called anything I want. In this case, I'll
| | 00:40 | call it Metal, and I'll hit OK.
| | 00:44 | When I do that the style is now
saved to my Styles panel. I'll hit OK.
| | 00:48 | If I go over to my Styles, drag those out
where you can see them, I now have this new
| | 00:53 | style right here. This style is called Metal.
| | 00:57 | And let's create a new document.
| | 00:58 | This document I'll make 500 x 500. And I'll
just grab another ellipse, draw it out, and
| | 01:06 | when I do that, I'll come over and I'll click
the Metal layer style and it instantly gives
| | 01:11 | me that same metallic texture, even the bevel
around the outside and the stroke around that
| | 01:16 | as well, saving me a ton of time.
| | 01:19 | Now I can also collect several layer styles
inside of this box and I can save those out
| | 01:25 | and then allow people to load them themselves
or distribute them to coworkers or whatever
| | 01:30 | I might want to do with them.
| | 01:32 | So let's say that I wanted to save this
out as its own layer style by itself.
| | 01:34 | I'm going to remove all the
default layer styles from here.
| | 01:37 | I'm going to do that by hovering over, holding
down my Option or Alt key, and then clicking.
| | 01:43 | You'll notice they just go away.
| | 01:44 | I'm continuously holding down my Alt key, or my
Option key on the Mac, and just clicking with my mouse.
| | 01:50 | There we go. We'll leave that right there.
| | 01:53 | I'll go up to this panel menu
and I'll choose Save Styles.
| | 01:58 | I can save this out to the
Desktop as metal_style.asl. Hit Save.
| | 02:06 | Now, even if I delete this, just like that,
anytime anybody wanted to use that, or even
| | 02:11 | if I wanted to use it, I can come back up to
this panel menu, choose Load Styles, select
| | 02:17 | metal_style.asl, open it.
| | 02:20 | There it is, right there.
| | 02:22 | So even if I didn't have any effects
applied to this ellipse, I could select it and it
| | 02:28 | instantly changes it back.
| | 02:30 | So as you continue to develop your own layer
styles here inside of Photoshop, just remember
| | 02:34 | that you should always save them out as your
own layer styles so that you can then load
| | 02:38 | them on other computers, give them to coworkers, or
use them in other documents that you might have.
| | 02:43 | It's a great way to ensure that you're
working faster and smarter, and not harder.
| | 02:48 |
| | Collapse this transcript |
| Turning layer styles into independent layers| 00:00 | Even though layer styles are a great way to
add flexible effects to our artwork inside
| | 00:04 | of Photoshop, occasionally we need to be
able to manipulate them beyond the scope of
| | 00:08 | what they're able to do out of the box.
| | 00:10 | In this movie, I'll be exploring how to turn
layer styles into their own editable layers
| | 00:14 | so that you can then manipulate
them to extend their capabilities.
| | 00:17 | The first thing I'm going to do is select the
Rectangle1 in this document that I'm working on.
| | 00:22 | That's the white frame in the background.
| | 00:25 | And I want to explore what layer styles are
actually applied to it; in this case it's
| | 00:29 | only a drop shadow.
| | 00:30 | And basically what I want to do is I want
to edit this drop shadow so that to sort of
| | 00:34 | droops down in either corner to make it look
like this page is sort of curling at the edges.
| | 00:39 | That's impossible to do with the
default layer style that I have.
| | 00:42 | But I can turn this into its own
layer and achieve the same effect.
| | 00:46 | So, with the layer selected that has the
layer style you want to turn into its own layer,
| | 00:51 | go up to the Layer menu, go down to
Layer Style, and choose Create Layer.
| | 00:58 | Photoshop might warn you that some aspects of
the effects cannot be reproduced with layers,
| | 01:02 | and that's okay. Drop shadows
are not one of those cases.
| | 01:06 | So hit OK and now in your Layers panel, you should
see Rectangle1 and also Rectangle1's Drop Shadow.
| | 01:13 | If I select Rectangle1's Drop Shadow, I can
then do Command+T or Ctrl+T or Edit > Free Transform
| | 01:19 | to bring up the control
handles around that specific effect.
| | 01:23 | Now in my Options bar I can select the Warp
button and I can come down and I can just
| | 01:30 | peel down the edge here, and peel down the edge
here and tuck up the middle just a little bit.
| | 01:38 | There we go.
| | 01:39 | If it's too much, you can just drag it back up.
| | 01:43 | I'm exaggerating this just to make it a little
bit more obvious. And then I will switch back
| | 01:48 | to Free Transform mode by
clicking on the Warp tool again.
| | 01:51 | I may even shrink this in just a little on the
sides, and maybe I will shrink it up a little bit.
| | 01:58 | There we go, and I'll hit Enter or
Return to commit, and there we go.
| | 02:02 | So now it looks as though the edges of this
are actually curling up a little bit, creating
| | 02:07 | some space between the edge and whatever
this is sitting on, maybe a desk or a table or
| | 02:11 | something like that.
| | 02:12 | And I did that simply by taking the default
layer style, converting it to its own layer,
| | 02:17 | and applying a little bit of a warp.
| | 02:18 | So you can actually extend the capabilities
of these layer styles by doing that each and
| | 02:22 | every time, and doing things you
never really thought possible.
| | 02:28 |
| | Collapse this transcript |
|
|
8. Creating a Web Site MockupStarting with a wireframe| 00:00 | Before beginning any web design project,
it's good practice to start with a wireframe of
| | 00:04 | the project first.
| | 00:06 | This gives you a roadmap to follow as you
start to aggregate content and create your
| | 00:10 | finished mockup that you'll
be delivering to your client.
| | 00:12 | Use the wireframe to determine things like
margins and positioning of major elements
| | 00:17 | like logos, graphics, and background elements.
| | 00:19 | If you're unfamiliar with creating wireframes,
it'll be a good idea to go back to chapter
| | 00:23 | 5 of this course and go through those
movies prior to jumping into this chapter.
| | 00:27 | I've created a very basic wireframe for us
here, and it will serve as the backbone of
| | 00:32 | our design going forward in this chapter.
| | 00:34 | I also have opened a finished project for this
robot toy company site that we're going to build.
| | 00:39 | Notice that it has the same basic structure
as the wireframe, and it also adheres to the
| | 00:43 | margins and content placements that
I outlined in the wireframe as well.
| | 00:46 | Throughout this chapter, we'll be building
up to this finished product and by the end,
| | 00:49 | you'll have a full working mockup
just like the one you see here.
| | 00:53 | Let's get started.
| | 00:58 |
| | Collapse this transcript |
| Organizing page structure| 00:00 | Once I have my wireframe open inside of Photoshop,
the first thing I do is I start to create page structure.
| | 00:06 | I know that I'm going to be mocking up more
than one page because inevitably my web sites
| | 00:09 | have more than one page.
| | 00:11 | So the first thing I do is start to setup
some layer groups so I can start placing
| | 00:15 | content in there, which makes it easier for
me to turn page content on and off as I work,
| | 00:19 | and also serves me well later when I start to
create layer comps to simulate the page functionality.
| | 00:25 | So let's go ahead and start to create some
page groups now and also some content groups
| | 00:30 | that will serve as what I call master objects.
| | 00:33 | So the first thing I'm going to do is create a
new group in the Layers panel. So I'll select
| | 00:36 | the Background layer here, so I can start the
bottom, and I'm just going to click the New Group icon.
| | 00:41 | When I click that, it's going to create a new
group called Group1. And I can double-click
| | 00:45 | that name and I can call this Header.
| | 00:48 | I'm going to go back down and I'll create
another new group, double-click, and I'll
| | 00:53 | name this one Footer, because I know
those are two areas that I have to have.
| | 00:58 | I'll create another new group.
| | 01:01 | This one is going to be Content Home.
| | 01:04 | This is for everything
that goes on the homepage.
| | 01:07 | I'll create another new group.
| | 01:10 | This one is going to be Content About for
my About Me page. And I'll do Content Store,
| | 01:19 | because we are going to build little storefront.
And then the last group will be Content Contact.
| | 01:30 | Now I'm going to start ordering these logistically,
so I'm going to drag Header to the top because
| | 01:34 | that's the topmost thing in the design.
| | 01:37 | I'm also going to take the Logo Placeholder
and I'm going to drop it inside of the Header,
| | 01:42 | because that's one of my master elements
| | 01:43 | that's always going to be in Header.
And I'll collapse that up, close that down.
| | 01:48 | My Page Background here, that can go down
underneath the Footer because that's always going to
| | 01:53 | be in the background.
| | 01:54 | My Footer is going to be staying right there,
and I'm just going to put the rest of these
| | 01:57 | in order of how they're going to
appear in my navigational structure.
| | 02:00 | I know Home is going to be
first, so I'll drag it up.
| | 02:02 | About Me, I'm going to put that second,
so I'll drag that up. And then we'll have the
| | 02:06 | Store come right before the Contact.
| | 02:10 | Now I'm just going to close these groups up
for now, and as you can see, I have a much
| | 02:15 | cleaner Layers panel now, with an organized
structure fit for me to add content to each
| | 02:21 | individual page as I go along.
| | 02:23 | And so now all I have to do is save my work,
and I can keep going and start adding content
| | 02:28 | to my web site.
| | 02:33 |
| | Collapse this transcript |
| Adding master elements| 00:00 | Once I have my page structure organized on my
mockup here inside of Photoshop, the second
| | 00:05 | thing that I always do is start to add
what I call master elements into my design.
| | 00:10 | So the things that I consider to be master
elements are things that don't change in the
| | 00:14 | design, no matter what
page I am currently viewing.
| | 00:17 | So that would be stuff like the logo, the footer,
the page background, the overall background
| | 00:21 | of the site, that kind of thing.
| | 00:23 | So that's what we're going
to be building in this movie.
| | 00:26 | The first thing I need to do is I need to
load up the swatches that I've created for
| | 00:30 | this project, and I can do that by opening
up the Swatches panel. So I will drag this
| | 00:33 | out so you can see it.
| | 00:35 | And once I have the Swatches panel open,
I'll go to the Swatches panel menu.
| | 00:39 | I'm going to choose Load Swatches. And inside
of your chapter 8 exercise files folder should
| | 00:45 | be something called robots_swatches.ase.
And when I open those up, those should place right
| | 00:52 | there at the bottom of your Swatches panel.
| | 00:54 | You could have also chosen to replace the
swatches with those swatches that I just loaded in.
| | 00:59 | If you had done that though, it would have
gotten rid of all these other swatches, and
| | 01:01 | you wouldn't be able to use them.
| | 01:03 | So I am just going to keep these right here,
and you can notice when you mouse over them,
| | 01:06 | it says Robot Grey, Robot Orange, Robot
Dark Grey, Robot Yellow, and Robot Blue.
| | 01:12 | So we're going to use all of the robot swatches
to apply color to different parts of our design.
| | 01:17 | So the first thing I am going to do is apply
the background color to the overall design.
| | 01:21 | I am going to do that by selecting the
background layer, and I am going to come in the Swatches
| | 01:25 | panel and I am going to select Robot Blue,
and then I am just going to hit Option+Delete
| | 01:29 | or Alt+Backspace on my keyboard, and that's
going to fill that particular portion of my
| | 01:34 | screen with that color.
| | 01:36 | Once I have that applied, I want to add
a little bit of texture to this as well.
| | 01:39 | In order to do that,
I am going to run a filter.
| | 01:41 | So I will do Filter > Noise > Add Noise and I'm going to
use 2% Gaussian noise, and Monochromatic, and hit OK,
| | 01:51 | which gives it a little bit of a more organic feel.
| | 01:54 | So I've got that in place.
| | 01:56 | That's the first master element, because that's
something that's definitely not going to change.
| | 01:59 | That is the overall background of the design.
| | 02:02 | Next up, I'm going to change this,
this big rectangle right here.
| | 02:07 | And instead of trying to find out where
that rectangle is in my design, all I am going
| | 02:10 | to do is turn on Auto Select inside of my
Options bar up here, and I am just going to
| | 02:15 | click on that to find it. And it actually got
tucked away inside of my Footer, and that's okay.
| | 02:20 | I am going to move that out of
there though. There we go.
| | 02:24 | So there is my page background.
| | 02:26 | And so now I'm going to
change the way this appears.
| | 02:29 | So in order to do that, I am just going to
come up, pick another swatch. In this case,
| | 02:33 | I want it to be the Robot Yellow swatch.
And with that layer selected, I should be able
| | 02:38 | to Alt+Backspace or Option+Delete to fill that in.
| | 02:41 | You could have also double-clicked on the
layer thumbnail and then simply selected the
| | 02:45 | swatch from the Swatches panel
and hit OK. Either way is fine.
| | 02:48 | Now, I want to add a border to the outside
of this, so I am going to access my Shape
| | 02:54 | tools and then I'm going to add a stroke
of white. So I will pick a color here, add
| | 03:01 | a white stroke, hit OK. And I'm going to
use 10 points for this, and you will just see
| | 03:05 | it's kind of a nice border inside.
| | 03:07 | If the stroke is on the outside or in the
center, you can change that by coming in
| | 03:11 | and changing the alignment to the inside.
Here is center, so that kind of jumps
| | 03:16 | outside. And then if you do
outside, it goes all the way outside.
| | 03:19 | You can see that kind of exceeds my margins,
and I don't really want that to happen, so
| | 03:22 | I am going to go back to
the inside to keep it inside.
| | 03:25 | Now, I will collapse that back,
and we can continue going.
| | 03:28 | There is my page background.
| | 03:30 | I am actually going to
drag it beneath the Footer.
| | 03:32 | I want both of those on
top of each other, like so.
| | 03:34 | I am also going to add a drop shadow to this
to add a little bit of depth to my design.
| | 03:39 | So I will double-click out to the right-
hand side of that and I'm going to choose Drop
| | 03:43 | Shadow. And once I have Drop Shadow selected,
I'm going to set my Size to somewhere around
| | 03:49 | 8, and I'll change my Distance to 0, and I will
decrease the Opacity level to something like 55. Hit OK.
| | 04:01 | Now, you see it adds the layer
style there. Collapse that up.
| | 04:06 | If I click on the background, you will be
able to see it a little bit easier, and let's
| | 04:10 | go up to View and also turn off Extras.
| | 04:13 | That way it hides the guides for us for a
moment, so you can actually see that it's
| | 04:18 | kind of protruding out a little bit.
| | 04:20 | It's got that little shadow behind it.
| | 04:21 | I am going to go back and turn my Extras back on,
View > Extras, turn those back, and there we go.
| | 04:27 | Now, in my Header, up here at the top,
this is the next master element.
| | 04:32 | So I am going to find the Logo Placeholder,
and basically what I am going to do, I am
| | 04:36 | going to use this as a guide of where I'm
going to put my logo. And I'm going to go
| | 04:40 | File > Place, and inside of my exercise files
folder I have something called robot_toys,
| | 04:47 | and so I am going to hit Place.
| | 04:50 | And once it does that, it's going to
ask me if I want to place the PDF.
| | 04:52 | I do indeed, so I'll hit OK.
| | 04:55 | Once it places that in there, I'm simply
going to align the bounding box of this object to
| | 05:01 | the Logo Placeholder at the top.
| | 05:04 | And once I get that lined up, something kind
of like that, I will hit Enter or Return to
| | 05:10 | commit, and now I can throw away
the original Logo Placeholder.
| | 05:15 | So now my robot logo is right there in the
center, at the top of my page, right where
| | 05:19 | it needs to be, and I can
collapse the Header group back up.
| | 05:23 | Now, there's only one other master element
that I have to put in here, and that's the
| | 05:28 | navigation system--the links that go across
the top to let me click to go from page to page--
| | 05:33 | and we'll be covering that in its
own movie, called "Creating navigation."
| | 05:38 |
| | Collapse this transcript |
| Creating navigation| 00:00 | Creating navigation for web sites is one of the
most important aspects of the web site itself.
| | 00:05 | A navigation system has to be engaging and
functional at the same time, and therefore
| | 00:11 | you have to pay special
attention to how you design yours.
| | 00:14 | Most navigational systems on web sites have
either a horizontal or a vertical orientation.
| | 00:19 | The style of your design will
dictate which way your navigation goes.
| | 00:24 | For this project, I am going to do a very simple
navigation that goes across the top, like this.
| | 00:29 | I'm going to ensure that the fonts that I
use for this navigation are easy to read and
| | 00:34 | that I use a big enough font size for people
to be able to click on it, whether it's with
| | 00:37 | a mouse or with a finger on a touch device.
| | 00:40 | That's something you have to be
very, very careful with these days.
| | 00:44 | You don't know how your
audience is accessing your content.
| | 00:46 | They could be accessing it on a phone,
on a tablet, or on a desktop computer.
| | 00:51 | You just don't know these days, so you have to make
sure everything is both click- and touch-friendly.
| | 00:56 | When you're designing navigation, you should also
keep in mind something I call the three-click rule.
| | 01:01 | Everyone should be able to get pretty much
anywhere on your site within three basic clicks.
| | 01:06 | So basically, don't
overcomplicate your navigation system.
| | 01:09 | The main navigation of a site should contain
the main top-level pages that people should
| | 01:13 | have access to, directly from the start.
| | 01:16 | So in this case I have four basic pages that
they need to get a hold of: the Home page,
| | 01:22 | the About page, the Store, and the Contact page.
| | 01:25 | So I need to put those as top-level navigation
items going all the way across the top here.
| | 01:30 | So I'll do that by inserting some text.
| | 01:32 | I'll grab my Text tool, and I am simply
going to click and start typing some text.
| | 01:38 | I first need to make some changes
to the text that I'm using though.
| | 01:41 | I want to make sure that I am using
Courier New or Courier; either one will work.
| | 01:46 | I'm going to use a bold font, and I am going
crank up the size to something like 18 pt.
| | 01:52 | That may be too small, but for now it'll work.
| | 01:55 | I'm also going to make sure
that I am using white as my color.
| | 02:00 | Now I am simply going to
type out, in all caps, "HOME,"
| | 02:03 | I am going to type two spaces, and then I am
going to type a bullet, two spaces, and I'll
| | 02:10 | type the word "ABOUT" in all caps.
| | 02:14 | If these are too small, as these appear to be,
I can simply come up and change the size,
| | 02:19 | something like 24 pixels,
which looks a lot better.
| | 02:23 | And I'll grab my Move tool and I will just
move them into place, somewhere like this.
| | 02:28 | I want to create navigation on the right side
as well, so I'll just use Command+J or Ctrl+J
| | 02:32 | to duplicate those layers. Then I'll use my
arrow key to move them over, and then I can
| | 02:39 | simply grab my Type tool with the letter T,
highlight the text, and type out "STORE," space,
| | 02:48 | space, bullet point, "CONTACT." There we go.
| | 02:55 | So now I have my navigation in place--HOME,
ABOUT, STORE and CONTACT--each one corresponding
| | 03:01 | to HOME, ABOUT, STORE and
CONTACT in my Page structure.
| | 03:05 | So I've pretty much got
everything I need right here.
| | 03:08 | Now if there's going to be other pages,
| | 03:10 | you could of course build the
navigation component to accommodate those.
| | 03:13 | You could also insert some sort of
dropdown component if you wanted to, but you would
| | 03:16 | have to have that hidden initially, because
only the top level-pages should be displayed
| | 03:21 | when a user initially sees this.
| | 03:23 | They should be able to get to the four most
important parts of this side right from here--
| | 03:27 | HOME, ABOUT, STORE, and CONTACT, which is
what I outlined in my page structure originally.
| | 03:32 | So now that I have got that done I'm ready
to put these inside of my header group, but
| | 03:36 | I am going to rename them first.
| | 03:38 | So right here I am going to come over and
HOME and ABOUT, that becomes something called
| | 03:42 | Left Nav. STORE and CONTACT becomes Right Nav.
| | 03:48 | Now, why am I renaming them like this?
| | 03:49 | I am renaming them like this because when I
hand this off to a developer, it's not going
| | 03:54 | to be called HOME, ABOUT,
STORE, and CONTACT as you see here.
| | 03:58 | He is going to use some sort of CSS
class to determine which one goes where.
| | 04:02 | And in this case I am sort of telling him, I'd
like for it to be called Left Nav and Right Nav.
| | 04:06 | That way when he designs this, we could
actually put any type of text up here and it would
| | 04:10 | still fit the format.
| | 04:12 | So I will select that, drag them both down
into the header, and now I have my final master
| | 04:18 | element in place and that's the
navigation that goes all the way across the top.
| | 04:22 | You could also add a footer navigation, which
is common practice in most web sites, but for
| | 04:26 | this one, I am just going to leave that alone.
| | 04:29 | Once you have all of your master elements in
place in your design, it's time to continue
| | 04:33 | aggregating content and
finishing off your mockup.
| | 04:38 |
| | Collapse this transcript |
| Working with photographs| 00:00 | Photographs are a key ingredient in this web
design recipe, and so we need to be able to
| | 00:05 | get photographs into our designs
quickly and easily and work with them.
| | 00:09 | In this movie, I'll explore how to put
photographs into your web site mockup and how to use them.
| | 00:14 | So I am going to go ahead and come over to
this document that has three different robot
| | 00:19 | photographs in it.
| | 00:20 | You can see each one is on its own layer.
And so what I'm going to do is I'm going to put
| | 00:25 | them into my other design, and I'm
just going to go that as I need them.
| | 00:29 | So I'll go back over. And I'm temporarily going
to hide this rectangle that's underneath the
| | 00:34 | Header because I don't need that right now.
| | 00:36 | I am actually going to be creating content
for the storefront. So I am going to find
| | 00:40 | Content_Store and open that up, so it's
open when I start dragging stuff into it.
| | 00:47 | I'll go back over here. I'm just going to
select all three of these layers by Shift+Clicking,
| | 00:52 | and then I'll take them
and I'll drag them over.
| | 00:56 | I'll hold down my Shift key and then I'll release
my mouse and then I will release my Shift key.
| | 01:01 | Now it should've dropped them right in the
Content Store, which it did. If it didn't drop them
| | 01:05 | in there, that's okay; you can just move them
into the folder. And it should have dropped
| | 01:08 | in dead center in the
middle of the page, which it has.
| | 01:11 | Now I am also going to drag them up so
that they meet the content margin as well.
| | 01:14 | So let's drag them up till I snap to this
guide, and now I am going to evenly distribute
| | 01:20 | them across as well.
| | 01:22 | So I'll take the red robot first by
selecting this layer and I'll move him over to the left.
| | 01:28 | And I am just doing this with my arrow keys.
| | 01:30 | If I wanted to use my mouse, I could, but
I need a first turn off Auto Select, if you
| | 01:34 | have that selected.
| | 01:35 | So I'll turn that off.
| | 01:37 | And then I'll grab the green robot. And he's
going to stay right in the middle, so let's
| | 01:41 | move the silver robot over. Here we go.
And it should snap right to the guides.
| | 01:47 | Now, theoretically, since I have pasted these
into the dead center of the page, they should
| | 01:51 | be evenly distributed across.
| | 01:53 | But just in case, I'll select all three of
them again, I'll come up to the Options bar,
| | 01:58 | and I'll choose to
Distribute horizontal centers.
| | 02:01 | Once I do that, this robot snaps right in to
the center like it should, and I'm good to go.
| | 02:06 | I am going to select one of the robots.
| | 02:08 | It really doesn't matter which one. In this
case I'll be working with the silver robot.
| | 02:12 | And I'll double-click to right-hand side,
and I am going to add some layer styles.
| | 02:17 | I'll add a stroke and I'll make sure this
is set to the inside, set it to white for
| | 02:24 | the color, and maybe
about five pixels in width.
| | 02:28 | And now go down to the
bottom and choose drop shadow.
| | 02:31 | I am going to change the Distance to 0,
I'll change the Size to about 8, and I'll change
| | 02:40 | the Opacity to 55, just a subtle shadow. Hit OK.
| | 02:46 | Now, I want to easily transfer this to all
of these photos. Pretty simple. Right-click
| | 02:51 | on this layer, choose Copy Layer Style, then
select both the layers beneath it with Shift+Click,
| | 02:59 | right-click, and choose Paste Layer Style.
| | 03:03 | It pastes in on both of those and you
can see it right there in the window.
| | 03:07 | Now I'll collapse those up, and there we go.
| | 03:11 | Now, I also know that I want a copy of this
robot here on my About page, so what I'm going
| | 03:18 | to do is select that robot, which is the
silver robot; use Command+J or Ctrl+J to duplicate
| | 03:23 | it; and then I'll drag that copy
and drop it into the About folder.
| | 03:28 | I'll close up Content Store, and actually
for now, I'm going to hide that group.
| | 03:33 | So I'll find Contact Store and
click the eyeball next the group.
| | 03:37 | Now I'll open up Content About, find the robot,
and I'm just going to center him in between
| | 03:44 | these two guides right here. As long as he
snaps to that top, it's okay. And so now this
| | 03:49 | is going to be kind of a side marker to our
About text that we add in a little bit later on.
| | 03:55 | So now that we have got all of my images in place,
| | 03:57 | I am ready to save this
composition and continue working.
| | 04:02 |
| | Collapse this transcript |
| Working with text| 00:00 | Now we're ready to start adding
some text to our web site design.
| | 00:04 | Adding text is pretty simple, but we're going
to have to create some styles along the way
| | 00:08 | to make it easier on ourselves to style
the rest of the document as we go along.
| | 00:12 | So I am going to start here on the home screen
and I'm going to create some text underneath
| | 00:15 | where this placeholder is here, and I am
also going to create some text over here on the
| | 00:18 | side so that I can then showcase some
different blog posts that might be showing up.
| | 00:23 | So the first thing I am going to do is grab my
Text tool by hitting letter T on my keyboard,
| | 00:27 | and then I'm simply going to draw out a
textbox like this. So I'll click and drag to draw
| | 00:31 | out a box, and I'll move that down by
temporarily holding down my spacebar key, and then I'm
| | 00:37 | going to release my spacebar key and finish drawing
it out until it meets the bottom margin, like so.
| | 00:44 | Once I do that, I'm now ready
to insert some placeholder text.
| | 00:48 | The easiest way to do that in Photoshop CS6 is to
go to the Type menu and choose Paste Lorem Ipsum.
| | 00:53 | Now this is a lot of text, and I really
don't need that much, so let me zoom in.
| | 00:57 | I did that with Command+Plus or Ctrl+Plus. And I'll
just select up to about there and delete it.
| | 01:05 | Now, I am going to select this text,
and I'm going to apply some style to it.
| | 01:11 | So the first thing I am
going to do is change the font.
| | 01:13 | Come up to that Options bar and
I'm going to select Courier New.
| | 01:19 | I'm going to change this to bold, making it a
little easier to read. Make sure it's at 12 points.
| | 01:27 | Once I have that done, I am going to make
sure the color is set to Black. Then I am
| | 01:30 | going to come right here to toggle on
the Character and Paragraph panels.
| | 01:35 | In the Paragraph panel, which is right here,
I am going to go to the spacing after, and
| | 01:39 | I am going to add about 14 points of space.
| | 01:43 | I'm also going to uncheck
Hyphenate from there as well.
| | 01:46 | So once I have that done, I can hit the check
mark up there to commit or I can save this
| | 01:52 | as a style which I can
then use over and over again.
| | 01:55 | So let's go back over here to the
Paragraph Styles panel on the right-hand side.
| | 01:59 | If you don't have the Paragraph Styles button
here, you can go to the Window men, and you
| | 02:03 | can choose Paragraph Styles and
it'll pop right open for you.
| | 02:06 | I'm then going to create a new
paragraph style by clicking the New Style icon.
| | 02:10 | That creates a new paragraph
style called Paragraph Style 1.
| | 02:13 | I am going to double-click that to open it
up, and I'm going to call this Body Text.
| | 02:19 | So it's got everything I need:
Courier New, Bold, 12 points.
| | 02:23 | I am going to go to the Indents and Spacing,
make sure it picked up my 14 point after.
| | 02:27 | I am also going to go to Justification and
I am going to add some leading to that to
| | 02:31 | space out the lines a little bit. And so I
am going to change the Leading to about 170%.
| | 02:37 | And once I do that, I'll click away from it
in one of these other boxes and you should
| | 02:39 | see it update right there, and it
does. It looks nice. And I'll hit OK.
| | 02:44 | Now I've got the new Body
Text style, so I am ready to go.
| | 02:47 | Now I am going to add some text over here
inside of this side content area, so I'll
| | 02:52 | grab my spacebar key real quick and just
pan over. And I'm going to draw out a box.
| | 02:58 | So I'll start right up here and just draw
out a content box, something kind of like
| | 03:03 | this, and I'll just start
typing some things out.
| | 03:05 | So I'll type out "LATEST BLOG POSTS," and notice that's
adopting the Body Text style automatically, and that's okay.
| | 03:13 | I'll ht Enter or Return to create a new line.
Then I am going to type out "Robots Are Awesome."
| | 03:20 | So this is a new blog post that I have written
maybe. And I'll say "Posted On: June 01, 2012."
| | 03:31 | Hit Enter again, and now I am going to go
to the Type menu, choose Paste Lorem Ipsum.
| | 03:36 | It pastes in some Lorem Ipsum text from
Photoshop. And if I want to see how far down this went,
| | 03:42 | I can actually expand out the
textbox until I see all of the text.
| | 03:46 | That's way too much, so I'll just select
some of that and delete it. There we go!
| | 03:53 | I want to be able to fit about two blog
posts over here, so this should be okay.
| | 04:00 | So now I am ready to start styling up the
rest of this. So I am going to grab this text
| | 04:04 | first, and this is going to be something
that I am going to call Post Meta because this
| | 04:07 | is metadata about the post.
| | 04:09 | And so I am going to start styling it up. So we'll go
up here to the top and I'll change the color first.
| | 04:16 | I change this to a neutral gray, so I
am going to use the hex code, 737373.
| | 04:20 | It's kind of a neutral gray,
kind of in the middle. Hit OK.
| | 04:25 | I am also going to change the font size to
11 points. Then I am going to go into the
| | 04:30 | Paragraph Options and I'll change this
to be 4 points after, so 4 pt. Hit Enter.
| | 04:39 | Now I'll go back into the Paragraph Styles,
this time creating a new style. It will be
| | 04:44 | called Paragraph Style 1.
| | 04:45 | I'll double-click it and I'll
just call this Post Meta. Hit OK.
| | 04:52 | Now I'll select Robots Are Awesome.
| | 04:54 | This is going to be the heading for my blog
post, so I'll go ahead and change that up.
| | 04:57 | The first thing I am going to do is
add the Robot Orange color to it.
| | 05:01 | If you don't have the Robot Color palette
loaded into Photoshop, that's no big deal.
| | 05:05 | All you have to do is click right here in the Options
bar and then just sample the color from the logo.
| | 05:11 | You'll get the exact same color. Hit OK.
| | 05:13 | I am going to keep it at Courier New, I am
going to keep it on Bold, and I am going to
| | 05:18 | change the Font Size to 18 points.
| | 05:21 | Once I change to 18 points, I am also
going to go over to the Paragraph panel.
| | 05:25 | Hit a space after. We are going to set that
to 0. Hit Enter to commit to that. So there's
| | 05:30 | my blog post heading. And I'll go over to my
Paragraph Styles, hit New, double-click, and
| | 05:39 | I'll call this H2.
| | 05:41 | I am doing this so that the web developer
knows to style this under the H2 tag when
| | 05:46 | he is writing the code, or the
Heading 2, the second heading on the page.
| | 05:50 | Hit OK. And finally, the latest blog post
heading here is going to be the big heading,
| | 05:57 | H1, so I am going to change this to the same
orange. So again, I'll click up here in the
| | 06:01 | Options bar, set that, hit OK.
| | 06:04 | I am going to change this
one to be about 27 points.
| | 06:10 | If it doesn't fit, that's okay. I can adjust
the size of the box here in a minute.
| | 06:13 | I'll go over into my paragraph's options and
for the space after, I am going to do 10 points.
| | 06:20 | Hit Enter to commit to that, and then I'll
go over to my Paragraph Styles and create
| | 06:25 | one more, double-click on it,
and call this H1, and hit OK.
| | 06:31 | Now, like I said, if this flows to the next
line, all I have to do is expand this out
| | 06:36 | a little bit by clicking inside with the Type
tool and then hovering untill I see two arrows
| | 06:40 | and dragging that out like so.
| | 06:45 | Once we get it, commit to
that change, and there we go.
| | 06:48 | There is my latest blog post.
| | 06:49 | Now if I want to have another blog post, it's
pretty simple. I just click inside, select this,
| | 06:55 | copy it, create a new line, and paste it in.
| | 07:01 | So there we go, just a little bit of text.
| | 07:04 | So that stuff is all going inside of Content
Home. So what I am going to do is select both
| | 07:09 | of those text layers that I just created
and I am going to drag them into Content Home
| | 07:14 | in my Layers panel, and then I going to
turn off Content Home, the visibility of it.
| | 07:19 | I am also going to turn off the rectangle,
right above it, and then I am going to turn on
| | 07:23 | Content About, which has a
picture of a robot on it already.
| | 07:27 | I'll grab my Text tool one more time, and this
time I am going to draw out a box right here,
| | 07:34 | something kind of like this.
| | 07:36 | I'll type out "ABOUT US," in all caps, hit
Enter, and I'll go to the Type menu, choose Paste
| | 07:43 | Lorem Ipsum. That pastes some in there. And I'll
make sure that I fit all of it in, just like so.
| | 07:51 | Then I am going to select this portion, make
sure that Body Text is applied, which it is,
| | 07:58 | and then I'll select this
and I'll apply H1 tag to that.
| | 08:02 | Once I do that, I'll click the Move
tool to switch away, and there we go.
| | 08:06 | I've pretty built our About
page by utilizing those styles.
| | 08:11 | So now I'll take this and
I'll drag it into Content About.
| | 08:16 | That way it's in the right page
structure. And there you have it.
| | 08:19 | So as you can see, utilizing the character
and paragraph styles here inside of Photoshop
| | 08:23 | is a great way to ensure consistency throughout
your designs, and it really speeds up the workflow
| | 08:27 | for adding text to multiple
pages in your web site mockups.
| | 08:32 |
| | Collapse this transcript |
| Creating media placeholders| 00:00 | Although Photoshop can handle video files,
it's a great idea to just use something called
| | 00:05 | a placeholder when you want to express where
media is supposed to go in your web site designs.
| | 00:10 | Otherwise you are going to wind up with
some really big PSD files that won't be easily
| | 00:13 | transferable from computer to computer, and
you might actually irritate the developer
| | 00:17 | that you hand off your designs to as well,
because nobody wants a few-gigabyte file just
| | 00:21 | because there's a video
embedded in there somewhere.
| | 00:24 | So in order to keep your PSD flexible and
nimble, just use something called a placeholder.
| | 00:28 | In this movie, we are going to be
exploring how to build that right here.
| | 00:32 | So the first thing I am going to
look for is this rectangle here.
| | 00:35 | That's actually where the
video is supposed to go.
| | 00:37 | Now, technically I could just leave us alone
and call this the video placeholder, but it's
| | 00:41 | not very indicative of what I want to go here.
| | 00:44 | It basically just looks like a
black hole where nothing is.
| | 00:47 | So what I want to do is use this as a guide.
| | 00:48 | Remember, this is part of my original mockup
to insert something on top of it that fits
| | 00:53 | its exact form factor.
| | 00:55 | In order to do that, what I am going to do is
bring in something that's called a poster image.
| | 00:59 | Most videos that you see online contain an
image representing what is going be played
| | 01:03 | when you click the Play button.
| | 01:04 | You see it on YouTube, Vimeo, all of these
different sites, and that image is called a poster.
| | 01:09 | And so what I'm going to do is actually bring in a
file into Photoshop and use that as my poster image.
| | 01:15 | So I am going to go File > Place, and I am
going to find video poster.jpg and that's
| | 01:21 | inside of my chapter 8 exercise files folder.
| | 01:23 | I will hit Place, and it
places it right in there.
| | 01:27 | And I'm just going to line it up. It doesn't matter
that it's not in the right stacking order right now.
| | 01:32 | I am just going to line it up with that,
and I'll shrink it down until it snaps right to
| | 01:37 | the dimensions of that video
placeholder. And I'll hit Enter or Return.
| | 01:44 | And now I can take this rectangle
and I can actually throw it away.
| | 01:49 | Since the video poster is part of the homepage,
I can take that now and drop it directly into
| | 01:53 | the content home folder. And since it's a
Smart Object, I can actually go and edit that
| | 01:59 | independently of this design.
| | 02:01 | So let's do that now.
| | 02:02 | Let's find video poster, which I just dropped
into the content home folder; double-click
| | 02:06 | on the layer icon; and that opens
up in its own document for me.
| | 02:11 | Now I am going to add some things to
this to make it look more like a video.
| | 02:14 | So the first thing I am going to do is
duplicate my Background layer, and then I will select
| | 02:19 | the original Background layer. And I'm going
to make black or a dark gray my foreground
| | 02:25 | color, and I am going to fill in the Background with
black using Option+Delete or Alt+Backspace on my keyboard.
| | 02:31 | I could also just go to
Edit > Fill and select black.
| | 02:35 | And then I'm going to select layer 1, which
is the robot, and I am going to lower the
| | 02:38 | Opacity of this layer to about 70%. If you
want to do that quickly, just select your
| | 02:44 | Move tool and then hit the
number 7 on your keyboard.
| | 02:47 | That will dim it down a little bit.
| | 02:48 | If it's still too bright, maybe back it
down to about 50%. That looks good.
| | 02:52 | Now, I'm going to utilize my shape tools.
| | 02:55 | So I will come over here, click and hold on
the rectangle, and use Custom Shape tools.
| | 03:01 | Then I am going to go into my shapes.
| | 03:02 | Now I have already got
all of the shapes loaded.
| | 03:04 | Your shapes might look something like this.
| | 03:06 | Let me reset them, hit OK. Just go
up to the top, choose All, and hit OK.
| | 03:15 | Now you have all of the shape
tools available to you in Photoshop.
| | 03:18 | Now I am going to scroll down, and what I'm looking
for is a rounded triangle to draw a play button.
| | 03:25 | So once I scroll down, I am going to notice
right here in the signs that I have this little
| | 03:32 | guy right here, and I am going to
select that to surround the triangle.
| | 03:35 | It's called sign 3. And I will come out in
to the canvas area after I close that up, and
| | 03:41 | I am just going to draw out a triangle
| | 03:44 | that looks something kind of like a play button,
like that. And I'll take this and I will switch
| | 03:50 | to my Move tool, and I'm going to bring up
Free Transform, Command+T or Ctrl+T, and I'll
| | 03:56 | rotate this until it's pointing to the right.
| | 04:01 | I might even shrink it up
a little bit. It's okay.
| | 04:03 | Hit Enter to commit, and I want to change the
color, so I will double-click the layer thumbnail,
| | 04:08 | turn it white, here we go. And I'm going to
give it a drop shadow, so I will double-click
| | 04:14 | out to the right, give it a drop shadow, set the
Distance to 0, increase the size a little bit,
| | 04:25 | back down the Opacity to about 60, and hit OK.
| | 04:29 | So there's my play button.
| | 04:30 | Now I am going to center this on the page,
so I am going to use Command+A or Ctrl+A to
| | 04:34 | select everything. Then I will just use
the center buttons in the Alignment panel.
| | 04:37 | Now, I am going to go back to my Shapes, grab
the Ellipse tool, and I am just going to hold
| | 04:44 | down the Shift key and draw out
a shape, something like this.
| | 04:49 | I'll take that and drag it underneath my play
button. Then I am going to make sure I have
| | 04:55 | my Ellipse tool selected again.
| | 04:58 | In the Options bar, I am
going to set the Fill to None,
| | 05:02 | set the stroke to white, and change the
width of the stroke to something like 8 points.
| | 05:15 | Then I want the same drop shadow applied to
this, so I will take the fx icon here, hold
| | 05:19 | down my Option or Alt key, click, and drag.
Then I'll release my mouse and release the
| | 05:25 | Option or Alt key. Then I am going to switch
to my Move tool and I'll use my arrow keys
| | 05:32 | to nudge this into place so that it
looks pretty good, something like that.
| | 05:37 | Now with all this done, I'll hit Save.
| | 05:40 | Since it was a JPEG, it's going to ask me
to save it as a PSD file, and that's okay.
| | 05:45 | I will just save it to my Desktop
for now and hit Save. Hit OK.
| | 05:50 | There we go!
Now, I will close this up.
| | 05:54 | Now when I get back into Photoshop,
you are going to notice that it doesn't update.
| | 05:58 | That's because I didn't save it as a JPEG.
So what I have to do, toss this away, File > Place.
| | 06:06 | On my desktop, there's video poster, place it in,
snap it to the dimensions, and there we go.
| | 06:21 | There's my video poster. It looks like I could
just click on it and play the video right there.
| | 06:26 | Now, one last little touch.
| | 06:27 | I'm going to double-click
out to the right of it.
| | 06:30 | I am going to add a stroke, Inside,
something like 5 pixels, change the Color to white,
| | 06:39 | add a drop shadow, 45% for the Opacity, 0 for the
Distance, 5 for the Size, and 5 for the Spread.
| | 06:51 | Hit OK. Now I am going to temporarily turn off my
extras by going to View > Extras, and there
| | 06:56 | you can see there's my video placeholder with
a nice frame around it, just like the outside
| | 07:01 | of my design, and it looks really good.
| | 07:04 | So I started off with a plain JPEG and
wound up with this nice media placeholder, which
| | 07:08 | saves me a ton of space as opposed to actually
embedding the video directly within the file.
| | 07:14 | So the next time you have to showcase where
media is supposed to go in your designs, try
| | 07:18 | mocking up a small placeholder like this,
as opposed to just interjecting the actual file.
| | 07:27 |
| | Collapse this transcript |
| Creating buttons| 00:00 | Buttons are another aspect of web design where
user-friendliness and consistency are extremely important.
| | 00:06 | In this movie, I'm going to be showing you
how to create buttons for a web site mockup.
| | 00:11 | One of the things we have to account for is
the fact that our content is not just being
| | 00:15 | accessed through a web browser on a computer;
| | 00:18 | people are coming to these web sites on mobile
phones, tablet devices, using their fingers,
| | 00:22 | using styluses, all types of different devices and
input methods for clicking on the things that we create.
| | 00:28 | Therefore, we have to create things
that are both click- and touch-friendly.
| | 00:32 | So what is the actual target size for
a "touch- and click-friendly button?"
| | 00:38 | Well, according to several developer guidelines,
a touch-friendly button can be anywhere between
| | 00:44 | 25 and 35 pixels squared,
so a 25 x 25 or 35 x 35 square.
| | 00:51 | In my experience, I always err on the side
of caution and go towards the 35-pixel size.
| | 00:57 | Now they can be as wide as you want them to
be; it's essentially the height that we're
| | 01:01 | worried about here.
| | 01:02 | So in order to start creating some buttons,
I'm going to first switch to my Shape tool
| | 01:07 | and my Rectangle tool and I'm just going to come
out on the canvas and I'm going to click, one time.
| | 01:13 | When I click, it gives me the
option to create a rectangle.
| | 01:15 | This is probably the most
precise way to create shapes.
| | 01:18 | So I'm going to change the Width to 135
pixels, and I'll change the Height to 35 pixels.
| | 01:25 | Once I hit OK, I get a new button right there.
| | 01:29 | Now I'm going to switch to my Move tool with
the letter V, and then I can move this into
| | 01:33 | place just like that.
| | 01:35 | So basically, I want a button down here that
leads to more product information about this
| | 01:39 | red robot that we're trying to sell.
| | 01:41 | Now in keeping with the theme of the web site,
I want to make this button this orange color up here.
| | 01:47 | So in order to do that, I'm going to come
over to the right and I'm going to double-click
| | 01:50 | on the layer thumbnail for
this rectangle I created.
| | 01:53 | And I can either use the orange that I've
loaded into my color palette or I can simply
| | 01:59 | move the color picker and sample
the orange color from up there.
| | 02:04 | Hit OK and there's my button.
| | 02:06 | Now if I want to add
some extras to this, I can.
| | 02:09 | So I'll come over here and I'll double-click
to the right-hand side and I'm going to add
| | 02:13 | a stroke to this.
| | 02:14 | I'm going to set it to the inside and I'll
set that to 1 pixel. And for the Color, I'm
| | 02:22 | going to select the same
dark color as the robot's face.
| | 02:25 | And so now I'm also going to add a drop
shadow to this, but the drop shadow is going to be
| | 02:30 | a little different. I'm going to switch the mode of the drop
shadow from Multiply to Normal, change the color
| | 02:36 | to white, and I'm going to change the
Distance to 0. It's almost like an outer glow in a
| | 02:42 | way. And I'll back down
the Size just a little bit.
| | 02:45 | If you want to offset it a
little bit, that's fine.
| | 02:46 | Maybe go with Distance of 1 or 2 and
then increase the Opacity to 100%.
| | 02:52 | If I zoom in--and I'm doing this with
Command+Plus or Ctrl+Plus on my keyboard--you can kind of
| | 02:57 | see it's just kind giving a
light edge to the outside.
| | 03:00 | If it doesn't give you enough
definition between the background, that's okay.
| | 03:03 | Just increase the Distance a little bit and
then make sure you back down the Size, just
| | 03:06 | kind of give it that little
beveled edge. There we go!
| | 03:09 | Hit OK. And so now I want to add
some text to this as well.
| | 03:12 | So I'm going to grab my Text
tool by hitting the letter T.
| | 03:15 | So I do that. I'm going to make
sure Courier New is selected.
| | 03:18 | I'm also going to make sure that white is
my foreground color. And I'll click and I'll
| | 03:24 | type out "More Info."
| | 03:28 | I'm going to select this and then
I'll shrink it down quite a bit.
| | 03:31 | I think 18 pixels should be enough.
| | 03:34 | Grab my Move tool and just kind of
move it in, something like that.
| | 03:37 | Now I want to make sure that this
text is sort of embossed into this.
| | 03:42 | So in order to do that, I need to
add a layer style to that as well.
| | 03:45 | So I'll double-click out to the
right-hand side of that layer.
| | 03:48 | I'll add a drop shadow.
| | 03:49 | And a quick way to make embossed text on something
like this is to take the Size down to 0, uncheck
| | 03:56 | your Use Global Light button, and change
the Angle to -90, and then just dial down your
| | 04:03 | Distance till it looks something like that.
| | 04:06 | See how it looks kind of like it's pressed in?
| | 04:08 | And then if you want to adjust the Opacity
a little bit, kind of back it down, maybe
| | 04:11 | something like 45%, that
looks good. And hit OK.
| | 04:15 | So there we go!
There's my button.
| | 04:17 | I'll zoom out a little bit so you can see it.
| | 04:19 | Here's it at 100%, what
it's going to look like.
| | 04:21 | So here's my More Info button.
| | 04:23 | And so now what I'm going to do is select
both of these layers in my Layers panel and
| | 04:28 | I'm going to group them, and I'm
just going to call this Button.
| | 04:33 | Now I can actually duplicate that group
and use it in different spots in my layout.
| | 04:38 | So I know that I want one
of these on the homepage,
| | 04:40 | so I'm going to keep this one, and I'll
create a duplicate with Command+J or Ctrl+J on my
| | 04:45 | keyboard; that duplicates that.
| | 04:46 | If you're using an older version of Photoshop,
like CS5 or earlier, what you can do is just
| | 04:50 | simply take this, drag it and drop it down on the
New Layer icon, and it will duplicate it for you.
| | 04:58 | But in Photoshop CS6, I can actually use
Command+J or Ctrl+J to duplicate groups.
| | 05:02 | So I'll take this now and I'm going to drop
it into the store, and then I'll take the
| | 05:08 | original button and I'll
drop it onto Content Home.
| | 05:11 | I'll hide the Content Home layer group and
I'll turn on Content Store, and I'll expand
| | 05:18 | it out so we can what's going on in there.
| | 05:20 | So I've got Button copy.
| | 05:21 | I'm going to change the name of that to Buy Now,
and I'll use my Move tool to move it into place.
| | 05:28 | I want it right underneath this.
| | 05:32 | And then I'll create a copy, move it over,
and create another copy. And I'm just hitting
| | 05:40 | Command+J or Ctrl+J to do this,
and move it over like that.
| | 05:43 | If you want to align them up, you can.
| | 05:45 | You can even select each one that's underneath
each one of the photos and line them up using
| | 05:48 | the alignment tools.
| | 05:49 | But for now, I'm just doing this for demonstration
purposes, so I'm not real concerned about the alignment.
| | 05:55 | And now I'll just come through and I'll type
in "Buy Now," and we'll move that back towards
| | 06:02 | the center, collapse up that button, go to
the second one, expand it out, double-click,
| | 06:11 | type out "Buy Now," and I'll move that in.
| | 06:15 | And so all I'm doing is coming over to the
Layers panel, I'm expanding out the groups
| | 06:19 | for each one of the buttons, I'm finding the
text layer that says More Info, I'm double-clicking
| | 06:24 | on it, and then I'm changing it to Buy Now.
| | 06:29 | And you can click the check mark in the top
of the Options bar or you can simply click
| | 06:34 | on the layer thumbnail again to commit to
that change. Then I'm grabbing the Move tool
| | 06:39 | and centering it in the middle
of the button, just like so.
| | 06:43 | And I'll close that up, and I'll
close up the Content Store group.
| | 06:47 | And so now, I actually have the same button
all over my web site; it has different names
| | 06:52 | of course, but now I have that same button.
| | 06:54 | It is touch-friendly, because
it's at least 35 pixels tall.
| | 06:57 | It's 135 pixels wide.
| | 06:58 | It fits nicely underneath
each one of store items.
| | 07:00 | And if I turn this off and turn on Content Home,
I've got the same type of button right there.
| | 07:05 | So I've got a consistent look and feel.
| | 07:06 | I've also got a touch- and
click-friendly interface.
| | 07:09 | And that's really all there is to it, and those
are the main things you need to be concerned
| | 07:13 | with as you design your sites.
| | 07:18 |
| | Collapse this transcript |
| Creating form fields| 00:00 | Another user interface element that you're going to
be asked to create quite frequently is a form field.
| | 00:05 | Everybody that has a web site wants some
sort of contact or order form built into their
| | 00:09 | site so that they can receive email or take orders
or whatever it might be that they're trying to do.
| | 00:14 | So we as designers need to be
equipped to handle that request.
| | 00:17 | In this movie I am going to be exploring
creating different types of form fields inside of your
| | 00:21 | mockup here inside of Photoshop.
| | 00:22 | So the first thing I need to do is I
need to hide the home content area here.
| | 00:26 | So I am going to do that by clicking on the
little icon for visibility next to Content
| | 00:30 | Home, and then I will turn on Content
Contact and I'll expand out the group.
| | 00:35 | Now I've already got
these guides up on my screen.
| | 00:38 | If you can't see these guides,
go to View and turn Extras on.
| | 00:41 | If there is a check mark,
you should already be seeing these guides.
| | 00:43 | I am going to use these guides to help me
place the items inside of my contact form.
| | 00:48 | So I am going to grab my Rectangle tool.
| | 00:50 | That's the basis for almost everything we do here.
And I'm going to click right there in the center.
| | 00:56 | The Width for now doesn't really matter to me.
| | 00:58 | The Height is what matters.
| | 01:00 | This can range anywhere from 25 to 35
pixels, but don't go any smaller than that.
| | 01:05 | You can go larger if you need to, but try
not to go smaller than 25 pixels. Why?
| | 01:10 | Because we don't control how
people are accessing this content.
| | 01:13 | There is nothing more frustrating to me than
when I go to a web site and I have a form that
| | 01:16 | I have to fill out, and let's say that
I am looking at it on my mobile phone.
| | 01:20 | I try to click that with my finger and it
just doesn't work. Or I have to zoom in a million
| | 01:24 | times and then click on
something with my finger.
| | 01:26 | That is so annoying.
| | 01:27 | So what you want is to have at least 25 to
35 pixels for someone to click on, making it
| | 01:32 | easily accessible for them.
| | 01:34 | So I am going to go ahead and do
35 pixels here and I will hit OK.
| | 01:39 | That just puts in a small blank rectangle,
and I'll drag that over until it snaps that
| | 01:43 | guide and take it right there.
| | 01:47 | I'm going to free transform this,
so I will use Command+T and Ctrl+T.
| | 01:50 | I am going to drag this out until
it gets to about 345 pixels wide.
| | 01:55 | That looks about wide enough. There we go.
| | 01:58 | Now I need to also make this white.
| | 02:00 | This form field needs to be white.
| | 02:02 | So I will come over to the Rectangle 2 right
here and I'll double-click, change this to
| | 02:08 | white. And I am also going to rename this
layer and I'll name it Your Name, because
| | 02:14 | that's what this form
field is going to be called.
| | 02:16 | I'll grab my Text tool by
hitting the letter T on my keyboard.
| | 02:19 | I'm also going to hit the letter D on my
keyboard to default my colors back to black and white
| | 02:24 | and make sure that black
is my foreground color.
| | 02:26 | Then I will click to start creating some text and I'll
type out "Your Name." And it's in Courier New, bold.
| | 02:35 | I'm actually going to
shrink the size of it down,
| | 02:36 | so I will select the text and change the
size to about 14 pixels. There we go.
| | 02:42 | Now I will grab the Move tool and I'll move
it in. And I will actually zoom in so you can
| | 02:46 | see it a little better. There we go.
| | 02:49 | And I am just going to move it
somewhere, kind of like that.
| | 02:53 | So there is the form field there.
| | 02:55 | Once I have got this created, I am going to
come back over to the Layers panel and select
| | 02:58 | both of those Your Name layers and I am
going to group them with Command+G or Ctrl+G.
| | 03:03 | Once I group them, I'll name this Your Name.
| | 03:06 | Now I'm going to duplicate this.
| | 03:08 | I need a field for Your Email, subject line,
and also your message, the body of the message.
| | 03:15 | So I'll hit Command+J or Ctrl+J once
to create a duplicate for your email.
| | 03:19 | Command+J or Ctrl+J again for the subject
and Command+J or Ctrl+J again for the message.
| | 03:26 | So now I can go in and
start manipulating these.
| | 03:28 | I will start with the first copy of Your Name.
| | 03:31 | So it says Your Name copy. And I am just
going to hold down my Shift key and with my Move
| | 03:35 | tool selected, press the down
arrow key 1, 2, 3, 4, 5 times.
| | 03:42 | Then I can let go of my Shift key.
| | 03:44 | I will do the same thing for Your Name copy 2.
| | 03:48 | Hit that. And this time I am going to press the
Shift key and hit the down arrow key ten times.
| | 03:55 | It's going to space it out just like that.
And then for Your Name copy 3, the same thing.
| | 04:01 | This time though, Shift key and
hit the down arrow key 15 times.
| | 04:06 | That just evenly spaces
all of these out for me.
| | 04:09 | Now I can start editing these.
| | 04:11 | So I will go to Your Name copy, open it up, double-
click on Your Name, and I'll type in "Your Email."
| | 04:19 | I'll also rename the group by
double-clicking and type out "Your Email."
| | 04:24 | Then I'll close that group.
| | 04:27 | Go up to the next group, expand it out,
double-click Your Name, type in "Subject."
| | 04:34 | Double-click to change the name of the group,
change that to Subject as well. Close that up.
| | 04:40 | Expand the third group, change where it
says Your Name, double-click, Your Message.
| | 04:48 | Now for the box, I am going to double-click
that, change it to Your Message, and then I
| | 04:54 | am going to use Command+T or Ctrl+T to
expand it to all the way down to about there and
| | 05:02 | I'll expand it out all the way
over to the right-hand margin.
| | 05:05 | Then I will hit Enter or
Return to commit to that.
| | 05:09 | So now all of those line up.
| | 05:09 | I've got a big message box there.
| | 05:11 | I can collapse this up and I'll
rename this group Your Message.
| | 05:17 | If you want to reorder these, you can.
| | 05:19 | I will drag Your Name up, Your Email,
Subject, and then Messages down below.
| | 05:27 | The last thing I need to
do is add a Submit button.
| | 05:29 | So I didn't add that when I was adding the
buttons to my site, but that's no big deal.
| | 05:33 | I can just go grab one of the buttons
from another section of the web site.
| | 05:37 | So what I will do is collapse this up
and turn off Content Contact for now.
| | 05:42 | I'll turn on Content Home
and expand out the group.
| | 05:46 | I will find the button and I'll use Command+J
or Ctrl+J to copy it, and then I will take
| | 05:51 | Button copy and I'll drag it down and
drop it right on top of Content Contact.
| | 05:56 | Then I'll collapse up Content Home, turn the
visibility off, turn the visibility back on
| | 06:03 | for the Contact page, expand it out.
| | 06:05 | I will grab the button, move it right there to
the margin, and I'll expand it out, double-click
| | 06:13 | the T next to More Info, type out "Submit."
| | 06:17 | I'll grab Move tool, move it into place,
collapse that up, rename the group, Submit Btn for
| | 06:30 | button, and I'll also
close up Content Contact.
| | 06:36 | There we go. Zoom back out.
| | 06:38 | Now I've got a lot of white space
over here on the right-hand side,
| | 06:41 | so what I want to do is fill this with the
latest blog post like I had on the homepage.
| | 06:45 | So I will expand out Content Home, I will
find the text box that says LATEST BLOG POSTS
| | 06:51 | and I will just duplicate it.
| | 06:52 | Command+J or Ctrl+J, and then I'll take that
and drop it right inside of Content Contact
| | 06:58 | and it should pop right in, just like that.
And the final step to finishing off this page
| | 07:03 | with the form fields is to add a
heading over here to the left.
| | 07:07 | So I am just going to grab my Text tool, click,
type out "Contact Us." And it doesn't matter
| | 07:15 | what the text looks like,
| | 07:16 | so I am going to select it and then open up
my Paragraph Styles and choose H1.
| | 07:23 | If it's got a style override applied, just
clear the override and then move it into place,
| | 07:29 | just like that. Collapse it up and there we go.
| | 07:32 | So hopefully by now you have a better understanding
of how to mock up form fields inside of Photoshop.
| | 07:37 | It's basically just shapes and texts lined
up nicely with touch-friendly interfaces and
| | 07:42 | click-friendly interfaces as well, making the
fields easier to read, easy to click on, and
| | 07:46 | then a big call-to-action
button somewhere inside the form.
| | 07:50 | So hopefully the next time you're asked to
do something like this, you won't find it
| | 07:53 | quite as challenging.
| | 07:58 |
| | Collapse this transcript |
| Simulating pages with layer comps| 00:00 | The final stage of any mockup is
to simulate pages in your design.
| | 00:05 | If you've been following along throughout
this chapter, you know that we've already got several
| | 00:08 | groups inside of our Layers panel that
represent the pages that we are going to be showing.
| | 00:13 | However, what I want to do is simulate the
pages actually being their own separate entity.
| | 00:18 | And since Photoshop doesn't have support for
individual pages like a program like Indesign
| | 00:23 | or Fireworks or even Illustrator, I have to
utilize something called layer comps in
| | 00:27 | order to do that.
| | 00:28 | So what I'm going to do is I'm going to go
up to the Window menu and I am going to bring
| | 00:31 | up the Layer Comps panel.
| | 00:33 | Inside of Layer Comps, basically all I'm going
to do is start creating new layer comps based
| | 00:37 | upon the content layouts that I've created
over here on the right.
| | 00:40 | So this first page is of course the homepage, so
I'll create a new comp called Home. Hit OK.
| | 00:48 | I'll turn off Content Home, turn on Content
About, hit New, call this About. And we will
| | 00:56 | turn off Content About, turn on Content Store,
hit New, type our Store. Now I'll hit OK, turn
| | 01:05 | off the Store, turn on the Contact
Form, hit New, and call this Contact.
| | 01:11 | Now, I hit OK and I have individual pages
ready to show the client, or even the developer,
| | 01:18 | if I'm walking them through how the design works.
| | 01:21 | So now inside of Layer Comps panel, if I was
giving a presentation, I would just hit this
| | 01:25 | button here and say, okay.
| | 01:26 | Here's the homepage, here's the About page,
here's your Store, and here's what the Contact
| | 01:32 | page will look like.
| | 01:33 | And so I'm utilizing layer comps in order to
selectively display content that's inside of my design.
| | 01:39 | It's a great way to simulate pages when you're
using application like Photoshop that doesn't
| | 01:43 | necessarily support that feature.
| | 01:48 |
| | Collapse this transcript |
|
|
9. Optimizing Web GraphicsUnderstanding slicing| 00:00 | When we start to talk about optimizing our
Photoshop documents for the web, one of the
| | 00:04 | terms that you'll hear is slicing.
| | 00:06 | And slicing is sort of an old-school web design
term that refers to a time when we would separate
| | 00:11 | larger images into multiple pieces and then
reassemble those "slices" using HTML tables.
| | 00:18 | In today's modern web design,
this isn't necessarily the way it's done.
| | 00:21 | Images are able to be optimized more
efficiently, browsers are faster, and so are connection
| | 00:25 | speeds, and now we have HTML and
CSS to divide our things up equally.
| | 00:30 | So if that's true, what do we use slicing for?
| | 00:33 | Well, in my personal workflow, I use slicing for
a variety of different tasks, but the most
| | 00:38 | common workflow for me is to use slicing
to define what I call areas of export.
| | 00:42 | I have open here a document with several
different banner ads that I will need to place throughout
| | 00:46 | a web site that I'm working on.
| | 00:48 | I've used the Slice tool to select the
different regions so that I know exactly what is going
| | 00:52 | to be exported when I'm ready to
take these graphics out to the web.
| | 00:55 | This also gives me the opportunity to
optimize each graphic separately inside of this one
| | 00:59 | document instead of creating a new document
for each one, saving me both time and
| | 01:04 | hard drive space.
| | 01:06 | If you go over to your toolbar on the left-
hand side of your screen, you should be able to
| | 01:09 | find the Slicing tools, which are located
about four buttons down inside the toolbar, in the
| | 01:14 | same toolbox as the Crop tool.
| | 01:16 | When you find the Crop tool, just look
underneath and you should see the Slice tool and the
| | 01:20 | Select Slice tool.
| | 01:22 | The Slice tool is what you use to
actually slice up the document.
| | 01:25 | You're not actually cutting pixels per se;
you're just making a selection around an object
| | 01:30 | that then defines an area that Photoshop calls a slice,
which makes it easier to export out that area later.
| | 01:35 | You can also use the Slice Select tool to
modify the slices after you've created them.
| | 01:40 | So if I select this tool here and I come
out into the document, I can actually click on these
| | 01:44 | individual regions and you see that they
highlight each and every time that I click on it.
| | 01:49 | Throughout this chapter we'll be discussing
both slicing and optimizing images for the
| | 01:52 | web, to give you a better idea of how best to get
your artwork out of Photoshop and into a web browser.
| | 01:57 | But I wanted to make sure that we cover the
concept of those slicing so that you would
| | 02:01 | understand what I was talking
about as we continue to explore.
| | 02:06 |
| | Collapse this transcript |
| Slicing up a mockup| 00:00 | Once you've finished designing your artwork
inside of Photoshop, it's time to begin to
| | 00:04 | optimize it for the web.
| | 00:06 | If you're working from a mockup or a collection
of artwork like I am here, it might be a good
| | 00:10 | idea to define your areas of export with the
Slice tool in order to get the most control
| | 00:16 | over your individual images.
| | 00:17 | To access the Slice tool, you're going to
come over into your toolbar and click and
| | 00:21 | hold on the same box where the Crop tool is. Once
you find that, just go down and select Slice.
| | 00:26 | With the Slice tool selected, you may see this small
little number 1 pop up in the top left-hand corner.
| | 00:31 | If you don't see that small number 1, go up to
the View menu, choose Show, and select Slices.
| | 00:38 | With that turned on, you'll be able to actually
see the individual slices as you create them.
| | 00:43 | It may also be a good idea to line up all
of your artwork so that you don't create any
| | 00:47 | unnecessary slices as you go along.
| | 00:49 | For instance, in my document, this small 125 x 125 ad
here doesn't quite line up with the banner above it.
| | 00:56 | So I'm going to line those up.
| | 00:57 | I'll come over into my Layers panel and
I'll grab the 468 x 60 banner, hold down Shift
| | 01:02 | and select the 125 x 125 banner.
| | 01:05 | I'll switch to my Move tool and then I'm just
going to come up to the Options bar and I'm
| | 01:09 | going to click the Align left edges button.
| | 01:11 | That just shifts it over a
little bit. And there we go.
| | 01:15 | Now I'll switch back to my Slice tool,
and I'm ready to start making some slices.
| | 01:18 | I'll start up here on the top.
| | 01:19 | I'll select this big banner.
| | 01:21 | So I'll just click to start to
make a selection and drag it out.
| | 01:25 | You'll notice that the Slice tool actually
snaps to the dimensions. So in this case it's
| | 01:28 | 728 x 90, which is exactly what the ad size is.
| | 01:32 | So it creates a slice
around that object for me.
| | 01:35 | Now, come down, click, and drag out a box.
| | 01:38 | This one should be 250 x 250, and it is.
And I'll click to draw out a box. There we go.
| | 01:46 | And last but not least,
click, and draw out a box.
| | 01:50 | Now let's say that snapping was turned off
or you made a mistake and accidentally drew
| | 01:54 | a slice that was too big, like this.
| | 01:57 | You can always go to these little
control handles and simply resize your slices.
| | 02:02 | If you switch to another tool at any time,
you can always get back to the Slice tool
| | 02:06 | by coming and clicking and holding here, and
you can also switch to something called the
| | 02:09 | Slice Select tool.
| | 02:10 | The Slice Select tool allows you to come in
and simply click on and access each individual
| | 02:15 | slice and rearrange it,
manipulate it, in any way that you see fit.
| | 02:19 | If you need to make changes to these slices,
you can right-click on them and you can choose
| | 02:24 | Edit Slice Options.
| | 02:26 | And so you can do things like name it, give it a URL,
a target window, message text, alternate tags.
| | 02:32 | You can also change the X and Y coordinates
and the width and height of the slice as well.
| | 02:37 | In this case, I'm just going to name the
slices according to their banner size.
| | 02:41 | So for this first one, I'm going
to name it 728 x 90_ad. Hit OK.
| | 02:48 | I'll right-click here, Edit Slice Options.
| | 02:51 | This one will be 250 x 250_ad. Hit OK.
| | 02:58 | Right-click, Edit Slice
Options, 125 x 125_ad. Hit OK.
| | 03:07 | Click on this next one, right-click, Edit Slice
Options, and this one will be 468 x 60_ad. Now I'll hit OK.
| | 03:18 | Now when I'm ready to take these on the web, I can go
under the File menu and I can choose Save for Web.
| | 03:25 | Once I get into the Save for Web dialog box,
I'm now able to click on and select individual
| | 03:31 | slices and then select different optimization
settings for each one. So I can have a series
| | 03:35 | of PNGs, I can have a PNG and a
JPEG, or even a JPEG, a GIF, and a PNG.
| | 03:41 | It doesn't matter how you optimize these
because you get individual control over each
| | 03:46 | single slice that you've created.
| | 03:48 | So even from this one document, I'm going to
get four separate files, which is pretty cool.
| | 03:53 | I'll hit Escape to get back out.
| | 03:55 | Now we'll be covering the Save for Web
dialog box in its entirety in its own movie, but
| | 03:59 | I just wanted to give you an idea of where
that is, so that once you get your slices
| | 04:02 | done, you could jump right in
there and start playing around.
| | 04:05 | So hopefully by now you have a better
understanding of what the Slice tool is and how you can
| | 04:09 | use it to separate your artwork into
individual pieces that you can then optimize to place
| | 04:14 | out on the web.
| | 04:19 |
| | Collapse this transcript |
| Understanding web file formats| 00:00 | When it's time to export our graphics
for the web, we have a big choice to make.
| | 00:04 | Which file format do I use?
| | 00:06 | Well, the truth be told, it's up to
you and your personal preference.
| | 00:10 | But there are some loose guidelines that you
can follow in order to make sure that your
| | 00:12 | images look the best on a web.
| | 00:14 | In web design, we deal with three
basic file formats: JPEG, GIF, and PNG.
| | 00:20 | JPEGs are great for smooth toned images
with no transparency, meaning that there are no
| | 00:25 | transparent or semi-transparent
portions of the image whatsoever.
| | 00:29 | This means that JPEGs are perfect for optimizing
photographs, which have a ton of subtle gradations
| | 00:35 | and a wide gamut colors.
| | 00:37 | JPEGs do not handle images with areas of flat color
very well; this is better suited for GIFs and PNGs.
| | 00:43 | GIFs are ideal for low, flat-color images like
small logos icons and even rasterized text.
| | 00:50 | GIFs are what call palette-based files, which
means that their file size is determined by
| | 00:54 | the number of colors contained within the GIF.
| | 00:56 | While they do support transparency,
they don't do it all that well in my opinion.
| | 01:00 | PNGs are the true stars when it
comes to transparent graphics.
| | 01:03 | What do I mean by transfer graphics exactly?
| | 01:06 | Well, let's take a look.
| | 01:07 | I have open here three files: one is
GIF, one is a JPEG, and one is a PNG.
| | 01:13 | Let me create a new document by
hitting Command+N or Ctrl+N on my keyboard.
| | 01:16 | And I am just going to make this about 800 pixels
wide by about 500 pixels tall and I hit OK.
| | 01:22 | Now I'm going to fill this with a color.
| | 01:24 | It does not matter what color
it is; just any color will do.
| | 01:27 | So I am going to pick a neutral gray, kind
of a dark gray, and then a hit Option+Delete
| | 01:32 | or Alt+Backspace on my keyboard.
| | 01:34 | Now let's say this is a background on a web site and
I want to bring one of these images on top of it.
| | 01:38 | If I want one of these images to have transparency,
I need to use something like a GIF or PNG, right?
| | 01:43 | Well, let's see what the GIF looks like.
| | 01:45 | I'll take this and all I am going to
is just drag it out and drop it in.
| | 01:50 | You see what happened?
Nothing happened. Why is that?
| | 01:53 | First of all, if I go back to that document,
you'll notice the Background layer is locked.
| | 01:57 | Normally, to unlock, it I'd double-click.
| | 02:00 | But if you double-click here, it does nothing.
| | 02:03 | That's because this is
in an indexed file format.
| | 02:06 | In order to get this into that other document,
I have to go Image > Mode, and switch it to RGB.
| | 02:11 | Now I can drag it over and I'll hold on the
Shift key, release my mouse, and release Shift key.
| | 02:18 | Now you notice here that I do
have some areas of transparency.
| | 02:20 | It's not an exact square.
| | 02:22 | However, it did not handle the
drop shadow very well at all.
| | 02:26 | So therefore, this is not the
file format I want for this.
| | 02:29 | So, I will throw that away.
| | 02:32 | Let's drop the JPEG.
Just drag that over, drop it in.
| | 02:37 | And now I have really hard sharp edges all the
way around it and absolutely no transparency.
| | 02:42 | Again, not what I am going for.
| | 02:45 | So I'll just undo that
with Command+Z or Ctrl+Z.
| | 02:48 | Finally, lets check out the PNG.
| | 02:50 | Take that drag it over and I'll drop it in.
| | 02:53 | And that looks like it's
just floating right there.
| | 02:56 | There's nice edges around.
The drop shadow looks perfect.
| | 03:00 | So that is exactly what I needed to
optimize this image with the transparency.
| | 03:04 | So, it may take a little bit of trial and
error when you're working with these web file
| | 03:09 | formats, but my suggestion is you just
export it out, go for the smallest file size you
| | 03:13 | can, and then open these up and test them out.
| | 03:16 | If they look good to you,
you should be good to go.
| | 03:19 | If you start having problems like it did with
the GIF and the JPEG then it's time to re-optimize
| | 03:23 | it as something else.
| | 03:25 | Now PNGs, like GIFs, are palette-based graphics as well,
and they also tend to produce a larger file sizes,
| | 03:32 | so you should be aware of that going in.
| | 03:34 | Usually you can get the lowest file sizes
out of a GIF or a JPEG, but the PNG is the
| | 03:39 | only way to go when you're
doing transparent graphics.
| | 03:42 | In the end the choice is up to you, but
my general rule of thump goes like this:
| | 03:45 | JPEG is exclusively for photos, PNG is great
for logos and big transparent objects, and
| | 03:52 | I really only use GIFs if I have to.
| | 03:54 | As you continue to refine your workflow,
you'll find scenarios for each one of these file
| | 03:58 | formats, and hopefully now you
understand how and why to use each one.
| | 04:03 |
| | Collapse this transcript |
| Exploring the Save for Web dialog| 00:00 | Saving your designs for the web is actually a
pretty streamlined process in Adobe Photoshop.
| | 00:05 | All you have to do is access
something called the Save for Web dialog box.
| | 00:08 | In this movie, I'll be exploring that dialog
box and everything that goes along with it,
| | 00:12 | to help you optimize your
images a little better.
| | 00:14 | In order to access this, I need to go up
to the File menu and choose Save for Web.
| | 00:19 | Inside of the Save for Web dialog
box, there's a lot going on in here.
| | 00:22 | Let me try to break it all down so
we know exactly what's happening.
| | 00:26 | At the very top, you're going to notice
that you have several different tabs.
| | 00:29 | The tabs indicate either the original image,
an optimized version of the image, or you
| | 00:33 | can get a 2-up or 4-up preview to see how
the image looks in different file formats.
| | 00:39 | This is a great way to sort of beta test your
file formats before you actually export them
| | 00:43 | outside of Photoshop.
| | 00:44 | This is where you can really get creative
with the file formats of each individual image,
| | 00:48 | especially in a sliced composition like this.
| | 00:50 | For now, I'm going to switch back to the Optimized tab
so we can see the entire image a little bit better.
| | 00:55 | And let's take a look at the tools we
have available to us on the left-hand side.
| | 00:58 | I have a Hand tool, which allows me to pan
around inside of the document to get a better
| | 01:03 | look at everything.
| | 01:04 | I also have a Slice Select tool so I can
individually select slices and optimize them accordingly.
| | 01:09 | I have the Zoom tool so I can zoom in and
out on different portions of the image and
| | 01:13 | see how it's being
optimized in different areas.
| | 01:16 | If you zoom in on it, you can hold down the Option
or Alt key and then click to zoom out as well.
| | 01:22 | I also have an Eyedropper tool.
| | 01:24 | The Eyedropper tool allows me to select
different portions of it, sampling different colors.
| | 01:28 | There's my foreground
eyedropper color right there.
| | 01:31 | I can also toggle on slice visibility.
If I don't want to see the slices, I can toggle
| | 01:35 | that on and off right there.
| | 01:37 | Towards the bottom of the dialog box, I get
information about the current slice that I'm working on.
| | 01:41 | So right now, this slice up here
is going to be optimized as a GIF.
| | 01:47 | It should take up about 4.427K of space, and it
should load at about 2 seconds on a 56.6 Kbps modem.
| | 01:56 | That's a really old speed, so I
wouldn't worry about that too much.
| | 01:59 | I actually wouldn't worry about
any of these at all necessarily.
| | 02:02 | You can play around with these and see what
the suspected download time would be for that,
| | 02:06 | but it's going to be different for everybody
on every machine and every Internet connection.
| | 02:10 | So the goal here is to get the images as small
as possible while still maintaining quality.
| | 02:15 | You don't want to sacrifice quality, because you
have to have your designs look good on the web.
| | 02:19 | So don't worry too much about file size because
we've got fast computers, fast Internet connections
| | 02:23 | nowadays, and so most of the time,
they're going to load pretty quickly.
| | 02:27 | Over here on the right-hand side of the
screen, you're going to get your presets.
| | 02:30 | You can open up the Presets dropdown and you
can pick different presets that are in here
| | 02:34 | already, like JPEG High, JPEG Low, JPEG Medium,
et cetera. Or you can simply create your own
| | 02:41 | optimization settings right here underneath it.
| | 02:43 | So if you wanted to change the file format,
you change that here. So if I wanted this
| | 02:46 | to be optimized as a JPEG,
I just pick JPEG like this.
| | 02:51 | Then directly underneath that, I would pick the
Compression setting. That's up to you again.
| | 02:55 | Quality setting, whether or not this is a
progressive download, that means does it download
| | 02:59 | in multiple passes, so it downloads a
little bit, downloads a little bit more, kind of
| | 03:03 | a progressive step down as it downloads.
| | 03:06 | Optimized, it tells you here it creates
smaller but less compatible files. That's okay.
| | 03:11 | Do you want to embed a color
profile? No, I do not.
| | 03:13 | I'm going to make sure that it's not checked.
| | 03:15 | You also want to make sure that
Convert to sRGB is not checked.
| | 03:18 | That way you maintain the color
integrity as you take this out of Photoshop.
| | 03:22 | And you also want to make sure that
your preview is set to Monitor Color.
| | 03:25 | If you go back to the color chapter in this
course, you'll understand exactly why I switched
| | 03:30 | that to Monitor Color.
| | 03:31 | And if you wanted to, you can also change
the metadata of the file to add copyright
| | 03:35 | information and all that kind of thing.
| | 03:36 | Now you're not going to see a color table for a
JPEG image because these are not palette-dependent.
| | 03:41 | So if I switched to something like a GIF,
for instance, you will see the entire color
| | 03:45 | palette pop up there.
| | 03:46 | That's because this is a
palette-dependent file.
| | 03:48 | Also in the Image Size section down here at
the bottom, you have the ability to change
| | 03:52 | the size of the image.
| | 03:54 | So if I didn't think this was the right size, I
could actually optimize that for a different size.
| | 03:58 | If you want this to maintain its proportions,
make sure this little chain link looks like this.
| | 04:03 | If you want to be able to distort it, you can break
the chain and then change each number individually.
| | 04:09 | But I don't recommend doing that because you can
create some serious defects in your image doing that.
| | 04:13 | So let's go ahead and click that back on.
| | 04:16 | You can also do that based on percentage and
you can change the quality in which you resample
| | 04:20 | it by choosing Bicubic,
Bicubic Smoother, Bicubic Sharper.
| | 04:24 | Each one is going to be different depending on if
you're going to a larger image or a smaller image.
| | 04:27 | And then once you're finished optimizing
your images here inside of Photoshop, you would
| | 04:31 | click Save to actually save them
out to your hard drive somewhere.
| | 04:35 | Now later on in this chapter, we're going
to go through optimizing individual images.
| | 04:39 | We're going to go through photographs,
transparent graphics, and we're also going to talk a little
| | 04:42 | bit about exporting out Retina display as well.
| | 04:46 | But I wanted to open up the Save for Web dialog
box and give you an idea of everything that's
| | 04:50 | going on in here, so as you work your way
through those other movies, you already have
| | 04:54 | an idea of all of the different tools
and options that we have available to us.
| | 04:58 | And that'll make it a little bit easier to
just go in, save our images, and get out.
| | 05:03 |
| | Collapse this transcript |
| Optimizing photographs| 00:00 | When you're saving photographs to be placed
on the web, it's a little bit different than
| | 00:03 | just saving out a standard JPEG
file from Photoshop normally.
| | 00:07 | So in this movie, we're going to be
exploring how to optimize a photograph for the best
| | 00:11 | quality, and also best size, depending
on where you're sending it on the web.
| | 00:14 | So I am going to go up to the File menu
and I'm going to choose Save for Web.
| | 00:17 | That's going to open up the
Save for Web dialog box for me.
| | 00:21 | And I'm going to make sure, first of all, that
I've got the right format selected, because
| | 00:24 | once I open this up, it might
switch to something like GIF or PNG.
| | 00:28 | For photographs, the best format is going
to be JPEG because that's going to give you
| | 00:32 | the smoothest transition in color.
| | 00:34 | It's also going to give you the widest
gamut of color, and also the best file size for
| | 00:38 | the quality that you get.
| | 00:40 | So let's go ahead and come up here to
the top and let's change this to a JPEG.
| | 00:44 | Now also, it's very rare that I am going to be
putting an image of this size anywhere on the web.
| | 00:49 | This image is 1024 x 768.
| | 00:51 | So let's say for instance that I needed this
to be something that's going to sit in sidebar
| | 00:55 | of one of my web pages, or maybe it's
even the header image of a blog post.
| | 00:59 | So what I am going to do is change the
Image Size down here at the bottom as well.
| | 01:02 | That's going to give me a better idea
of how big this file is going to be.
| | 01:06 | So I am going to come down and let's say that
I need this to be about 600 pixels wide, and
| | 01:10 | once I do that, I'll click in the next box,
and it automatically optimizes it down to
| | 01:14 | that size for me.
| | 01:16 | Now you're seeing here at the
bottom that it is in JPEG format.
| | 01:19 | It's only 48.09 K, which is a pretty small
file size for the size that I am getting here.
| | 01:25 | But I might want to try to
crank that down a little bit.
| | 01:27 | So let's come up here to the top again, and
let's try to optimize this a little bit better.
| | 01:31 | Let's change this from High Quality to Medium
Quality, and you'll notice that I don't see
| | 01:37 | a big shift in the image itself.
| | 01:39 | As a matter of fact, the quality looks just
about the same as it does at the High setting
| | 01:43 | that we just had.
| | 01:44 | However, the file size has
been cut in half to 22.8 K.
| | 01:47 | Now if I take this down even more to Lower,
you're going to start to see some serious
| | 01:51 | artifacts pop up right here
around the middle of the image.
| | 01:54 | And if I zoom in, you'll really start to see
it right around here. So watch the difference
| | 01:58 | between Low, and Medium, High,
Very High, and Maximum.
| | 02:06 | You can see, as you get higher and higher,
the quality difference isn't all that great.
| | 02:12 | It's not like on TV when you see the crime
techs hitting the Enhance button on the keyboards;
| | 02:16 | it's not ever going to be that clear.
| | 02:18 | But dialing this back from Very High to High
even takes it back to 48 K. Dialing it back
| | 02:23 | to Medium takes it back to 22 K.
| | 02:26 | If we kept it on something like Maximum, the
file size would be 226 K. That's extremely
| | 02:31 | large for an image.
| | 02:33 | So backing it down to something like Medium
is very acceptable, and at 100% magnification,
| | 02:37 | I really can't tell the
difference between Medium and High anyway.
| | 02:41 | You can also change the
Quality setting here if you wish.
| | 02:45 | Changing the Quality setting does affect
the overall quality of the image and the file
| | 02:48 | size, so if I crank this up to 100, you see
that goes to 226 K, and cranking that back
| | 02:55 | to 30 changes that to 22 K.
| | 02:57 | Essentially, what you have here are presets for the
Quality, and over here is just a slider for the Quality.
| | 03:03 | So you can drag this up and down to change
the quality and watch the file size change
| | 03:08 | here, or you can simply pick one
of the presets. Totally up to you.
| | 03:11 | Now that I'm finished with the Quality
setting--and I've got a pretty small image, 22.8 K.
| | 03:17 | Seems pretty good.
| | 03:17 | I am going to make sure that
no color profile is embedded.
| | 03:20 | I am also going to make sure
that I'm not converting to sRGB.
| | 03:23 | My preview is in Monitor Color.
| | 03:25 | That way I am getting an accurate preview of
what the image is going to look like on the web.
| | 03:29 | From here, I simply go down to the Save button,
and once I go down to the Save button, I am
| | 03:34 | just going to save this out to my
desktop as big_bot.jpg, and I will hit Save.
| | 03:40 | And now I have that file saved out on my desktop,
and if I open it up, there you see it. It's
| | 03:46 | at 100%, looks pretty good.
| | 03:48 | If I take a look at the original PSD file,
there's not a whole lot of quality loss between
| | 03:52 | the two, if any whatsoever.
| | 03:55 | So I've got a file now that is really optimized
to be on the web as opposed to something that
| | 04:00 | was almost 2.5 megabytes when I first started.
| | 04:03 | So as you start to send your images out for
the web, be sure to take the time to go into
| | 04:06 | the Save for Web dialog box and tweak the
way that they're optimized and all of the
| | 04:10 | different settings that you have available
to you so that you get the smallest file
| | 04:13 | size with the best amount
of quality for your web site.
| | 04:18 |
| | Collapse this transcript |
| Optimizing transparent graphics| 00:00 | One of the great things about Photoshop's
Save for Web is the fact that we have the
| | 00:04 | ability to save out objects that include
transparent or semi-transparent portions in them.
| | 00:10 | In this movie, I am going to be walking you
through my personal workflow for exporting
| | 00:13 | out something that contains transparency,
and explain to you exactly what that means
| | 00:18 | and why I am optimizing it the way I do.
| | 00:20 | So as you can see here, I've got a small web
banner that I need to export out which has
| | 00:25 | a slight drop shadow around the outside of it.
| | 00:27 | So what I want to do is I want to be
able to showcase this on any background.
| | 00:31 | Maybe I'm going to be using this for multiple
projects where it's going on a light background,
| | 00:35 | a dark background, et cetera.
| | 00:36 | I don't want to have to optimize this multiple
times with multiple different background colors.
| | 00:41 | I want to be able to save it out as a
semi-transparent object with this blurry drop shadow that can
| | 00:45 | then be applied to any type
of background that I want.
| | 00:48 | In order to do that, I need to make sure that
I optimize it for transparency by using both
| | 00:53 | the right file format and also cropping
it the right way here inside of Photoshop.
| | 00:58 | So in order to get rid of all of the area
that I don't need here inside this document,
| | 01:03 | there is actually a really cool
little trick that allows you to do this.
| | 01:06 | The first thing that I am going to do I am
simply going to delete the Background layer.
| | 01:10 | Anytime you want to create something with
transparency, the easiest thing to do is to
| | 01:13 | throw that background layer away.
| | 01:15 | So I am just going to drag it down to the
trashcan and throw it away, just like that.
| | 01:19 | Now as soon as you see the checkerboard, that
means that you have transparency behind whatever
| | 01:23 | it is you're working on.
| | 01:24 | Now it's very hard for me to see how far that drop
shadow reaches out around the edges of this thing.
| | 01:30 | So if I were to grab the Crop tool and try
to make an adjustment to this, it would be
| | 01:35 | very hard unless I zoomed in really, really far to
get exactly the amount of pixels that I needed.
| | 01:41 | So what I am going to do is I am going to
hit Escape to get out of that and switch back
| | 01:44 | to the Move tool instead.
| | 01:46 | With the Move tool selected, I'm going to go
up to the Image menu, I'm going to choose
| | 01:50 | Trim, and inside of the Trim dialog box,
this option right here at the top where I base
| | 01:56 | it on a certain criteria, I am
going to base it on transparent pixels.
| | 02:00 | So I am going to say okay, find the
transparent pixels in my image and just trip them away.
| | 02:04 | Once I do that, watch
what happens to my image.
| | 02:07 | It automatically trims everything
that is completely transparent.
| | 02:11 | Anything that has even the slightest bit of
pixel data in it is going to remain uncropped.
| | 02:17 | This makes sure that my
drop shadow looks perfect.
| | 02:20 | I maintain the transparency, but I
shrink the image down as much as I can.
| | 02:25 | So now, once I had that image trimmed, I can
go up to the File menu and choose Save for
| | 02:30 | Web and actually get it out of here.
| | 02:32 | So let's go to File > Save for Web.
| | 02:34 | Once I am inside the Save for Web dialog box,
it's going to pop up and it's probably going
| | 02:38 | to recommend the last setting I used, which
happens to be a JPEG on a medium setting.
| | 02:42 | Now this is a great example of why JPEGs are bad,
both for transparency and for flat-color objects.
| | 02:47 | You'll notice here that I get this white
border around the drop shadow area. That's bad.
| | 02:52 | Also, if I zoom in, see all these little
artifacts that are around the text and around the image
| | 02:56 | in this flat color areas?
JPEGs don't handle that well.
| | 02:59 | So let me zoom back out.
| | 03:01 | Watch what happens when I
switch from JPEG to PNG.
| | 03:03 | You are going to notice two things: my
transparency comes back and if I zoom a little bit, all
| | 03:08 | of those artifacts in the
flat areas have gone away.
| | 03:12 | So, PNG, awesome for this type of graphic.
It's also the best when supporting transparency.
| | 03:18 | Now if you want turn the transparency off
in this, which I don't know why you would,
| | 03:21 | but if you do, you can click
this box here and it goes away.
| | 03:25 | You'll notice that when I turn Transparency
off the file size shrinks just a little bit.
| | 03:30 | Turning it back on adds a couple of K.
| | 03:33 | I'm okay with that.
| | 03:34 | That's no big deal to me.
| | 03:36 | Now once I do that, I can change the size of it.
| | 03:38 | Right now it's 260 x 260.
| | 03:40 | I can change it if I want to. I don't have to.
| | 03:43 | And when I'm ready, I hit Save.
| | 03:45 | Once I hit Save, this dialog box pops up.
| | 03:48 | I am just going to save it to my desktop, and I'll
call it transparent_bot.png and I will hit Save.
| | 03:55 | Once I do that, I can then open it
up by hitting Command+O or Ctrl+O.
| | 04:00 | Once I open it up, you can see it's just one
single layer inside of here. layer 0, and if
| | 04:06 | I create a new document--I will
just do 1024 x 768; that's fine--
| | 04:10 | I can fill this with any color I want.
| | 04:12 | So I will fill it with a really wacky color like
pink and then I'll drag this over and drop it in.
| | 04:18 | You can see that it looks like it's just
floating there. And it doesn't matter if I select the
| | 04:22 | background and change the background color.
| | 04:24 | I can change this to whatever color I want.
| | 04:28 | And because I saved this out as a transparent
PNG, the drop shadow looks perfect every time;
| | 04:33 | the edges are nice, clean, and crisp; and
I have no artifacts in the middle of those
| | 04:37 | flat-color areas.
| | 04:39 | So, the next time you go to optimize out a
transparent graphic, whether it would be a
| | 04:43 | button, an ad banner, or even a logo, try
using the PNG file format and making sure
| | 04:48 | that you use that Image Trim command so that
you get a nice tight fit around it while still
| | 04:53 | maintaining all of your transparency areas.
| | 04:58 |
| | Collapse this transcript |
| Saving Retina display graphics| 00:00 | Creating graphics for high-pixel-density displays
like Apple's iPhone 4 and 4S can be a tricky process.
| | 00:07 | These screens are oftentimes double the
resolution of others and rely heavily on a high number
| | 00:11 | of pixels per inch, or PPI, in
order to look so crisp and clean.
| | 00:15 | As designers we must be ready for this shift,
because now with Apple releasing Retina display
| | 00:20 | computers, the days of
designing for one resolution are gone.
| | 00:24 | The problem here is that while we have to
account for the new high-resolution displays,
| | 00:27 | we can't forget about the
people who don't have them.
| | 00:30 | There are still millions of people who are
using older, smaller monitors, or who don't
| | 00:34 | own products like an iPhone or an iPad.
| | 00:36 | So we have to take care of these people too.
| | 00:38 | The solution here is to work closely with
your developer and understand exactly what
| | 00:42 | they need to deliver images to
all of the devices and screens.
| | 00:46 | If you're already a web designer and you
know how to take your images from Photoshop and
| | 00:49 | turn them into code, what you'll have to do
is utilize something called CSS media queries
| | 00:53 | in order to deliver the right graphics to
the right screen based on certain criteria.
| | 00:57 | When you're designing mobile applications
for iOS, for example, you'll need to provide
| | 01:01 | two sets of images:
| | 01:03 | one for the standard display found in the
older iOS devices, and one set of images for
| | 01:07 | the new Retina Display.
| | 01:08 | These image sets are usually
referred to as either 1x or 2x.
| | 01:12 | You see, when Apple released about the Retina
display for the iPhone 4, they did something
| | 01:16 | very smart in my opinion.
| | 01:17 | They made the resolution exactly double
that of the original iPhone, and therefore we
| | 01:21 | must create graphics that are exactly
double, or 2x, the size of our originals.
| | 01:25 | The key here is to use vector
images when and if possible.
| | 01:29 | In Photoshop, this means relying heavily on
text and shape layers as well as layer styles
| | 01:34 | to do most of our design work.
| | 01:36 | All of these things scale without losing quality, whereas
photographs and filters don't necessarily do so well.
| | 01:43 | If you find something that can't be done in
a scalable way inside of Photoshop, consider
| | 01:47 | doing it in another program
like Illustrator or Fireworks.
| | 01:50 | Both Illustrator and Fireworks are vector
drawing programs and lend themselves more
| | 01:53 | to flexible, scalable
designs than Photoshop ever could.
| | 01:58 | Even though Apple promotes the Retina
display has a higher PPI, or Pixels Per Inch, ratio,
| | 02:03 | the resolution of your
files really doesn't matter.
| | 02:05 | In fact, iOS devices ignore the
PPI settings in images altogether.
| | 02:09 | So you just have to make sure that you get
the dimensions right for each device and then
| | 02:13 | scale it up accordingly.
| | 02:15 | Here's my suggestion.
| | 02:17 | Start by designing your projects at 1x, or the
standard resolution for the original screen.
| | 02:22 | In the case of the iPhone this
means designing at 320 x 480.
| | 02:25 | Make sure you enable Snap To Grid as well,
by going up to the View menu, choosing Snap
| | 02:30 | To, and selecting Grid.
| | 02:34 | As long as you design your artwork using
vector components, when it's time to export it out,
| | 02:38 | you should be able to scale up your artwork
to 200% without losing quality, thus creating
| | 02:43 | a "2x" graphic, which would be perfect
for a Retina display. Let's take look.
| | 02:48 | Here I have a Splash screen for an app that
I'm working on called Happy Bot, and the Happy
| | 02:51 | Bot design that I've been working on
here is actually set to 320 x 480.
| | 02:56 | If I go into the Image Size dialog box, you can
see that the Width is 320. The Height is 480.
| | 03:04 | Now what I want to be able to do is deliver
this at one 1x, which is where it is right
| | 03:07 | now, and also at 2x for the
Retina display iPhone 4 and 4S.
| | 03:12 | So in order to do that, what I need to do
is I need to go up to the Image menu, choose
| | 03:17 | Image Size, and then right here in the Pixel
Dimensions at the top, I need to change this
| | 03:22 | from Pixels to Percent. And then simply enter in
200 and you notice there that it automatically
| | 03:28 | adjust the other one as well, and I'll hit OK.
| | 03:31 | Now when I do that, you're not going to
notice any quality loss in the image.
| | 03:34 | I'm still viewing it at 100%, and
all the edges look crisp and clean.
| | 03:37 | The text looks nice. The Background is
okay. So are the clouds. Why is that?
| | 03:43 | It's because I've used vector images for this design.
You can see I've got a vector shape for the
| | 03:46 | clouds right here. The robot is an
Illustrator file that I placed into the document, so I
| | 03:51 | actually created this in Illustrator
first and then placed it into the file.
| | 03:56 | And the text is just standard vector text.
| | 03:58 | All text inside of Photoshop is vector.
| | 04:01 | So when I went to scale this up to 200%,
there were no real pixels being scaled, so I didn't
| | 04:06 | lose any quality.
| | 04:07 | If I had any of this stuff rasterized or I'd
used any bitmap images inside of this design,
| | 04:12 | when I doubled the size, I would have gotten
artifacts and just--it would have been a mess.
| | 04:17 | So, what do you do if you've to use
bitmap images, like photographs for instance?
| | 04:20 | Well, you start big and then go small.
| | 04:23 | So start at a higher size and then work your
way back down. Always scale down when it comes
| | 04:28 | to pixel-based images; never scale up.
| | 04:30 | It's going to be kind of a tricky thing and
we're still in the very beginning of this
| | 04:34 | whole process of Retina displays.
| | 04:36 | But I wanted to give you an idea of exactly
how to start designing for these things now,
| | 04:39 | so that you have a leg up when the
time comes later on down the road.
| | 04:43 | Now, as far as exporting these things out, it's just
as simple as saving a regular document for the web.
| | 04:48 | You go to File > Save for Web. And in this
case, I've got the 640 x 960 image open here.
| | 04:56 | I would save this out and call it whatever
I'm going to call it and then at the end of
| | 04:59 | it I would append the 2x to it.
| | 05:03 | Same holds true for when I shrink it down,
which I'll do here in the Image Size. I'll
| | 05:06 | type in 320 x 480, and I would save this out as
whatever I wanted to call it and append a 1x to the end.
| | 05:15 | That way when I hand this off to a developer
or if I'm utilizing media queries or something
| | 05:19 | like that in CSS, it's easier for me to tell
which graphic to deliver based on the 1x or 2x
| | 05:24 | extension that I've added.
| | 05:26 | So hopefully by now you have a better
understanding of exactly how Retina display graphics work
| | 05:30 | and how you can optimize and work with
those types of images here inside of Photoshop.
| | 05:35 |
| | Collapse this transcript |
|
|
10. Creating Image SpritesUnderstanding image sprites| 00:00 | Web sites that have a lot of images
in them can take a long time to load,
| | 00:04 | especially if those images are
individually loaded one at a time from a server.
| | 00:08 | In recent years, designers have found a way
to alleviate this pain by using something
| | 00:12 | called an image sprite.
| | 00:14 | Basically an image sprite is a collection of
images that are put together into one single image.
| | 00:19 | When a developer codes the images into the
site, they use the X and Y coordinates of
| | 00:22 | each image to show only the portion
they need at a given place in the site.
| | 00:27 | This reduces the number of server requests and
saves you serious bandwidth and time in the long run.
| | 00:31 | In the example I have here onscreen,
you'll see a series of social media icons.
| | 00:35 | I don't necessarily want to display them all at
once, but I might want to add them individually
| | 00:39 | to different areas of my site, or
showcase them in a list or something like that.
| | 00:44 | By providing this as a sprite, I ensure
that all of the icons are loaded when the page
| | 00:47 | loads and then anytime I need to display a
different icon, I simply change the positioning
| | 00:51 | in my CSS code and that icon shows up
instantaneously without any load time.
| | 00:56 | In this chapter we will be covering how to
create your own image sprites in Photoshop
| | 00:59 | and how to optimize them properly so that
you can hand them off to a developer or use
| | 01:03 | them yourself in your own CSS-based layouts.
| | 01:06 | If you'd like more information about CSS sprites
or CSS in general, be sure to check out Joseph
| | 01:11 | Lowery's course on site navigation with CSS
in Dreamweaver or James Williamson's CSS:
| | 01:16 | Page Layouts course, both of which cover
CSS and implementing image sprites your code.
| | 01:21 | Now let's jump back in a Photoshop and
get started building our own image sprites.
| | 01:26 |
| | Collapse this transcript |
| Creating a sprite grid| 00:00 | Before we can begin building image sprites
in Photoshop, we have to first put together
| | 00:04 | a document with a precise grid that will
allow us to easily position our sprites and
| | 00:08 | give us a clean X and Y coordinate for our CSS.
| | 00:12 | I'll start off by going to
the File menu and choosing New.
| | 00:15 | Once I'm inside of the New Document dialog
box, I need to create a document that will
| | 00:18 | accommodate the full width of every icon in
my set, as well as a height of double whatever
| | 00:23 | the icons are, so that I can have both a
normal and a hover state for each different button
| | 00:27 | that I'm creating.
| | 00:29 | So in this case each one of my icons is 32 pixels
x 32 pixels, so I've got five icons in my set.
| | 00:35 | That equals 160 pixels across. And then each one
is 32 pixels tall, so I need that to be double.
| | 00:40 | That will be 64 pixels tall. And I'll hit OK.
| | 00:44 | Once I do that, I need to go in and
set up some preferences for my grid.
| | 00:47 | So I use Command+K or Ctrl+K
to open up my Preferences.
| | 00:50 | I'll go into Guides, Grids & Slices.
And inside of my Grid section by default it should say
| | 00:56 | something like 1 inch over here on the right.
| | 00:59 | I'm going to change this to say 32 pixels.
| | 01:04 | So I want one gridline every 32 pixels,
making it easy for me to assemble each 32 pixel x
| | 01:10 | 32 pixel square into its own little slot.
| | 01:13 | I'll hit OK. And now I
need to turn on the grid,
| | 01:16 | so I'll go to View > Show, and
I'll select Grid. There we go.
| | 01:21 | Each one has its own little
32 pixel x 32 pixel square.
| | 01:24 | Now as you work, you may find that
the grid is a little bit distracting.
| | 01:26 | It kind of takes away from the colors and
it might not give you a good representation
| | 01:30 | of what your artwork is actually looking like.
| | 01:32 | So if you don't like these little gridlines
all over your artwork, you can simply draw
| | 01:35 | out guides to replace them.
| | 01:37 | That's what I'm going to do now.
| | 01:38 | So I'll draw out some horizontal guides. And if
you can't see your rulers, hit Command+R or
| | 01:42 | Ctrl+R to bring those up.
| | 01:44 | And I'll just drag out a ruler guide here,
drag one out there, and they should snap right
| | 01:50 | to these gridlines.
| | 01:52 | And I'll draw out some vertical lines as well, just
so we have some boundaries. And there we go.
| | 01:58 | So now that I have all of those lines, I can
actually go up to the View menu, choose Show,
| | 02:03 | and turn off the Grid, and now I have a nice
clean white canvas right there in the middle.
| | 02:07 | Notice when I mouse over these I no longer
get that small little control handle anymore.
| | 02:11 | I can't do anything with them
because the guides are locked.
| | 02:14 | So now I'm simply going to save this out and
then I'm going to be able to use that to assemble
| | 02:19 | my image sprites going forward.
| | 02:21 | So anytime I have a 32 pixel x 32 pixel icon sprite
that I need to create, this is what I would do.
| | 02:27 | Now depending on how many icons in my set
that I have, I might have a wider document
| | 02:31 | or if I need more than one state, I might
have a taller document. But this is the basic
| | 02:35 | setup for every time I create a
32 pixels x 32 pixels sprite.
| | 02:39 | Now if you have 64 pixels x 64 pixel sprites, you do
the same thing; 512 x 512, whatever it might be.
| | 02:45 | It would always depend on what type of images
you're working with, what type of icons you're
| | 02:49 | designing, but this is the basic way that
I set up my sprites each and every time.
| | 02:54 |
| | Collapse this transcript |
| Assembling a sprite| 00:00 | Once you've got a sprite grid created, you're
ready to start assembling your image sprite.
| | 00:04 | I have open here a series of icons that I
want to put into an image sprite, and I am
| | 00:08 | going to utilize my sprite grid that
I've created over here in order to do that.
| | 00:13 | So I will go back over into my icons document and I
will just select all of those different layers.
| | 00:17 | You see here I have twitter, facebook,
dribble, forrst, and g+. And I'm simply
| | 00:21 | going to move all those over to the other
document by clicking and dragging them over,
| | 00:26 | and then I will release right there.
| | 00:29 | Now I can select them individually and
position them in the correct slots in my grid. So I
| | 00:34 | will select twitter first and I will just
drag twitter up and snap it right into place.
| | 00:39 | If you find that your icons aren't snapping,
just go up to the View menu and choose Snap
| | 00:43 | To, making sure that they snap to
the gridlines that you have created.
| | 00:48 | Do facebook next, snap that up; dribble goes right
there in the middle; forrst and finally, g+.
| | 00:58 | There we go!
| | 01:00 | And so once I have those done, I'm ready to
now add the hover state down here at the bottom.
| | 01:05 | So I'm going to select all of these, and I'm simply
going to hit Command+J or Ctrl+J on my keyboard.
| | 01:11 | And once I do that, I get copies of all of
those. And now I am going to come out with
| | 01:14 | my Move tool and I am just going to move them
down until they snap to the bottom, like so.
| | 01:19 | I've still got all of these selected over here
and I am going to group them together with
| | 01:22 | Command+G or Ctrl+G.
| | 01:24 | Then I'll select the bottom layers by
Shift+Clicking and Command+G or Ctrl+G to group those as well.
| | 01:30 | So this top row here, I am going to name
that Grayscale, and the bottom row, I am going
| | 01:37 | to name that Color. And I will drag the Color
beneath the Grayscale so we know which one is which.
| | 01:42 | And so now, for the Grayscale group what I
want is for this top row, I want that to be
| | 01:46 | in gray and then the bottom row,
I want that to be in color.
| | 01:49 | So basically what's going to happen when
the developer gets a hold of this, it's going
| | 01:52 | to display either the twitter, facebook, dribble,
forrst, or g+ icon as gray at first, and then
| | 01:59 | when someone hovers over that icon, it's going to
shift upward to actually show the colored version of it.
| | 02:05 | To the end user it looks like the image is
just simply changing, but in fact all it's
| | 02:09 | doing is shifting the position of
the sprite inside of a little window.
| | 02:12 | So I will go ahead and come up to the Grayscale,
click on the g+ icon right here,
| | 02:18 | and then I'm simply going to add an adjustment
layer of Black & White. And it really doesn't
| | 02:24 | matter what this looks like.
| | 02:25 | I can just collapse this. And then
I'll collapse this group, just like that.
| | 02:30 | Now since the Grayscale group is actually
on top of the Color group, the Black & White
| | 02:33 | layer is going all the way through.
| | 02:34 | If you want to change that, just drag the
Color group back on top of the Grayscale and
| | 02:38 | now everything is good to go.
| | 02:39 | So once we have the sprite assembled, let me
show you exactly how this is going to work.
| | 02:43 | I will create a brand-new document,
32 pixels x 32 pixels. Hit OK.
| | 02:47 | So when I am trying to display this somewhere
on the web, this is the window in which I'm
| | 02:51 | giving it to display, 32 pixels x 32 pixels.
| | 02:55 | If I have my image sprite here displayed in
this little window, I can only have room for
| | 03:01 | one icon at a time.
| | 03:03 | So let me create a flattened copy of this
and then move it over there so I can show
| | 03:07 | you exactly what it's going to do.
| | 03:09 | So I am going to go to my keyboard here and
I am going to hold down, it seems like the
| | 03:13 | entire left-hand side of the
keyboard, but it's not really.
| | 03:16 | Shift+Option+Command on a Mac, Shift+Alt+Ctrl
on a PC, and then press the letter E on your
| | 03:22 | keyboard. And you see that it gives me this
new layer 1. And so now I am just going to
| | 03:27 | take this layer 1 and I am going to move it
over into this document here. And I'll zoom
| | 03:32 | in so you can kind of see what it's doing.
| | 03:34 | And I will move that in
and snap it just like that.
| | 03:37 | So if I was displaying the Twitter icon like
this, this is what the user would see initially.
| | 03:43 | All the rest of that image is hidden
by a box that the CSS is controlling.
| | 03:48 | Now, when the user hovers over this,
the actual image will shift upward like this to reveal
| | 03:55 | the colored portion of the icon, and
it's doing that through CSS positioning.
| | 04:00 | It looks instantaneous to the user.
| | 04:02 | They don't actually see this sliding up and
down necessarily, but that's how it works.
| | 04:08 | Same holds true if I had the
Facebook icon in a window like this.
| | 04:12 | The user hovers over it, the position
merely shifts, and the colored icon is revealed.
| | 04:19 | When they mouse away from that, the original
icon comes back, and that's all controlled
| | 04:24 | through the CSS properties.
| | 04:26 | The best part about this is though, all of these
images are loaded already, so it's instantaneous
| | 04:32 | whenever we display them anywhere
else on the site. Pretty neat!
| | 04:37 | So I will go ahead and hit Don't Save there,
come back into my document, and I will throw away
| | 04:40 | this layer 1. I just wanted to show
you that for demonstration purposes.
| | 04:45 | And so now we've essentially got our sprite
completely created and we are ready to take
| | 04:49 | it out and put it on the web.
| | 04:54 |
| | Collapse this transcript |
| Optimizing sprites for the web| 00:00 | Once you've got your sprites assembled here
inside of Photoshop, it's time to take it
| | 00:04 | out on to the web, and we do that by
utilizing the Save for Web command.
| | 00:08 | I'm going to the File menu
and choose Save for Web.
| | 00:11 | Optimizing sprites is really no different
than optimizing any other type of graphic.
| | 00:16 | The only thing you have to consider is whether or
not there's transparency present in your design.
| | 00:20 | In this case there is no transparency in my
design, but there are large bits of flat color,
| | 00:25 | and so saving this out as a JPEG might prove to be
detrimental to the overall quality of the image.
| | 00:30 | Seeing as these are smaller images,
it might be well served to save them out as a GIF.
| | 00:35 | If I look at this and zoom in,
it's actually not that bad.
| | 00:39 | I don't lose any of the color quality.
| | 00:40 | There are no artifacts or anything like that,
and GIFs really do handle these large blocks
| | 00:45 | of color pretty well.
| | 00:47 | You can also see that the size of
this image is really small, 3.5K.
| | 00:51 | That's really good.
| | 00:53 | So I think I am going to
stick with the GIF setting here.
| | 00:55 | I'll choose Save, and I'll just put on my
desktop as social_sprite, and click Save.
| | 01:03 | Now, had my image had rounded corners or bits
of transparency like drop shadows and things
| | 01:08 | like that, I would've had to save it out as
a PNG graphic. Or if these were photographs,
| | 01:12 | I might save those out as a JPEG. But in
general, we are dealing with small sprites like this,
| | 01:17 | a GIF or a PNG is almost always the way to go.
| | 01:20 | So hopefully by now you have a better
understanding of how to assemble and create image sprites
| | 01:24 | here inside of Photoshop and also how to get
them out of Photoshop for use in your own HTML
| | 01:29 | and CSS projects.
| | 01:34 |
| | Collapse this transcript |
|
|
11. Automating Your Web WorkflowCreating a basic action| 00:00 | As a designer, I'm always trying to streamline
my workflow and make myself more productive.
| | 00:05 | The best way to do that inside of Photoshop is
to start using some of the automation tools.
| | 00:09 | One of the best automation tools inside of
Photoshop are actions, and in this movie
| | 00:13 | we're going to be exploring the Actions panel,
and we'll also create our first basic action
| | 00:17 | so we can understand how they
work and why they're so useful.
| | 00:20 | First things first:
let's open up the Actions panel.
| | 00:23 | I'll go up to the Window
menu and choose Actions.
| | 00:25 | Once I've the Actions panel open, I'll expand
it down so you can see it, and I'll also expand
| | 00:30 | out the Default Action set.
| | 00:32 | There are several actions that ship with
Photoshop, but most of these aren't going to give you
| | 00:36 | anything useful, in my experience.
| | 00:39 | So I usually just collapse these up and work
from my own actions and my ownaction sets.
| | 00:43 | Action sets refer to the folders, like
you see here, that contain various actions.
| | 00:48 | I always look at it as, I group actions
according to the different types of tasks that I'm doing
| | 00:53 | inside of Photoshop.
| | 00:54 | So for instance, I might have some resizing
actions, some cropping actions, some web or
| | 00:59 | usability-testing actions.
| | 01:01 | I might have some filter or creative actions.
| | 01:03 | I group all of those into their own separate
sets, making it easier for me to access the
| | 01:07 | actions I need at any given time.
| | 01:10 | For this particular demonstration,
I'm going to create a new action set by coming down
| | 01:13 | and clicking right here on this
Create new action set folder.
| | 01:18 | Once I do that, I'm going to call
this Mobile Testing and hit OK.
| | 01:24 | Once I've created my new action set,
I'm ready to start creating actions inside of it.
| | 01:27 | In order to do that, you're going to
come down and click this New Action icon.
| | 01:32 | Once you click that icon, the New Action dialog box
comes up and you can type in the name of your action.
| | 01:37 | For this action I'm going to
call it Retina Display Test.
| | 01:40 | I'll save it to the Mobile Testing set.
| | 01:43 | Now the cool part about actions is the fact
that you can assign function keys to these.
| | 01:47 | So if you really want to get quick, you can
actually assign a keyboard shortcut to this action.
| | 01:51 | So something like Shift+F2 or
Shift+Command+F3 or whatever you might wanted to use.
| | 01:56 | You can also assign a color, which comes in
handy when using something called Button mode.
| | 02:00 | I'll go ahead and turn on the red color, and
we'll see what that means in just a moment.
| | 02:03 | Now I'm going to hit record.
| | 02:05 | Here is the part where a
lot of people get thrown off.
| | 02:07 | They hear the word "record" and
they automatically think of timing.
| | 02:10 | They think that they're being timed, so they rush
through and they do things and they might make mistakes.
| | 02:15 | You're not being timed when you're
creating actions inside of Photoshop.
| | 02:19 | Photoshop merely has flipped on a switch to
say, okay, anything this guy does while this
| | 02:23 | is turned on, I need to remember, because
he's going to want to do this again later
| | 02:27 | and I don't want him to have to go back
to the menus and find all the stuff again.
| | 02:31 | So it's merely recording steps, not the
amount of time it takes you to do them.
| | 02:35 | In my experience, it's always good practice
to write down every step of the action that
| | 02:39 | you're going to perform
before you actually record it.
| | 02:42 | Maybe actually go through and practice that
as well a few times before you go through
| | 02:46 | the recording phase.
| | 02:47 | That way when you go through and record it,
you ensure that you get it right each and
| | 02:50 | every time, and you don't
have to re-record the action.
| | 02:53 | Basically, what I'm going to do here is I'm
going to set up an action that tests this
| | 02:57 | for our Retina display.
| | 02:58 | In order to do that, I need to scale the
image up, but I want to add something to that: a
| | 03:03 | snapshot in the History panel.
| | 03:05 | The snapshot in the History panel allows me
to go back and forth between the original
| | 03:08 | image and the new Retina graphic.
| | 03:11 | So I'll first go over to the History panel,
I'll go down to the bottom of the History
| | 03:14 | panel, and I'll select this small icon which
looks like a camera to create a snapshot.
| | 03:19 | Then I'm going back over to the Actions panel.
| | 03:21 | In the Actions panel, you'll see a new step
has been added that says Make snapshot.
| | 03:25 | So it actually recorded what I did.
| | 03:27 | Now I'll go up to the
Image menu, choose Image Size,
| | 03:31 | change Pixels to Percent, and
change this to 200, so 200%. Hit OK.
| | 03:38 | Now you see Image Size is right there.
| | 03:39 | If you toggle the little triangle next to
any one of these steps, it actually shows
| | 03:43 | you what you did in the step.
| | 03:46 | I'll toggle that back up to close it.
| | 03:47 | When you're ready to complete the action, come down
to the bottom of the Actions panel and click stop.
| | 03:52 | Now any time I want to run this action on
anything else, all I have to do is open the
| | 03:56 | file and click the play button.
| | 03:59 | So let's revert this file by going to
File > Revert, and I'll go over to the History
| | 04:04 | panel, and I'll also remove
the snapshot that I created.
| | 04:08 | There we go. And I'm going to go ahead
and go back over to the Actions panel.
| | 04:13 | I'll select Retina Display Test and I'll
come down to the bottom and I'll hit play.
| | 04:18 | When I hit play, all the steps that I just
did play back on the image, and if I go over
| | 04:23 | to the History panel, I have my new
snapshot right there. And check this out.
| | 04:27 | I can go from 1x to 2x just by clicking.
| | 04:31 | So I get to test the clarity and alignment
of all my objects for both the Retina display
| | 04:36 | and the regular display on the iPhone, just
by toggling back and forth between these.
| | 04:41 | If I go back to the Actions panel, I can
also switch to something called Button mode,
| | 04:45 | by clicking on the Actions panel
menu and choosing Button mode.
| | 04:49 | Remember earlier when I assigned the red color to my
action? There it is, at the bottom, Retina Display Test.
| | 04:54 | So if I do File > Revert again,
I can click Retina Display Test.
| | 05:00 | It plays everything back.
There it is, at 2x.
| | 05:02 | If I go to the History panel, I now have another
snapshot, which I can go back and forth anytime I want to.
| | 05:09 | Pretty neat!
| | 05:10 | So it will probably take some time for you
to develop all of your actions, and you may
| | 05:13 | not even know what things you do repetitively
that would require an action inside of Photoshop.
| | 05:19 | But as you continue to evolve your own personal
workflow, you'll find things that become repetitive.
| | 05:23 | Try doing those as actions and recording
your steps to save yourself some time down the road.
| | 05:32 |
| | Collapse this transcript |
| Exploring batch processing| 00:00 | Another great way to automate your workflow
inside of Photoshop is to utilize something
| | 00:04 | called batch processing.
| | 00:06 | In this movie I'm going to be exploring the
Batch Processing command, but I first want
| | 00:09 | you to load up an action that I've provided for you
inside of your chapter 11 exercise files folder.
| | 00:14 | Let's bring up the Actions panel first by
going to Window and selecting Actions. And
| | 00:19 | inside of the Actions panel, I want to go
up to the panel menu in the top-right corner
| | 00:22 | and choose Load Actions. And then inside of
your chapter 11 exercise files folder
| | 00:28 | should be a Resizing.atn file.
| | 00:31 | Hit Open. Once that's open, you should see the
Resizing action set, and inside there should
| | 00:35 | be a Resize 400pixels Wide action.
| | 00:38 | I can now collapse the Actions panel and I'm
ready to go into my Batch Processing command.
| | 00:42 | Let me explain exactly
what batch processing means.
| | 00:45 | Basically, you are wanting to
change a group of images in some way.
| | 00:49 | In this case I want to run an action on them
and then have them save out to a different
| | 00:53 | folder, and that's exactly what I can do inside
of the Batch Processing command without actually
| | 00:57 | having to open up each
individual image and do all this myself.
| | 01:01 | So I'm going to go up to File,
choose Automate, and select Batch.
| | 01:05 | Inside of the Batch command, I want to make
sure that I'm set to the Resizing set. My
| | 01:09 | Action is Resize 400pixels Wide.
| | 01:11 | I'm going to choose a folder for my Source,
and I'll select to the Batch folder inside,
| | 01:16 | and I'll hit Choose.
| | 01:19 | For my Destination, I want to
send my images to a folder.
| | 01:22 | I'll choose the folder here and I'll select
the resized folder, which is inside of that
| | 01:26 | Batch folder.
Then I get to change my file name.
| | 01:30 | In this case, I'm going to change it to robot,
I'll set it to a two-digit serial number, and
| | 01:38 | then I'll add the extension.
| | 01:41 | So as you can here, I've got robot01, 02,
03, et cetera, and then the extension.
| | 01:47 | It says .GIF right here, but that's okay.
| | 01:49 | You don't have to worry about that.
| | 01:50 | It's not actually going to save it as
GIF; that's just for demonstration purposes.
| | 01:53 | And so now I'll also select Windows and UNIX
compatibility, just for safety's sake. And now
| | 01:58 | I'm going to hit OK.
| | 02:00 | Once I hit OK, it goes through.
| | 02:02 | It runs that action--you saw how quick it--was on
each one of those photos.
| | 02:06 | And if I go and open those by going to
File > Open, now in the Resized folder, I have
| | 02:12 | robot01, 02 and 03. And if I select those
and open them, they all open. And if I go
| | 02:17 | to Image > Image size, they are 400 pixels wide each.
Image > Image Size, 400 pixels and 400 pixels.
| | 02:32 | So it would actually open those files for
me, converted them to 400 pixels wide, and
| | 02:36 | then saved them back out in a separate folder
with a different file name, all in one single
| | 02:41 | action. Pretty neat!
| | 02:43 | So the next time you have to perform an
action or resize or anything on multiple images at
| | 02:48 | a time, whether it'd be 3 or 300, try using
the Batch Processing command and see how much
| | 02:53 | time it truly saves you.
| | 02:58 |
| | Collapse this transcript |
| Creating droplets| 00:00 | Another way of extending batch processing even
further is to utilize something called a droplet.
| | 00:05 | Droplets are basically applications that
live on your hard drive which enable you to run
| | 00:09 | batch processing commands without
actually having to go into Photoshop first.
| | 00:13 | These are great for distributing out to people
who might not be aware of how Photoshop works
| | 00:17 | and how to run the Batch command.
| | 00:18 | Basically, this little
app sits on your desktop.
| | 00:21 | You drag a folder of images on top of it,
it launches Photoshop, runs the action, and
| | 00:25 | you're good to go. It's a great timesaver and it's also great
for sharing the actions that you've created
| | 00:30 | inside of Photoshop to other people
in your office or in your workgroup.
| | 00:33 | Let's take a look at how it works.
| | 00:35 | First things first:
I'm going to load up an Action.
| | 00:36 | So I've got the Actions panel open; you can
go to Window > Actions to bring that up. And
| | 00:41 | I'll go here and I'll choose Load Actions,
and inside of my exercise files folder, chapter
| | 00:46 | 11, I have Resizing.atn.
Hit Open. There we go!
| | 00:50 | Now I go to File > Automate,
and select Create Droplet.
| | 00:55 | Inside of the Create Droplet dialog box,
I have to choose where I'm going to save it.
| | 00:58 | In this case, I'll save it to my Desktop and
I'm going to call this resize400. And it'll
| | 01:04 | append the .app extension, if you're on a Mac.
| | 01:06 | If you're on a PC, it'll add .exe.
| | 01:09 | Unfortunately, droplets
are not cross-platform.
| | 01:13 | Now let's go ahead and hit Save.
| | 01:14 | It's going to ask me for my set.
| | 01:16 | In this case, I want to use the
Resizing Set, the resize400 Action.
| | 01:20 | My Destination, I'm going
to save it to a folder.
| | 01:22 | Now here's the deal when
you're using droplets.
| | 01:24 | It's going to assume that you want to
use this folder each and every time.
| | 01:26 | So what I do is I set a folder somewhere on
my hard drive and I call this Processed or
| | 01:30 | Processing or something like that.
| | 01:32 | That way I've always got it in the same place.
| | 01:34 | It throws all the images that I need in there.
| | 01:35 | I can just go and grab them and
move them wherever I need to go.
| | 01:39 | So in this case, I'll choose, on my Desktop, I'll
create a new folder, and I'll call this processed.
| | 01:46 | Hit Create and I'll hit Choose.
| | 01:48 | Now, for the file name,
I'm going to leave the document name.
| | 01:51 | I'll add a two-digit serial number,
and then I'll add the extension afterwards.
| | 01:57 | Now I'm going to hit OK.
| | 01:59 | Once I hit OK, I now should have
that droplet out on my desktop.
| | 02:02 | Let's go take a look.
| | 02:03 | On my desktop, I have this new little icon
right here with an arrow pointing down, indicating
| | 02:07 | that I can throw something onto it and it will
automatically resize to 400, just like it says.
| | 02:12 | So I'll open up my exercise files folder,
go to chapter 11, and find the Batch folder.
| | 02:18 | Inside of the Batch folder, I'll just take
it and drop it right on top of that droplet.
| | 02:24 | It launches Photoshop, it runs the action
that I specified, and now if I go back to
| | 02:28 | the desktop and look in my processed
folder, there's my robot01, 02, and 03.
| | 02:34 | I didn't even have to launch Photoshop.
| | 02:36 | If Photoshop wasn't running to begin with,
the droplet would've launched it for me, ran
| | 02:39 | the action, and saved out all the
images for me anyway. Pretty cool!
| | 02:43 | Now I can close this, go back
into Photoshop, and continue working.
| | 02:46 | So as long as you're sharing these with people
that are on the same operating system--a Mac
| | 02:50 | or a PC--you should be good to go, in terms
of letting other people use these droplets
| | 02:54 | that you've created.
| | 02:55 | You can also go online and find a ton of
free droplets that people have created that you
| | 02:59 | can download to your computer and
use to do all sorts of neat things.
| | 03:03 | Just go to Google and type in "Photoshop
Action" or "Photoshop Droplet," and you'll be amazed
| | 03:08 | at the type of things that you can find.
| | 03:10 | In any case, utilizing actions, batch
processing, and droplets are great ways to streamline
| | 03:15 | your workflow and get yourself to be
more productive inside of Photoshop.
| | 03:20 |
| | Collapse this transcript |
| Using the Fit Image command| 00:00 | When you're delivering assets to a client
or putting things into a specific web site,
| | 00:05 | you may find that you're constrained to a given
size, like 800 or 600 pixels or something like that.
| | 00:10 | However, the assets and photos that we deal
with inside of Photoshop oftentimes are in
| | 00:14 | different orientations, so it may be sort of
hard to fit those images into those proportions.
| | 00:19 | Rather than opening up images one at a time
and changing the dimensions to fit whatever
| | 00:24 | window we're trying to put it in, it's a good idea
to automate that workflow utilizing something
| | 00:29 | called the Fit Image command and the
Actions panel inside of Photoshop.
| | 00:33 | Let's take a look at
exactly what I'm talking about.
| | 00:34 | So I am going to open up a file by going to
File > Open or hitting Command+O or Ctrl+O
| | 00:38 | on my keyboard, and I'll go into my
exercise files folder and get into chapter 11.
| | 00:43 | Now go into the Fit Image folder.
| | 00:44 | I am just going to select one of the images
in there--in this case it's the retro_car.jpg--
| | 00:49 | and I'll hit Open.
This is a pretty big image.
| | 00:51 | If I go to Image > Image Size, you can see that
it's 2000 pixels wide and almost 2000 pixels tall.
| | 00:57 | So what I want to do is fit this within an
800-pixel window, but I want it to do that
| | 01:02 | based on the longest edge of the photo.
| | 01:04 | So I want the longest edge of
the photo to be 800 pixels wide.
| | 01:08 | And I want that to happen for every one of those
photos in there, whether they're portrait or landscape.
| | 01:12 | So in order to do that, I am going to have to
create an action using the Fit Image command.
| | 01:16 | So let's go first to the Actions panel.
| | 01:18 | I'll create a new action set and I'll call
this Fit Image, hit OK, and I'll create a new
| | 01:24 | action called 800px, and I'll hit Record.
| | 01:29 | So now I am recording this action.
| | 01:30 | I am going to go up to the File menu,
choose Automate, and select Fit Image.
| | 01:36 | When I bring up Fit Image, if I want the
longest edge of the photo to be 800 pixels, I need
| | 01:41 | to specify that as both the Width and
Height values, so 800 pixels and 800 pixels.
| | 01:47 | Basically, what Fit Image does is it resizes
the image and when one of these edges, either
| | 01:52 | the height or the width, hits
800 pixels wide, it stops.
| | 01:55 | I can also say not to enlarge.
| | 01:58 | So I will hit not enlarge and I'll hit OK.
| | 02:01 | So it has fit this image and now
I click Stop in my Actions panel.
| | 02:04 | And if I go to Image > Image Size, you can
see now that the Width is set to 800 pixels
| | 02:10 | and the Height is set to 600 pixels.
| | 02:12 | So that's what it did: it fit it within that
800-pixel window that I gave it.
| | 02:16 | Had it been taller than it was wide, then
the Height would've stopped at 800 pixels
| | 02:19 | and the Width would've been
whatever number it would've been.
| | 02:22 | I'll hit Cancel here, and let's try this out.
| | 02:24 | I am going to close this file and I won't
save it. And now I'm going to go up to the
| | 02:29 | File menu, choose Automate, and select Batch.
| | 02:32 | I am going to choose the Set
Fit Image, the Action 800px,
| | 02:36 | the Folder I am going to choose and select the
Fit Image folder, then I'll Choose this folder.
| | 02:41 | I am going to save it to a new destination,
so I'll choose it and I'm going to go out
| | 02:46 | to my desktop and I'll create a new
folder called Fit Image and hit Create.
| | 02:53 | Then I'll hit Choose and for my file naming,
I am just going to change this to Document
| | 03:00 | Name. I'll make sure it has a two-digit
serial number and the extension underneath.
| | 03:04 | So all you have to do is just pick these from the
dropdowns, just like that, okay? Now I'll hit OK.
| | 03:11 | It goes through. It runs this.
| | 03:13 | It may come up with JPEG options; if
it does, just hit OK. And there we go.
| | 03:19 | Now if I go to the File menu and choose Open,
on my desktop, in the Fit Image folder, should
| | 03:26 | be retro_car01, tin_spaceboy,
toy_soldier, and vintage_cycle.
| | 03:32 | And if I open all those up and look at the
Image Size, this one is 800 pixels wide, this
| | 03:40 | one is 800 pixels tall, this one is also 800
pixels wide, and this one is 800 pixels wide.
| | 03:50 | So it fit those images into the specified
width that I gave it, based upon the longest
| | 03:55 | edge of whatever photo that I had open.
| | 03:57 | So this is a great way to automate that
process and then easily get these photos out onto
| | 04:02 | the web or shipped off to your client.
| | 04:07 |
| | Collapse this transcript |
| Using the Image Processor| 00:00 | One final way that we can streamline our workflow
here inside of Photoshop is to utilize something
| | 00:04 | called the Image Processor.
| | 00:06 | The Image Processor is basically a way of
taking multiple images at a time and converting
| | 00:11 | them into a different
format in one fell swoop.
| | 00:13 | Let's take a look at how it works.
| | 00:15 | I'm going to go to the File menu and this
time instead of going to Automate, I'm going
| | 00:18 | to go down to Scripts.
| | 00:19 | And inside of the Scripts menu I'm
going to choose Image Processor.
| | 00:23 | Once I have the Image Processor open, I then have the
ability to follow the steps one, two, and three.
| | 00:29 | So let's go to step one first.
| | 00:30 | I'm going to select a folder. In this case
I have a folder in my chapter 11 exercise
| | 00:35 | files folder called Image Processor, and it's
full of PSD files of flash drives: flash_blue,
| | 00:41 | flash_green, flash_grey, and flash_pink.
| | 00:43 | I'll hit Open and so basically what I want
to do is I want to save a copy of these and
| | 00:48 | I go to step two this time to save in
the same location or select a folder.
| | 00:53 | This time I'll select a folder.
| | 00:54 | I'll choose the Select button, and I'm just
going to add a new folder inside up here, and
| | 00:59 | I'm going to call it JPEG.
Hit Create. There we go.
| | 01:04 | Hit open. Now I go to step three.
| | 01:06 | I'll select my file type.
| | 01:08 | In this case I want to save it as a JPEG.
I'm going to set the Quality setting to 5;
| | 01:12 | that's sort of middle of the road.
| | 01:13 | I'm also going to resize it.
| | 01:15 | These are pretty big.
| | 01:16 | They're actually 1000 x 1000 pixels.
| | 01:19 | Let's say that I'm sending these to a
client for approval and I want them just open it
| | 01:22 | up, quick look at it, and close that.
| | 01:23 | I don't want them to
have to download a big file.
| | 01:26 | So in this case I want to go ahead and change
the Width to 300 pixels and I'll set the Height
| | 01:32 | to 300 pixels as well.
| | 01:34 | Once I get that done,
I can go down here at the bottom.
| | 01:36 | And step four, I can also run in an action
if I want and add copyright information.
| | 01:42 | So from here I'm pretty much ready to go.
| | 01:44 | So I'll hit Run. Photoshop goes through, it
runs through every single one of those images,
| | 01:49 | and now if I go to the Open command--Command+O
or Ctrl+O--and look inside of my JPEG folder,
| | 01:54 | there's actually a new folder called JPEG and
flash_blue, flash_green, flash_grey and flash_pink.
| | 01:59 | And if I open those up, they
should all be 300 pixels each.
| | 02:06 | So if I look at all of them, they're all the
right size, Image > Image Size, 300 x 300 pixels.
| | 02:12 | Exactly what I wanted, in JPEG form. Fast. Easy.
Send them off to the client, and you're done.
| | 02:17 |
| | Collapse this transcript |
|
|
12. Working with Other AppsIntegrating PSD files with Dreamweaver| 00:00 | One of the great things about working with
a suite of products like the Adobe Creative
| | 00:04 | Suite is the fact that all of the apps seem
to integrate seamlessly with one another.
| | 00:08 | This holds true for Photoshop as well.
| | 00:10 | Photoshop works in tandem with many of the
Creative Suite applications, like Dreamweaver
| | 00:14 | for instance, to offer something
called Smart Object integration.
| | 00:17 | Let's take a look at what I'm talking about.
| | 00:19 | So I've got a file open inside of Photoshop
right now which is called robot_ad.psd and
| | 00:24 | I want to take this file and place it into
Dreamweaver and use it inside of that Dreamweaver layout.
| | 00:30 | So let's jump over into Dreamweaver for a
second, and once I'm inside of Dreamweaver,
| | 00:33 | I'm just going to create a
brand-new HTML document.
| | 00:36 | So I'll just click HTML and then
I'm going to go File > Save As.
| | 00:41 | Select where to save this, and basically, I'm
just going to go out to my desktop, into my
| | 00:44 | exercise files folder, and I'll go to chapter 12, and
I'll just save this as test.html, and I'll hit Save.
| | 00:52 | So once I do that, I've got this ready to go.
| | 00:54 | And now let's say that I wanted to
place this into my Dreamweaver layout.
| | 00:57 | All I have to do is go up to the Insert menu,
go down to Image. And in my chapter 12 exercise
| | 01:03 | files folder is robot_ad.psd, I'll hit Open.
| | 01:07 | Dreamweaver comes up for image optimization
for me and says, okay, how would you like
| | 01:11 | to optimize this?
| | 01:12 | Do you want it as a JPEG, do you want
it as a PNG, a GIF? What do you want?
| | 01:15 | Well, this object here has a slight drop shadow
around the outside and I want that drop shadow
| | 01:19 | to be semi-transparent so no matter what color
the background is, it's always shining through.
| | 01:23 | So I'm going to switch this to be a PNG24 for
sharp details, as you see. It's only 15 K.
| | 01:28 | That's not too bad.
| | 01:30 | And so when I hit OK, it's going to
also ask me to save that PNG as well.
| | 01:35 | So I'm going to go my desktop, find my
exercise files folder, and go into chapter 12.
| | 01:40 | Let me expand this box out a
little bit so we can see it.
| | 01:43 | Chapter 12 and I'll just
save it right in there.
| | 01:46 | And it's going to ask me for Alternate text.
| | 01:48 | So in this case, I'll do robot ad and hit OK.
| | 01:52 | So now once it's placed in there,
it's actually a PNG file, but you'll also notice up here
| | 01:56 | in the top that I have this little Image
synched icon going on, which tells me that this is
| | 02:01 | a Smart Object that I can then work with.
| | 02:05 | If I right-click on this image, I can go down to Edit
Original With and I can choose Adobe Photoshop CS6.
| | 02:12 | Once I do that, it's going to jump me back
over into Photoshop and it's going to have
| | 02:15 | this file open for me.
| | 02:17 | So now anything I do to this, I can save and jump back
into Dreamweaver and it should update accordingly.
| | 02:22 | So let's say for instance that my tagline
changes from THE FUTURE IS NOW to something else.
| | 02:26 | Let's go ahead and change that to
ROBOTS ARE COOL, something like that.
| | 02:33 | I'll move it back into the center
like so, and now I'll save this.
| | 02:38 | Once I do that, I'll jump
back over into Dreamweaver.
| | 02:40 | You can see here that I have a little red
icon, indicating that this has been modified
| | 02:44 | outside of Dreamweaver. And I should be able
to right-click and choose Update From Original
| | 02:49 | and it now switches to say ROBOTS ARE COOL.
| | 02:52 | The image is still optimized as a PNG and I
can keep working each and every time I go.
| | 02:57 | So this is a great way to work between Photoshop
and Dreamweaver while maintaining the original
| | 03:02 | file and being able to
update it anytime you want.
| | 03:05 | So the next time you're working inside of
Dreamweaver, try using these Photoshop Smart
| | 03:09 | Objects and see if doesn't
save you a little bit of time.
| | 03:11 | If you'd like more information about
Dreamweaver and how it integrates with Photoshop, be sure
| | 03:15 | to check out James Williamson's Dreamweaver CS6
Essential Training course, which is available
| | 03:19 | in the lynda.com online training library.
| | 03:24 |
| | Collapse this transcript |
| Integrating PSD files with Fireworks| 00:00 | Adobe Fireworks is one of the
unsung heroes of the Creative Suite.
| | 00:03 | It's also one of my favorite
applications for web and screen-based design.
| | 00:06 | I say that mainly because Fireworks is a vector editing
program that allows me to create scalable user interfaces.
| | 00:13 | It also has cutting-edge tools like CSS Export
and a really refined Save for Web area as well.
| | 00:18 | You can open up your Photoshop files inside
of Fireworks and take advantage of all of
| | 00:22 | these powerful features.
| | 00:23 | If you go to File > Open you can find a Photoshop
file, like the robot_ad in the chapter 12 exercise
| | 00:29 | files folder, and open it up.
| | 00:31 | Fireworks is going to ask you how you would
like to open the file. It gives you dimensions
| | 00:35 | and a resolution.
| | 00:36 | You have to rasterize
portions of it, unfortunately.
| | 00:39 | Then you also get to choose the
document state. If there are other layer comps,
| | 00:42 | you could choose that,
but there's not in this document.
| | 00:45 | You also get to choose the way it comes in,
whether or not you maintain the layer editability
| | 00:49 | over the appearance, whether or not you maintain
the appearance, if there is some sort of custom
| | 00:53 | setting, or if you just want
flatten it into one big image.
| | 00:55 | I'm going to choose to
maintain layer editability.
| | 00:58 | That way I get individual
control over each aspect of my design.
| | 01:01 | I hit OK and it opens up my file
just like it would in Photoshop.
| | 01:05 | If I grab my Move tool, you'll see here, I
can select each individual portion of this
| | 01:10 | and I still have layers
over here on the right.
| | 01:12 | It even brought in the layer group.
| | 01:14 | If I wanted to change the text, I just switch
to the Text tool by hitting the letter T and
| | 01:19 | I can select and change the text any way I want.
| | 01:21 | I can then use Fireworks's powerful
vector drawing tools to add things to this.
| | 01:25 | I could also create multiple states and
multiple pages and then when I'm done, I can use the
| | 01:29 | cutting-edge Save for Web tools that are built into
Fireworks to export this out with a minimum file size.
| | 01:34 | I understand that people have a comfort level
with Photoshop and many people enjoy working
| | 01:38 | in that versus working in
any other application.
| | 01:41 | Some people don't even
know that Fireworks exist.
| | 01:42 | But my suggestion to you is to do whatever
you want inside of Photoshop and then bring
| | 01:46 | it into Fireworks to do a little exploration.
| | 01:49 | You'll be glad you did.
| | 01:50 | If you'd like more information about Adobe
Fireworks, check out Ray Villalobos's Fireworks
| | 01:54 | CS6 Essential Training, which is available
in the lynda.com online training library.
| | 01:59 |
| | Collapse this transcript |
| Integrating PSD files with Muse| 00:00 | Another application that integrates
seamlessly with Adobe Photoshop is Muse.
| | 00:05 | Muse is a brand-new
application of the Creative Suite.
| | 00:07 | It's available as part of the
Creative Cloud subscription.
| | 00:09 | Muse is basically Indesign for the web, which allows
you to create web sites without learning any code.
| | 00:14 | Let me jump over into Muse really quickly and
show you how to set up a brand-new document.
| | 00:18 | I'm going to first create a new site.
| | 00:20 | I'll just stick with the defaults for now
and hit OK. And once I am inside of Muse,
| | 00:24 | I want to go ahead and go to the homepage right
here. Just double-click that to start editing.
| | 00:29 | And I can place the object anywhere I want.
And so for now I'm just going to go to File,
| | 00:33 | and I'm going to choose
Place Photoshop Button.
| | 00:36 | Now on my desktop, in the exercise files
folder, I have a chapter 12 exercise files folder
| | 00:42 | and a Muse folder.
| | 00:43 | I'll grab the button.psd and open it up.
| | 00:46 | When I do that, Muse is automatically going to try to
detect things like the Normal, Over, and Down states.
| | 00:51 | If I jump back over into Photoshop, you'll see
that I have layers named Normal, Over, and Down.
| | 00:55 | You don't have to have an active state
necessarily, but you can if you want to.
| | 00:59 | Normal, Over, Down, and Active
are the four states supported here.
| | 01:02 | Once I am inside of Muse, I can actually
choose those states based on the layers.
| | 01:07 | After I line them up, I hit OK, and Muse gives
me a loaded cursor where I can place the button.
| | 01:12 | And I'll just place it somewhere in
the middle of the screen like so.
| | 01:16 | Now if I go to Preview in Muse, I get to hover
over this and it turns into that color, and
| | 01:22 | if I press it, it turns
into the lighter color.
| | 01:25 | So again, there is the Normal, the Over, and
the Down state, just like that. And I didn't
| | 01:31 | have to write any of that code.
| | 01:32 | All I had to do was create
three layers in Photoshop.
| | 01:37 |
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thanks so much for taking the time to join me
for this course on Photoshop for web design.
| | 00:04 | I hope that you enjoyed the course, and I
hope that I have inspired you to dive in and
| | 00:08 | start creating some awesome
graphics for your next web project.
| | 00:11 | There's always more to learn,
| | 00:12 | so here are some great resources to help
jump-start your journey into the world of web design.
| | 00:16 | If you're interested in the basics of web
design, check out James Williams's Web Design
| | 00:19 | Fundamentals course. Or if CSS is your thing,
check out James's CSS: Core Concepts and CSS
| | 00:25 | Fundamentals courses as well.
| | 00:27 | For some fun web project exercises, check out Ray
Villalobos in is weekly View Source series in lynda.com.
| | 00:33 | And if you'd like to learn more about
Photoshop CS6, be sure to check out the Photoshop CS6
| | 00:38 | Essential Training course.
| | 00:39 | All of these course's are available right
now in the lynda.com online training library,
| | 00:43 | so be sure to go and check them out.
| | 00:45 | Thanks again for joining me.
| | 00:46 | My name is Justin Seeley, and I
hope to see you again real soon.
| | 00:51 |
| | Collapse this transcript |
|
|
