Lesson 8 | Photoshop CC for Web Design

For lesson 8 of Photoshop CC for Web Design I learned more about when to use images and when to depend more on CSS for web design.

Below is a list of things that CSS can and can’t do for web design:

Now contrast the need for images in the mockup I created versus the flat UI kit that was mentioned earlier in this course.

Everything on the right image is created using just HTML and CSS. No images. That includes the scroll bar, the check boxes, all of those different things are completely based in code. No images whatsoever. These elements load quickly and are 100% customizable to any shape, size or color.

CSS is definitely on the rise, but images still have a place and probably always will. The important thing is being able to identify things that can or cannot be reproduced in CSS.

As we begin to talk about optimizing images for export onto the web, we first need to understand exactly what file formats we’re going to be dealing with, and how images correspond to those different types of formats. So when talking about optimizing for the web there are three basic formats: JPG, GIF and PNG. In this course, I went over some basic rules for each of these formats to help me decide which format best fits my needs and the needs of the website.

Now, these are just some hard and fasts rules and are by no means set stone. The recommendation here is to always analyze the images, and see what you can come up with to get the best results. Test the images in multiple formats to see which one applies best for that image, and looks best in a browser across multiple devices and multiple operation systems.

Next, I’m going to optimize individual images using Photoshop’s save for web feature. In this, I have opened  the team.psd document which has all of the different team members from Two Trees Collective. And it’s got this black and white adjustment layer on top of it. For this, I want to save these images in JPG.

To save the image for web, I’ll go to the File menu, Export and Save for Web.

Now, we have the Save for Web dialog box up that allows you to switch between these tabs up here to show the original, the optimized version. You can view 2-Up and 4-Up as well. Viewing 2 or 4-Up will give you the opportunity to see how your image will be optimized in different file formats. For example, here’s JPEG, JPEG, and JPEG all with different quality settings 60, 30 and 15. You can see as we go down that the image becomes a little bit more pixelated at each individual step.

Screen Shot 2017-03-27 at 1.30.09 PMScreen Shot 2017-03-27 at 1.30.14 PM

Now, we can also select the and individually optimize them to select exactly which one you want. So for one, I could change the format to a GIF and another to PNG-24. This will also show me what the final file size of the graphic will be.

So if I want to save the JPEG at 60 quality, I’ll first check my sittings on the right-hand side to make sure the Convert to sRGB box is checked. I’ll also change the Preview from Monitor Color to Internet Standard RGB. Before saving, I’ll change the image size from 300 x 300 pixels to 100 x 100 and then click Save.

Next, I’m going to talk about how to quickly export out multiple web graphics from a single PSD file because this mockup has a lot of images that I’ve used.

So first, I’m going to have my Layers panel open, and I’m going to start with the welcome section with the background image. With the welcome section open, I’ll select the Color Fill layer and the two trees layer, and I’m going to group those together (Command+G). I’ll just name this folder “welcome.jpg.” Doing this indicates to Photoshop that I want to save this out as a JPG.

Now I’ll move on to the About Us section and open up the “Row 1” folder. Each of the images already have a JPG extension, so I don’t need to worry about that, but I’m going to double click on each image in Row 1 and type in “10” at the end of each image, and in Row 2 I’ll type in “6” at the end of the each image. Now, 10 indicates that I want to save those images at the highest quality JPG setting, while 6 decreases the quality. I just want to see what each quality looks like before I decide which I want. So in addition to providing format, you can also provide the quality settings.

I’ll then move to the Portfolio section, where I’ll clean up the names a little bit while leaving their .jpg file extensions.

So with all of those named they are now ready for the last step. I’ll go to the File menu, Generate and choose Image Assets. When I do that Photoshop’s automatically going to read this document and then create a folder to wherever I last was in Finder on my Mac.

Screen Shot 2017-03-27 at 2.54.42 PM

So opening up that folder, I first want to check the images I saved from the About Us section to see which quality setting I want. After seeing that the JPG saved with a “6” setting is more pixelated than I would want, I’ll just go back to the Row 2 images in Photoshop and change the setting to 10 and it will automatically update in my saved folder. You’ll even see that the image of Joey Barrett has increased from 4KB to 17KB.

In addition, you can also do multi-versions to check and see what they would like at different file formats. So going back to the welcome.jpg, I am going to do an alternate version of it. Let’s say that I needed to generate retina quality graphic for the retina screen, high res screens. The easiest way to d o that is to generate a 200%, meaning the image is 200% larger size that it was originally.

So in this case, What I’m going to do is just put a comma after “.jpg”. Then I’m going to type out “200%”, telling Photoshop I want to double this size. And then I’m going to call it “welcomeimg@2x.jpg”.

Now opening these both up in Photoshop doesn’t show a noticeable difference, but it does show that I’m viewing each of these at a percentage of their actual size. The original image I am viewing at a 100% while the alternate is being viewed at 50%. You can even see them in different pixel sizes.