So after the introduction lesson for Photoshop CC for Web Design I moved onto Lesson 2 that covered how to set up my workspace in Adobe Photoshop CC to use for web design mockups.
So first, I simply just opened any type of file because I wasn’t going to focus on that just so much as on setting up the workspace. After getting a new document up (either by going to the File menu then select New, or by pressing Command+N or Control+N for Windows), the first thing I want to do is to get my Rulers up. I can do this by pressing Command or Control+R, or by going to the View menu and make sure the Rulers is checked.
Now to set up the workspace, I went to the Window menu and selected Info.
The info panel can be useful because it gives you the width and height of whatever object you’re working on, and it also shows color values. But what’s really important is that as you move your mouse around it will give you the x and y coordinates. This is useful for alignment of objects up to the specific pixel value you need.
Next, I want to bring up the Character Panel so I went back to the Window menu and selected Character to bring up both the Character and Paragraph panels. I also want Character Styles, so back in the Window menu, I clicked on Character Styles to bring both Character and Paragraph Styles.
Once I finished setting up my workspace, I went the Window menu, chose Workspace and selected New Workspace. There I titled this workspace something simple before saving.
After setting up the workspace I’ll be using for designing web mockups, I got a quick rundown on creating new documents or files. Of course, there are two ways you can create a new document by either going to the File menu and choosing New or pressing Command or Control+N. Here, I titled the document “web_mockup.”
You’ll also see that the dialog box for creating a new document has some presets to choose from, and if I choose Web you’ll see that there are several different sizes already to choose from.
Same for Mobile.
You’ll notice that each of the sizes are labeled for what they are making it easier for designers when creating for the web or mobile devices.
Instead of choosing any of these presets, I created my custom sizes by changing the width and height to 1280 x 2000 pixels and made sure that the Color Mode was in RGB Color since this is designed for the web and not print.
In the “Advanced Options” I made sure the Color Profile was in “Working RGB: sRGB…” and the “Pixel Aspect Ratio” was at Square Pixels before clicking on “Create.”
In the next video I learned about web color models. As a web designer, it’s very important for me to understand these models so I’ll know exactly how to represent color correctly and how to translate color values that might be given to me in a variety of different formats.
I already know about RGB color space, which stands for red, green and blue. I also know that there are several different ways that standard RGB color can be represented in code. The first of which is called hexadecimal code which is a six digit string. Below are some common hex codes for color.
But what do all these colors really mean? Well, to make sense of a hex code let’s break it down piece by piece. The first portion of a hex code is the pound sign, which declares that this is indeed a hex value. The other six characters are three pairs of either 0-9 or A-F values. Each pair controls one primary color, red, green and blue. The higher the numbers, the brighter the color. In the example in the left image below, the dominant color is red over the other two, and thus the resulting color would be something like the color in the right image below.
In order to achieve values greater than 99 in a hex code, you will use the letters A-F, with F being the full saturation of a color, or an RGB value of 255. So in the next example, we have zero for the red value, FF for the green value, and zero for the blue value. This would give us an ultra-saturated green color that looks like something in the image to the right.
It’s next to impossible to remember all hex codes for the colors. Fortunately, Photoshop has a built in hex translation in its Color Picker.
The image above shows the where the hex code is generated at the bottom in the red circle. You could just go in and mix colors as you normally would and that will automatically generate a hex code value for you that you can then enter into your code.
In addition to hex code values, there’s also RGB and RGBA values that you have to contend with on the web in CSS as well.
RGBA is quickly becoming one of the more popular models because of its added ability to control the “A”, or alpha value of a color. This basically means you’re controlling the transparency of that color. To show how transparency can be represented in code, In the image below you’ll see a red square that has an opacity of 75%.
In order to translate that properly into a color code that I can use in CSS I would actually need to tell the developer that this box needed an RGBA value of “255, 0, 0, .75”.
This means that we full power for the red (255) and nothing for green and blue with values of zero and we have 75% opacity for the fill itself.
Next is dealing with color management for my web designs and the first thing to understand is that no matter what, every monitor is different, and there’s no real foolproof way to control how colors are displayed across all browsers and operating systems, or devices for that matter.
That being said, most modern web browsers (Chrome, Safari and Firefox) all support color management. The solution for color management I went through for this video is based on the use of a widely adopted color space called sRGB, which was created to resolve certain color matching issues.
The “s” in SRGB stands for standard. SRGB has also been adopted by the W3C, which is the governing body over all things web design, and most major browsers do support it including Internet Explorer.
To set this up, I went to the Edit menu and selected Color Settings, or you can press Shift+Command+K, or Shift+Control+K for PCs.
Once in here, the only sections that really matter is the “Working Spaces” and the “Color Management Policies.” in the Working Spaces section we want the RGB is set to sRGB, and in Color Management Policies the RGB needs to be set to Off.
Once I’ve finished with that, I can save this custom color profile so it’s easy to get back to later, that way I can easily switch between print and web. So for this I click on Save and named it “myWebSettings” hitting Save again. After, I just click on OK.
With the final video of the lesson, I learned a little about how to make a “developer-friendly” files. This means, basically, we want to be able to hand off a file to our developer that really conveys everything that we want inside of it an contains a lot of information that’s easily read and understood.
To showcase this, I opened the finished mockup file and pulled the Layers panel, which shows all the sections organized into their own groups.
Opening the header section, we can further organize each element within that section to convey exactly what we want the developer to do with them by renaming them to be more informative.
So here, we use the Layers panel as a sort of note taking device, so that when your developer gets this they have a great understanding of what it is you’re doing, what it is they need to do and everybody cane be on the same page.
Leslie Nation 