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.
As you begin your design process in Photoshop or any application, you may find that you've hit a wall when it comes to developing a color palette. In this movie, I am going to be walking you through how to utilize one of Adobe's free tools to help you develop color palettes based on a variety of different criteria that you're able to throw at it. Now in some cases the client will give you exactly the colors that they're looking for. They will outline it and tell you I need this blue, this red, and this green, and these are the values you need to use, but in some cases they might just give you some ideas like I need it to look very summery, or I needed to look winterish.
So you can utilize one of these tools like Adobe Kuler to kind of help you along in that process. So if you want to access Kuler, just to go your web browser and go to kuler.adobe.com, and once you have logged in to the Kuler site, which you can do by using a free Adobe ID, you are going to be brought to this home screen here, which shows you many different types of colors that have been developed on the Kuler web site. Kuler is nothing more than a community for people who like to work with color. So as you can see, you can mouse over these and if you want to see them big, you can click on them and they actually change right up here across the top.
You can rate them, based on 1 to 5 stars and then you filter out in those Most Popular, Highest rated, Random. You can also go to Mykuler to see the ones that you have developed. Let's go back to the Newest. Once you select a theme, you will notice that you get information about it right here, and you also get the ability to favorite that theme, download it as an Adobe Swatch Exchange file which you can then load up in the Illustrator or Photoshop or whatever you might be working in, and you can also make changes to the theme as well. If you click Make changes, that takes you into the editor.
Once you get into the editor side, you can actually go in and make changes to the overall color values by clicking and dragging these sliders around. You can also come up here to the top and you can find different rules that you can apply to the colors that you are working with. So right now I am working with this. I can find Analogous colors. I can find Monochromatic, Triad, Complementary, Compound, Shades, and then I can always go to Custom as well. If I wanted to, I can always go back to the home page, by going back to Themes and finding that theme again, clicking on it, and working with it from there.
If I'm ready to download it, I can click here and it will download it to my computer and then I can load it into whatever application I want. Let's say, for instance, that my client comes to me and says "I sell pumpkins and oranges and all these orange types of fruits, so my web site needs to be extremely orange." So I'll go right on to kuler.adobe.com and I'll just search for orange. Then I will go ahead and hit the Search button. Once I hit the Search button, it's going to return several different values based upon that keyword of orange and I can then search through these until I find one that I like.
Let's say that I like this one, Innocent Passion 2. I will click on it and I can see it really big across the top. That looks good. And if I want to download it, I can click right here and it will download it for me: Innocent Passion 2.ase. Now I have already downloaded this to my exercise files folder, so if I go into Photoshop, I can actually load that swatch by going up here, choosing Load Swatches, choosing Innocent Passion 2, and click Open. Once I do that, I will scroll down in my Colors and there are the Innocent Passion 2 colors at the very end.
So now anytime I need them, they are loaded in my Swatches library. I can also go back to Kuler and I can go to the Create section and once I am inside of the Create section, I can choose From an Image. When I choose From an Image, it's automatically going to give me a generic image, but I am going to pick Upload. And in my chapter 2 folder, there is poster.jpg and I will open it up. So let's say my client says "I want something that matches this poster," so I upload it. There it is. It gives me the colors that match that and then I can call this Vote Poster or whatever I want to call it.
I can give it tags if I want and then I can mark whether or not it's public or private. In this case I will keep it Private. And then I will Save that, and now I have this saved in my Kuler Themes and I can download that and I will just download it to my Desktop this time. And now if I go into Photoshop, I can go and Load Swatches again, go to my Desktop. There's the Vote Poster.ase, hit Open, and those swatches pop right there into Photoshop.
The next time you hit a wall creatively when it comes to developing your color swatches, tryout kuler.adobe.com and either upload some images or type in some search words and then download those and load them in your Swatches library. It's a quick and easy way of manipulating colors and getting a nice color palette to work from.
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.