Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
There may come a time when you're asked to create your own custom swatches here inside of Photoshop, based upon something that a client gave you or maybe even an image that they've sent you or something like that. And so in this movie I'm going to be walking you through how to create your own custom swatches here inside of Photoshop and then how to export those out as a .ase file or Adobe Swatch Exchange file that you can then load up in another applications like Illustrator and InDesign or simply transfer to your clients or give to your coworkers to use as well. First things first: I need to bring out my Swatches panel. And you'll notice when I bring up my Swatches panel that mine is probably looking considerably different than yours.
That's because I've removed all the existing swatches that were already in here. Let me show you exactly how I did that. I'm going to first reset my Swatches panel and that just go up to the Swatches panel menu and choose Reset. That resets it to the Photoshop defaults like you see here. And if I want to remove colors from this, I can just come in here and you'll notice it has a little eyedropper when I mouse over a color? If I hold down the Option key on the Mac, the Alt key on the PC, it turns into a little scissor icon, and I can then click to remove those colors. And so all I have to do is just kind of click through here and remove the colors that I don't want.
And in this case, I'm going to be developing my own set of colors, so I don't want anything in here. So I'm just going to click and remove each one of these by holding down the Option or Alt key and then clicking each time to get rid of the colors I don't need. Once I get all the colors removed, I'm now ready to begin. So I'll move Swatches panel over a little bit so I can see all of the colors in this image that I've got loaded up. And I'm then going to open up my Eyedropper tool and I can do that by hitting the letter I on my keyboard. Once I have that done, I simply sample this grey color here. And I'll come over to the Swatches panel and I'll hit the New Swatch button and I'll call this Grey. It adds it in. Sample this, hit the next one, and I'll call this Aqua. Hit the next one. I'll call this Blue/Green.
Sample the next one. I'll call this one just regular Green. And the last one we'll call this Yellow/Green, and hit OK. So now I have all of those sampled. And I could actually close this document if I wanted too. I don't need it any more. And now in my Swatches panel, which I'll move to the center, I can go right here and I can choose Save Swatches for Exchange. I'll just save these out on my Desktop, and I'll save this as my_swatches, and save it. There we go.
Now let's reset our colors back to normal. I'll hit OK. It's asking me if I want to save my current swatches. Well, I just saved them out as an Exchange file, so I don't have to save them now, so I'll hit Don't Save. Here we go. Now anytime I need to load these in to Photoshop, I can simply go here, I can choose Load Swatches or even Replace Swatches--in this case I'm just going to load them-- I'll find the my_swatches.ase, hit Open, and it loads them right there at the bottom. When I mouse over, you'll see it says Yellow/ Green, Green, Blue/Green, Aqua, and Grey.
I can also go back up here and I can say Replace Swatches. This time my_swatches again, Open, and it has all those, just those, and nothing else. I could load these up in Illustrator or InDesign or any other program that supports the .ase file format and then I can use these colors throughout multiple designs and multiple projects. So there you have it: how to create your own custom swatches inside of Photoshop and then migrate those out as an Adobe swatch exchange file for use in other applications and other workflows.
There are currently no FAQs about Photoshop for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.