March 2, 2017 | 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.

 

Advertisements

March 3, 2017 | Lesson 9 (Photoshop CC for Web Design)

In this lesson, I learned about the importance of using an image sprite and how to create one.

Websites that have a lot of images in them can take a really long time to load, especially if those images are individually loaded one at a time from your server. Designers have found a way around this by using image sprites. Basically, a sprite is a collection of images that are put together into one single image and when a developer codes those images into the site, they use the x and y coordinates of each image to show only the portion that they need at any given place in the site. This reduces the number of server requests and saves you serious bandwidth and time in the long run.

Below, is an image of a very basic image sprite:

Screen Shot 2017-03-29 at 1.13.33 PM

Now, I’m going to develop this image sprite, but before I can begin building one, I have to first open a new document with a grid that will allow me to easily position the sprites and give a clean x and y coordinate for the CSS.

I’ll start by going to the File menu and choose New and I’ll change the width to 160 pixels and the height to 64 pixels. To set the grid, I’ll start with cutting the document in half lengthwise by clicking and dragging from the horizontal ruler to 32 pixels down. I’ll then go to the View menu and click New Guide. With Vertical checked I’ll type in 32 pixels and I’ll increase the increments by 32 pixels until the grid is filled.

I’ll then open the psd file with all the icons and select all the them in the Layers panel then click and drag to the document I just created.

Starting from the top left, I’ll select each individual icon in the Layers panel and move them to the separate grid boxes.

With all icons selected in the Layers panel, I’ll group them together by pressing Command+G and name the folder “normal”. I’ll then copy this group by pressing Command+J and naming that second folder “hover.” with the “hover” folder selected, I’ll click and drag it to fill the bottom grids.

I want the hover icons to be in gray, so to do this, I’ll select each icon in the “hover” group and press Shift+Command+U (Shift+Control+U for PC) to turn these icons to grayscale.

Finally, I need to save these for web. I’ll go to the File menu, scroll to Export and click on Save for Web. The only thing I’ll change here is the file format from JPEG to PNG-8. It’s important to choose the format that has a good quality at the lowest file size, so it won’t take forever to load on the webpage.

March 1, 2017 | Lesson 7 pt. II (Photoshop CC for Web Design)

Today, I’m going to finish up designing my mockup for this fictional Tow Trees Creative company.

I’m going to start with the About Us section where I have several placeholders, and I’ll start with the Lorem Ipsum text. The client has sent me the text they want in this section, so I’ll open up the text they want to use, select it all (Command+A) and copy (Command+C). With that copied to the pasteboard, I’ll go back into my project, and with the Text tool selected I click in the Lorem Ipsum text, select all (Command+A), and then paste my text I’m going to use (Command+V).

Now, I have a small heading inside this text, so I’m going to want to style it differently from the rest of the text. I’ll select this text then go to my Paragraph Styles where I’ll apply my h3 heading.

The color of the heading doesn’t really go with the theme of this site, so I’m going to select the heading, go to my Color Swatches panel and select the light brown.

Next, I’m going to go back to the Welcome section where I want to Insert my big image I want to use. First I’m going to select both the “IMG” text and the rectangle that was used as a placeholder and delete both from the Layers panel. Next I’ll go to the File menu and select Place Linked… and select the image I want to use here.

After putting the image in place, I noticed that the bottom of the picture covers up part of my About Us section. To fix that, I’ll use the Marquee tool to click and drag where I want to fit this image, then I’ll click on the Add Layer Mask at the bottom of the Layers panel. This will cut off the image to fit to the border I made with the Marquee tool instead of me resizing or cropping the image.

Now, the color of the image doesn’t exactly fit with the theme so I’m going to change that by first clicking on the “Create new fill or adjustment layer” that is just to the right of Add Layer Mask. In the popup menu here I’ll choose Solid Color and change it to a blue color.

You see it’s covering the entire canvas, which I don’t want so to fix that I’ll need to Option+Click until I see the icon below and that’s going to clip that color to the layer.

