Color Swatch Trick EVERY Designer Should Know! Photoshop Swatches from HTML, CSS, & SVG

Color Swatch Trick EVERY Designer Should Know! Photoshop Swatches from HTML, CSS, & SVG

September 11, 2019 13 By Peter Engel


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.