How to Create Color Swatches From External Files In Photoshop
Welcome back to another very exciting tutorial here at the PhotoshopTrainingChannel.com.
My name is Jesus Ramirez and you can find me on Instagram @JRfromPTC.
In this video, I'm going to show you how you can bring in colors in Photoshop from external
files.
This video is going to be really helpful for designers who are working on designs that
require the use of specific colors found in external files; files such as HTML, CSS, SVG
or even regular JPEG files.
Our goal is to create a custom color swatch set that can be used when working on projects
that require those specific colors.
What we're going to do first is take a logo and use Adobe Color CC to analyze the colors
and save those colors to a CC library.
Then, I'll show you how to take an SVG and CSS file, and create color swatch sets from
the colors found on those files.
The first two examples require Photoshop CC, but the third example can be followed by anyone
using older versions of Photoshop.
In the third and final example, I'll show you how you can use color tables to grab the
full-color palette from any photograph and how to save those colors as swatches.
We're going to start out by using this logo--the "See Worthy" logo.
It was designed by my good friend Chris Converse.
It was used in a co-presentation that Chris and I did together on designing UI and UX
elements at the Creative Pro Conference.
Chris is an incredibly talented guy and he is also a great presenter.
You can check him out at ChrisConverse.com or check out his courses on both Lynda.com
and Udemy.com.
Okay, let's get started with the tutorial.
So we're going to work with the See Worthy logo and I just want to show you my libraries
panel here.
If you don't see that, you can go to Libraries to enable this icon, so you can click on the
Libraries panel and open it up.
Notice that I currently only have a couple of graphics here, they're Adobe Stock Images.
So what we're going to do is we're going to take the colors of this logo and put them
inside of this Libraries panel so that we can have access to them from anywhere, or
so that we can share them with another Creative Cloud user.
Now we're not actually going to work inside of Photoshop for this.
Instead, we're going to use Adobe Color CC, so you need to go into Color.Adobe.com.
So here we are at Adobe Color CC and I'm logged in.
You can see my name there and my picture, so what I want to do now is bring the image
into this website.
So I'm going to click on this icon here to create a color theme from a photo, so I'm
going to click on that, and I'm going to select the See Worthy logo and press Open.
And that's going to select these colors on that image.
Now, it selected two colors from the same shade of blue, so I'm just going to click
and drag one of those away and select the gray that makes up the text.
I'm going to click and drag that one there to the center, so it's not on the edge and
selecting that weird color.
So, now, we have the white, the two shades of blue, the orange, and the gray.
We can go ahead and save that now.
I'm going to click on the Save button here and I can save this into Creative Cloud library
that I have.
I want to give it a name, so I'm just going to call it "See Worthy."
I'm just going to add a couple of spaces there and this is where I can choose the library
on the Creative Cloud.
And the library there I'm going to use is the one that I showed you a minute ago, the
one called My Library.
I can add some tags if I want to, but I'm not going to do that, and I can click on the
Save button.
This is going to save this color theme onto the Creative Cloud and it should be available
to us in Photoshop, so I'm going to go ahead and open up Photoshop again, and there it
is.
Notice that the color themes are here, with the same colors found on the logo.
If I click on anyone of these colors, the foreground color changes to that color, so,
you can see that blue there and, now, the orange.
I'm going to go ahead and close that panel and I'm going to show you another way that
you can bring in color from different types of files.
In this case, I'm going to show you how to bring in colors from HTML, CSS, or SVG files.
Photoshop can recognize these types of files and, also, can recognize any of these color
syntaxes found here.
So, what you need to do is go into Window, Swatches; that opens up the Swatches panel.
And we can open up anyone of these type of files.
So I'm going to click on the fly-out menu and I'm going to choose Replace Swatches,
and I don't have anything in this folder, or so it seems.
If I switch the types of files that I can select to CSS, you'll see a CSS file that
I have there, or SVG, you'll see an SVG file that I have here.
This is an SVG file of the American flag, so I'm going to go ahead and click on that
and open it up, and notice what happens.
Now, we only have red, white, and blue--the colors of the flag.
And I can open up that file just so you could see what it looks like.
And there you go, that's the flag, and these are the colors that it took from it.
You could also do the same thing for an HTML or CSS file, so I'm just going to do a CSS
file so you can see what that looks like.
This time, I'm just going to load Swatches, which is going to load the colors found in
that file after the colors found in the SVG file.
So I'm going to go into Load Swatches, change the file type to CSS--there's my CSS file
right there--and click on Load.
We still have the red, white, and blue, and all the colors found in that CSS file.
And I'm going to pull up the CSS file just so you can see what that looks like.
As you can see here, this is a CSS, and wherever Photoshop finds color, it saves it on to a
Color Swatch, so these are all the colors that it found on that particular file.
And what I'm going to show you in this final example is take multiple colors from this
image and save them into the Swatches panel here, much like we did with the CSS file.
So, of course, you can upload this image on to Adobe Color CC and save it into your library.
The problem is that you're going to get 5 color swatches, and you may need a whole lot
more than that.
So, what we're going to do is we're going to save this as a color table and use that
as our swatches.
So, let me show you how that works.
We're going to go into Image, Mode, and we're going to convert this from an RGB image to
an Indexed Color Image.
For now, we're going to leave it at 256 and press OK.
So, now, there's only 256 colors on this image that we're going to save as color swatches.
So I'm going to go into Image again, Mode, and this time, I'm going to select Color Table.
And this is our color table right here, and, as you can see, these are the colors found
on the image.
I'm going to save these and I'm just going to call this "Table" and click on Save.
And then, I can just close this window without doing anything else, so I'm just going to
click on that X and close it.
I'm going to go into the Swatches panel.
On the flyout menu, I'm going to click on Replace Swatches, and under the file type,
I'm going to select Color Table, and there it is.
That's the table that we created.
Click on Load, and now, we have the colors found on this image here in the Swatches panel.
And, of course, you can click on these swatches and they'll be selected as the foreground
color.
Another thing that you may want to do is use fewer colors than 256, so if you want less
colors, what you can do is set a different number.
So let me show you how to do that.
I'm going to press Ctrl Alt Z, Command Option Z on the Mac, to undo.
So we're back at the RGB color mode, so we're going to go through that one more time.
I'm going to click on Indexed Color.
This time, instead of 256, I'm going to choose 25, press OK.
So, now, this image is made up of 25 different colors, and I can save those colors as we
did before.
I'm going to go into Image, Mode, Color Table, and here's your 25 colors.
And then, I can go to the same process of saving the file, in this case, I'll call it
"Table 25," save it.
I'm going to close this, go back into the Swatches panel, and, again, I'll replace the
swatches, and this time, I'm just going to select the 25 file there, click on Load, and
here we have our 25 colors.
And that's it for this tutorial.
I hope that you enjoyed it and that you learned something new.
Make sure that you leave all your comments or questions down below.
If you create an image using this tutorial, or any other of my tutorials, feel free to
share it on Instagram with the hashtag #PTCVIDS.
I often do a search for this hashtag to see what you're all up to.
If I find your image, I will leave you a comment.
Also, don't forget to subscribe and click on that Like button.
If you have a friend who you think will enjoy this tutorial, please share this link with
them now.
Thank you for watching and I'll talk to you again soon.