Now I’m going to change the blend mode. I first selected “Difference” but that’s not what I’m looking for.

Next, I tried “Exclusion” which fits the theme a little better. I decreased the Opacity of the blend to about 75% giving the image kind of an Instagram type filter.

Next, I’m going to be working in the About Us section where I want to add our “team” pictures to each of the image placeholders. I’ll start by going to the File menu, score the Scripts, then select Load File Stack… so I can load multiple images at a time. I select the profile pictures that I’ll be adding, and it will open into a separate file in Photoshop. All I need to do then is select all the images in the Layers panel and click and drag them over to my project.

Earlier, I separated all the image placeholders into separate rows so that I could keep these images grouped the same. I’ll select the first three images and move them “Row 1” then I move the rest of the images to “Row 2” Starting with the first image, I’ll right click on it in the Layers panel and select “Convert to Smart Object” before moving it into place and press Command+T to scale the image to size. I’ll the same to every image until all are in place then I will delete all the image placeholders from the Layers panel.

Next I’ll move to the Portfolio section. Now, in this example, the client doesn’t like that there are just four images. They want more. To fix this, I’m just going to delete all the image placeholders and add all the thumbnails they sent me by using the exact same method I did for the profile pictures in About Us.

With the first image centered under the left arrow button, I’ll select each image separately in the Layers panel and space them out till I have four thumbnails across the page. I’ll then select those first four images I moved and put them into a group (Command+G) called “row 1.”

I’ll go ahead and group the last four images into “row 2” and then space them out as I did the other images.

As for the left and right arrow buttons, I’m going to select both group sin the Layers panel and copy them (Command+J). I’ll move the original left and right buttons in with row 1, then I’ll rename the copies to “right_btn” and “left_btn” before moving them into the group with row 2.

Next, I’ll select the left and right arrows with row 2 then shift+click on them on the canvas to move them down till their center with the row 2 of pictures. Then I select both rows in the Layers panel and move them up till their centered in the section.

Now to the final image I’ll be adding to the Contact Us section for the Google Maps image. For this, I’m just going to copy and paste the image so I’ll go to the File menu and select Open to open up that image. There, I will use the Marquee tool to select the image and copy (Command+C) then paste it (Command+V) into my project.

I’m not going to scale the image down to fit the placeholder. Instead, in the Layers panel, I’ll Command+Click on the placeholder I’ve named “Google Maps, which will put a Marquee on the map image that is exactly where my placeholder is. I’ll then delete that image placeholder from the Layers panel then click on Add a Layer Mask at the bottom of the Layers panel.

Now, I’ll add the finishing touches and I’ve realized that I forgot to put a “Welcome” sign, so to speak, to my Welcome section.

On the image, I’ll use my Text tool and apply my H1 heading style, which was Effra, bold, 64 pts. Then I’ll type in all caps “Designing Your World” before aligning it to the center of the canvas. Lastly I’ll add another text field, this with the subheading style applied.

I don’t like that the text is too small, so I’ll double-click on the style and changed the font size to 48 pixels and the color to white instead of that blue color, and now I’ve finished with the mockup.

