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.
When we start to talk about optimizing our Photoshop documents for the web, one of the terms that you'll hear is slicing. And slicing is sort of an old-school web design term that refers to a time when we would separate larger images into multiple pieces and then reassemble those "slices" using HTML tables. In today's modern web design, this isn't necessarily the way it's done. Images are able to be optimized more efficiently, browsers are faster, and so are connection speeds, and now we have HTML and CSS to divide our things up equally. So if that's true, what do we use slicing for? Well, in my personal workflow, I use slicing for a variety of different tasks, but the most common workflow for me is to use slicing to define what I call areas of export.
I have open here a document with several different banner ads that I will need to place throughout a web site that I'm working on. I've used the Slice tool to select the different regions so that I know exactly what is going to be exported when I'm ready to take these graphics out to the web. This also gives me the opportunity to optimize each graphic separately inside of this one document instead of creating a new document for each one, saving me both time and hard drive space. If you go over to your toolbar on the left- hand side of your screen, you should be able to find the Slicing tools, which are located about four buttons down inside the toolbar, in the same toolbox as the Crop tool.
When you find the Crop tool, just look underneath and you should see the Slice tool and the Select Slice tool. The Slice tool is what you use to actually slice up the document. You're not actually cutting pixels per se; you're just making a selection around an object that then defines an area that Photoshop calls a slice, which makes it easier to export out that area later. You can also use the Slice Select tool to modify the slices after you've created them. So if I select this tool here and I come out into the document, I can actually click on these individual regions and you see that they highlight each and every time that I click on it.
Throughout this chapter we'll be discussing both slicing and optimizing images for the web, to give you a better idea of how best to get your artwork out of Photoshop and into a web browser. But I wanted to make sure that we cover the concept of those slicing so that you would understand what I was talking about as we continue to explore.
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.