Feb. 28, 2017 | Lesson 7 pt. I (Photoshop CC for Web Design

In Lesson 7 of this course, I learned how to apply the color theme to my mockup for this website. First I went to my Swatches panel and clicked “Replace Swatches…” and chose the color swatches that were already set.

Next I’ll apply the dark brown color to my headings such as About Us, Portfolio, and Contact Us. First I selected the About Us text in the Layers panel, then I clicked on the dark brown color that I wanted to change it to. To apply the color I pressed Option(Alt for PC)+Delete/Backspace.

For the navigation bar, I applied the light green. In order to change the logo’s color I selected it in the Layers panel then clicked on the “fx” icon at the bottom of the panel before choosing “Color Overlay…” From there I changed the color to a dark brown.

Next, I began to make adjustments to the Portfolio section. Since I have so much white space, I chose to add color to the background of this section. I selected the Rectangle tool and clicked and dragged a rectangle across the section. I then selected that layer in the Layers panel and moved it underneath the heading and image placeholders.

I didn’t really like how the dark brown looked over the green, so I used the Text tool to selected all the text and changed it to white. Before finishing with the portfolio section, I selected both the ellipses under the arrows and changed their color to the brownish-orange. I did the same for the rectangle in the “Back to Top” button.

Here is what we have so far:

Screen Shot 2017-03-23 at 1.51.51 PM

Next, I went to make more adjustments to the navigation menu in the header section. I selected the text and changed the font to the light green. After changing the font color, I used the center-alignment on the text. Though this made my text go off center, I selected the entire canvas with Command(Control for PC)+A to align the text back to center.

Before I moved on, I wanted to show a rollover state for the nav menu. For this, I only needed to use one. I grabbed the rectangle tool and clicked and dragged a rectangle over the text that was 65×25 pixels. In the Layers panel I made sure that the text was over the rectangle then changed the color of both to simulate a rollover. I then renamed this layer “hover_color” so my developer would know what to do with this.

The final section I needed to make adjustments on was the Contact Us section. I started with the text fields by changing them all to a lighter grey. I then put input text, or initial text, so that users would know exactly what to do with each text field. Since the first text field was for emails my input text was “Your email address”. I then grouped the box and text together calling it “Email Field.” I did the same for the the each of the other text fields.

I then moved onto work on the “Send” button in the same section starting with using the Text tool and Caps Lock to type out “SEND”. With he font color changed to white and the font size increased slightly.

I wanted to add an arrow to this as well, so I went to the Footer section and selected the “up_arrow” and copied it by pressing Command(Control for PC)+J. I moved the copied arrow to the Contact section. Pressing Command+T I rotated the arrow till it pointed to the right and scaled the the size down to 16 x 10 pixels.

I also wanted to add a circle underneath the arrow, so I selected the ellipses tool and click and dragged a circle out to 25 x 25 pixels. I changed the fill to white and made sure the ellipses was underneath the arrow on the Layers panel before moving it into place.

I then selected the “SEND” text, the “send_arrow” and the ellipse and grouped them together calling it “send_icon.” With these grouped I could select the group and the Rectangle to make sure it was aligned center to each other.

With that aligned, I grouped the send_icon and the rectangle in another group called “send_btn.” before completing this portion of Lesson 7.

Screen Shot 2017-03-23 at 2.49.11 PM

Feb. 27, 2017 | Lesson 6 (Photoshop CC for Web Design)

The next thing I need to work on for the design process is creating a UI, or User Interface, kit. Every website has some sort of UI component to it. Whether it’s a search field, a navigational button, a bat to top link, a graph, a progress bar, social media icons, etc. Whatever the case may be, every website has UI elements. All of these elements should be consistent across the entire site. Because of this, it is recommended using a UI kit or developing your own UI kit.

If you want the full package UI you can download Flat UI that has both the HTML and CSS and, if you get the pro version, you will also get a PSD file, which you can then load up into Photoshop and start using in your designs. A great part about this, is the PSD file can be fully customized. Colors can all be changed, and then all you have to do is pass those colors on to your developer.

Icons, or another aesthetic element that every website has, whether it’s social media icons or play buttons, pause buttons or simply location pins. All of these items need to be in sort of a unified theme.

You can create these icons in Photoshop or Illustrator, and then save them out as images. The problem with this is that images are large, and they decrease the speed of a webpage because the webpage has to wait for all these images to load. Recently though, there’s been a surge of these new things called icon fonts.

I’m actually going to use this method by downloading Font Awesome icons and using those icons for my website mockup.

The first thing I need, is the portfolio slider pieces. I’ll use the Ellipse tool and hold the Shift key while a click and drag out a circle. Also use the Alt key on my PC (Option for Mac) so the circle will be directly in the center of the outside guideline to 64 x 64 pixels. I’ll give the fill a light grey and apply it before pressing Shift+Alt (Opt for Mac) and click and drag to the other end to make a copy of that circle.

For this next part, I’ll use the Cheatsheet to select and copy the icon I want to use which is the left and right chevron icons for arrows. Starting with the left chevron, I’ll use the Text tool in Photoshop and paste the icon. If it shows up as a box, just make sure that the font you’re using is Font Awesome. I’ll also make it 36 pt in font size and change the color to white. I’ll then move the icon to the center of the light grey ellipses. I’ll then go to the Layers panel and select both the chevron and ellipses to group them together using Control+G. I’ll label this group “left_btn.”

I could also copy and paste the right chevron, but I’m going to do something a little easier. I’ll just copy the group I just made using Control+J and renaming it “right_btn.” After making the copy, with this group selected in the Layers panel, I’ll rotate the icon 180 degrees by pressing Control+T then rotating the icon. I’ll then Shift+click and drag the group to the other side where I deleted the other ellipses.

Finally, I’ll add all the icons to the footer section by starting with the “Back to Top.” I’ll use the Rectangle tool to Shift+click and drag a square to fill one column in the guideline. I’ll then add an up chevron on top of that rectangle. I’ll add the final icons, the social media icons, to the bottom right corner. The icons I’ll add are Twitter, Facebook, Google+, Dribbble, and Pinterest.

The only problem with using Font Awesome is that not everyone is going to have this font on their computer, or even want to download them. So as I share these with other people, especially the PSD files, it may become problematic for these fonts to really translate. So I’m going to turn these UI elements I just created into shape layers very quickly and easily.

First thing is to convert the arrows by selecting the right arrow in the Layers panel within its Group. With that text layer selected, I’ll go to the Type menu and choose Convert to Shape. I’ll then rename this “right_arrow.”

I’ll do the same for the left arrow and the social media icons as well.

The benefit to converting these icons to shapes is I can send these to anybody regardless of whether or not they have this font. Second, I can save these shapes into my shape libraries and share them with colleagues, or use them in other projects.

Feb. 24, 2017 | Brainbench Test and Lesson 5 (Photoshop CC for Web Design)

Before I started on any lessons today, I took a Brainbench test in Web Design Concepts. Fortunately, I earned a certificate in that area, and you can see that on my Brainbench Certifications page.

After finishing the Brainbench test, I moved onto Lesson 5 in Photoshop CC for Web Design. In the previous lesson, I set up my wire frame layout for this website we’re designing for the (fictional) Two Trees Creative company. Now, I’m going to develop the color theme that will be used for the website.

Sometimes you’ll have to develop the color theme from scratch. However, other times the client may already have a color theme they want and will send you an image to use. To crate this color theme, we’ll use Adobe Color CC.

Screen Shot 2017-03-21 at 1.26.20 PM

In the top right corner you’ll see a camera icon and you’ll click on this to “Create from Image.” The client sent their image, so I’ll select that and what you get is a little picker where you can move those dots around to the specific colors that you want to use in the design.

All we do then is click on “Save” in the top left, and we title this color theme “two trees colors” and we now have this in you Library.

To bring this into your project, you have to be signed into your Adobe Creative Cloud account and from there you can go into Adobe Photoshop CC and go to the Window menu, scroll down to Extensions and click on Adobe Color Themes. Now, you should have all you created color themes in Photoshop.

After we’ve set up the color theme for the website, now we want to choose the right fonts for headings, subheadings and body. For this, you’ll also want to be signed into Creative Cloud to use Adobe’s service called Typekit. You’ll go into the Creative Cloud application and click on “Assets” and then “Fonts”. From there, you can click on “Sync Fonts from Typekit”, which will take you to the website to sync different fonts that you may want to use for your site.

If you’re too overwhelmed with the many fonts that are provided, you can use the filter on the right-hand side. Here I just want to use a Serif font for starters, so I’ll check that in the Classification section. That should cut out all the fonts that are not classified as a serif font.

Screen Shot 2017-03-21 at 1.42.45 PM

After choosing, and syncing, the fonts I wanted to use, I’m going to go back into Photoshop to begin setting up my headings, subheadings and body text in the “text_tree” file.

Screen Shot 2017-03-21 at 2.37.03 PM

Right now it’s in a simple Arial font, but I’ll use the Text tool to select all four heading and change the font Effra bold and then I’ll set the font size for each heading separately. For the H1 heading I’ll change the font size to 64 pt, H2 to 48 pt, H3 to 36 pt and H4 I’ll leave at 24 pt.

Next, I’ll change the subheading to Kepler italic at 36 pt font size, and the “Body” text will be Effra regular at 18 pt.

To be able to apply these to my project, I first need to create Paragraph styles for each of these. With my Text tool, I’ll just click on H1 then go to my Paragraph Styles panel and click on “New Paragraph Style.” I’ll name it “h1” then change the color to black then click OK. I’ll use the same process for each of the texts then save the “text_tree” file.

To transfer these from the “text_tree” file to my project, I’ll simply go to my project and open the Paragraph Styles panel. I select “Load Paragraph Styles…” and choose the “text_tree.psd” file, which will load all of the styles from that file to my current document.

Now, all I have to do is apply these styles to all the text elements of the document. I’ll start with the navigation menu by selecting it in the Layers panel. In the Paragraph Syles panel I’ll apply the “body” style. Unfortunately, that did nothing to change it, so I’m going to have to “Clear Override”. After the style has been applied, I’ll align it to the center of the canvas.

I don’t, however, want the text to be that blue shade, so I’ll simply double click on the “body” style in the Paragraph Styles panel and change the color to a black color and move onto applying the other styles.

Moving onto the About Us section I’ll select the text in the Layers panel and apply the “h2” style. Again, I’ll have to clear override for this to show. I’ll also apply the “body” style to the Lorem Ipsum text as well.

Now when finishing up your mockups, you may want to use some images. Never use Google images because many of those photos are copyrighted. If you need some resources for images, here are some royalty free stock photo websites: stock.xchng, iStock, Think Stock, and Pond5. Another website that could come in handy is a tumblr blog called Unsplash. It allows you to have 10 new photos every 10 days.

Feb. 23, 2017 | Lesson 4 (Photoshop CC for Web Design)

So in the third lesson of Photoshop CC for Web Design I’m going to get into creating wireframes during the design process and in the first video of this course I going over a mock client specs for the website.

In this lesson, I’ll work on designing for  fictional client provided by this course called Two Trees Creative and in the image below are some notes taken from a “meeting” with the client.

Capture1 Now it’s recommended to take notes during a client meeting that way both of you are on the same page with the design. On the left-hand side you see the notes, and while taking notes it is also helpful to, at the same time, draw a rough sketch of a thumbnail of the site.

Essentially, the client wants a one-page website that is responsive and on the right you see a one-page sketch with labels to correspond with each section.

Now client meetings can be however in-depth or vague, so you could get something more specific then this sketch or something even more abstract. The more conversations you have with the client the better you can understand exactly what they’re trying to accomplish with this website.

Once we have all the specs from the client we can start to design a more in-depth sketch.

Capture2

Now, once we take this sketch to the phase of designing it in Photoshop there are going to be some elements that we won’t be able to convey in the program. An example is that if you want the navigation menu to be “sticky,” meaning you want it to scroll with you as you scroll to each section you would need to communicate with the developer of what you’re looking for certain elements.

On the left side the sketch you see some rough calculations for the sizes of each section. You may not know the exact dimensions you want each section, but you can set ground rules for yourself.

IN the next video, I learned more about the reasons to have, and how to apply, a grid system to my documents when designing a web layout. The first reason is that it helps keep things organized. Number two, it helps lay things out really cleanly and precisely based on a measurement of some sort. The best way to use a grid system in Photoshop for web design however, is to use a grid system that is easily translatable into CSS.

There are some examples of grid systems out there on the Internet that you can download like: 960 Grid System, Unsemantic, Lemonade, et cetra, but you can also use Photoshop CC’s grid layout.

To set up a guide layout, we’ll need to jump into Photoshop and open a document by going to the File menu and selecting New, or pressing Command or Control+N. I customize the dimension by making it 1280 pixels in width and 2000 pixels in height.

One way to create guides is to simply click on the rulers on the left or above and drag the guides out before placing them.

Capture8

The problem with this is that it is time consuming, and you have to really know your numbers right off the bat, so I would need to know how far I need to go in for the margin, how precise I need to be, that kind of thing.

To set up our guides, I’ll go to the View menu and select “New Guide Layout…” to bring up it’s dialog box. First I’ll set up the columns where I want 12 columns that are 60 pixels wide and 20 pixels for the gutter. For the margins, I just want a left and right margin and there I will enter 140 pixels for both. Now I can save this as a Present as well, and to do that I’ll click on the drop down box for the Preset and click on “Save Preset…” I’ll just name “1000 px grid” and click Save and then OK.

The grid system can be very instrumental in streamlining the design process in many different ways once you get used to them.

Now we’re finally going to get into creating and setting up our document for the web design. First I’m going to create a new document by going into the File menu and selecting NEw. I’ll title it “ttc_wireframe” and set the dimensions to 1280 pixels wide and 2900 pixels in height before clicking Create.

Next, I’ll set up the guide layout by going to the View menu and selecting New Guide Layout. I’ll start with the Margins and make the Top margin 60 px but leave the Bottom margin at zero for now. The left and Right margins I’ll set at 140 px each. In the Column section is set up 12 columns at 65 px wide and 20 px in the Gutter.

Now I want to set the guides for each of my sections. To do this I can click on the Rulers and drag out a guide till I’m 225 px for the Header section. For the next section, we wanted it about 600 to 700 px, but we’re going to split the difference to 650 px, which is 875 px. There is an easier way to do this, I can go to the View menu and click on New Guide, set the orientation to Horizontal and set the Position at 875 px and click OK.

Capture17

I’ll continue to use this method to create each of my sections and for the Footer I’ll add 100 px to the last guide I created to set the position at 2625 px.

Capture18

You see in the image above that we’ve overestimated the height of the document, so I’ll just use the Crop tool on the left-hand side to cut off that bottom section and our document is complete. All I have to do is save my progress.

So now that we have the guides set, it’s time to layout the wireframe of the website and I’ll start with the header. In the header I’ll start with the logo by going to the File menu and clicking Place Linked. In the assets folder, I selected “ttc_logo”. With the logo on the document, I set the height and width to 90 px each before centering it at the top of the header section.

With the logo in place, I used the text tool to type out the navigation menu. None of my text will be styled at all, right now it’s just about putting place holders for the bare bones of the site. I’ll center the text as well in this section before moving onto the “welcome” section.

In the welcome section, we’ll use a big image, so I’ll click and drag a rectangle to fill out the entire section before labeling it as an image with the text tool.

Next is the about section where I’ll start with a square that is two columns wide that will set as a placeholder for employee photos. I’ll then Shift+Option(Alt for PC)+click and drag to make a copy of the square. In the Layers panel I’ll select both rectangles and click and drag two more copies.

On the left side of this section I’ll have text there, so I’ll select the Text tool and make the text box six columns wide. To put placeholder text, I’ll go to the Type menu and click on “Paste Lorem Ipsum.” With the text left-aligned, I’ll then use the Text tool again to label this section “About Us” and center it at the top.

In the portfolio section, I’ll click and drag out a square that is three columns wide as an image placeholder. I’ll then Shift+Option(Alt for PC)+Click and drag out three more copies to fill the width of the section.

I then selected all the squares in the Layers panel and shifted them up a bit before using the Text tool to type “Portfolio.”

For the contact section, I started with clicking and dragging out a rectangle that filled half of the section to mark where the Google Maps would be located. On the right-hand side of the section is where the contact for is will be located, so I used the rectangle tool to layout the form, adjusting as needed.

And that is how to wire frame out a document. After showing it to the client and getting the approval, it will be time to move onto the adding the aesthetic elements to the design.

Capture41

Feb. 22, 2017 | Lesson 3 (Photoshop CC for Web Design)

In this lesson of Photoshop CC for Web Design I learned more about responsive design with just a brief overview of how it affects web design workflow in Photoshop. This is important because our content is being consumed on literally thousands of devices. All of which are capable of producing a rich web experience.

Now, there are three basic ways to design a responsive website today.

Capture1

The first is somethings called a fluid site, which means the entire site is based off of a percentage, and simply scales itself down as the window the browser decreases and scales back up as it increases. While this is okay for some science, it doesn’t necessarily do much to tailor the user experience.

Second, there’s adaptive web design, which targets specific devices like iPhones, and Kindles by using something in CSS called a media query. This makes it easy to display your site in a uniquely tailored way to a variety of different devices. An obvious problem with this is that not every device uses a standard iPhone or Kindle sized screen and therefore you might not be able to cover the full spectrum of devices that visit your site.

The best solution is the final one on this list, which is the topic of this lesson. Responsive design is based on a fluid grid, which can adapt itself based on the view port of the browser.

As a designer you have the choice of whether or not to design the website using “progressive enhancement” or “graceful degradation.” What this means is that in progressive enhancement you start by designing the mobile site first and then progress to larger screen sizes: tablets, desktops, etc. This allows you to add more relevant content and aesthetics to increase the usability on those devices.

With graceful degradation the opposite is true. You start with the full-on desktop experience first and then you will gradually create comps that take away and rearrange content so that the site is easily navigated on smaller screens like tablets and phones.

Both of these are useful ways to design a website, but the biggest question that comes from this is “How should this affect my work in Photoshop?”

Capture2

At the end of the day, this is all about user experience. Responsive design helps you create a better experience for your clients and their clients.

One of the biggest decisions you’ll have to make when designing a responsive website is what breakpoints will be needed to use for your content on different devices. An important question to ask is “What screen sizes am I targeting?” To know this, you need to know if you’re using adaptive or responsive web design. Though both work on a basis of screen size, the differ in how they come to those sizes. Adaptive for instance targets specific devices. Whereas responsive simply targets different dimensions that are device agnostic.

Her are some common adaptive breakpoints for devices:

Capture3

Below is a much simpler list of breakpoints for Responsive design that can be fit into three different categories:

Capture4

The problem with using these cookie-cutter breakpoints though, is that it degrades the content experience and these sizes are really hard to narrow down because devices are constantly changing in size and dimension.

For this reason, perhaps the philosophy to have is to let the content of the website determine the breakpoints. The instructor for this course, Justin Seely, gave and example for his own website that he designed and developed. For his site, he determined his breakpoints based on the content and therefore saw that he had four listed below.

What this means is that if you were to take this website and resize the browser window, something would happen when you get below 1280, something would happen when you get to 592 and something would happen when get to 480.

Finding out where your breakpoints are for your website can be easier to do on your own if you also know how to do the coding for it. Otherwise, it is best to partner closely with a developer to help analyze your content and understand exactly what it’s going to look like at each individual screen size.

 

Feb. 21, 2017 | Lesson 2 (Photoshop CC for Web Design)

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.

Capture1

Now to set up the workspace, I went to the Window menu and selected Info.

Capture2

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.

Capture3

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.

Capture14Capture15

Same for Mobile.

Capture16Capture17

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.

Capture29

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%.

Capture30

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”.

Capture31b

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.

Capture42

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.

Capture43

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.

Feb. 17, 2017 | Lesson 1 (Photoshop CC for Web Design)

So today I’m beginning a new course called Photoshop CC for Web Design and here I’m going to learn how to create mockups of websites by using Adobe’s Photoshop CC.

Now, the days of having the content of our websites viewed purely on desktop devices is over. This content is now being consumed on hundreds of different types of devices, all of which have different screen sizes, operating systems, and resolutions that web designers have to deal with.

Screen Shot 2017-03-08 at 1.10.35 PM

Basically, that means that we need to be aware and concerned about how this content will look on devices like an iPhone, a Google Nexus, an iPad, and even a Kindle device. And that’s just to name a few.

For web designers this means that workflows must evolve to keep pace with the rapidly changing landscape that is the mobile Internet. Whereas designers used to be able to get away with using just Photoshop to mock up a desktop site, now they have to use Photoshop in conjunction with other apps like Edge Reflow in order to ensure the content will look its best across all screens and devices.

Screen Shot 2017-03-08 at 1.40.04 PM

As I begin these lessons to evolve my workflow to meet these demands, I’ll need to keep these things in mind:

Screen Shot 2017-03-08 at 1.14.29 PM

Simply, the game is changing all around us as designers. We have to adapt to this and prepare ourselves as best as we can so that we can deliver the products that our clients are inevitably going to ask us for.

A big question that many aspiring web designers may ask is “Why should I bother using Photoshop?” In the next video of the course, I learn some of the pros, and some cons, of using Photoshop for designing web mock ups.

Here are some pros for using Photoshop for web design:

Screen Shot 2017-03-08 at 1.16.45 PM

And here are some cons:

Screen Shot 2017-03-08 at 1.18.09 PM

Now in defense against the last point of the “pain points”, that feeling of this being “double the work” really only applies to you if you’re a designer capable of coding your own web sites. Even so, this point is a big deal to many people and a big reason why many modern web designers are opting to just, what is called, design in the browser and leave Photoshop to just handle the small stuff, like graphic elements that they need along the way.

Many also claim that abandoning Photoshop will save you some time. Below are two images of what a typical “old school” workflow looks like and a typical “new school workflow looks like:

They each have six points to their workflow, so really these probably both take around the same amount of time to complete.

Next, my course video helped to have a better understanding of the difference between resolution and pixel dimension or screen size. For many years, it’s been assumed that we should alway s design our web graphics in a 72 pixel per inch or dots per inch resolution. In today’s day and age we have to deal with many device types and screen resolutions. For instance, Apple has a series of retina devices that go into its iPad, iPhone and even now. Macbook Pros.

There are also many other devices and screens that go even higher than 72, like 150 or 240, and even higher than that. They key thing to remember here is that no matter what resolution, the pixel dimension is what counts win what stays the same. The pixel dimension refers to the actual amount of space an object takes up on screen, regardless of the resolution or screen size.

Below is an example of three different screen sizes showcased.

Screen Shot 2017-03-08 at 1.22.08 PM

Directly in the middle of each one of these screens sizes, you will see a small white circle that takes up 200 x 200 pixels of actual space. But as you’ll see, when we start to move through these screen sizes, the circles are going to look as though they’re becoming smaller.

For instance, if I were to turn off the 1024 x 768 screen and move to the 1440 x 900, we still have that same 200 x 200 circle in the middle, but it looks much smaller now because it’s surrounded by a much bigger pixel area.

Screen Shot 2017-03-08 at 2.37.41 PM

Now, we’ll go from the 1440 x 900 all the way up to 1600 x 1200, and the circle is even smaller, directly in the middle of the screen.

Screen Shot 2017-03-08 at 2.38.36 PM

This is because there are more actual pixels in the screen, making it look as if this graphic has gotten smaller when in fact it’s just on a different size canvas. Making it appear to be smaller than it actually is.

To really see this in effect, I’ll show a jpeg image of two laptops with the homepage of lynda.com open.

Screen Shot 2017-03-08 at 1.24.16 PM

On the left-hand side we have a higher resolution screen, which is 1680 x 1050, and on the right-hand side we have 1024 x 768. The home page doesn’t change at all, the pixel counts all remain the same of all the graphics and everything. It’s just with the monitor on the right, you have less pixels on the screen, thus you don’t have as much room to show different things. On the left-hand side however, everything is exactly the same on the home page. Images, text, etc., but it looks as though things are smaller because we have more pixels that are able to be displayed on this higher resolution screen.

So as I get into my later lessons of this course, it’s important for me to remember and take into account the pixel value of my images that I’m creating mores that the actual resolution of the screen.