March 8, 2017 | Lesson 2, pt. II (Responsive Design Fundamentals)

Here is more theory to add to learning about Responsive Design. You won’t be seeing me use any particular software to design layouts, but I’ll be going through some new their like understanding media queries and using fluid grids. I’ll also be revisiting a concept from my previous lessons: Creating breakpoints.

I’ll start with understanding media queries, which are important part of responsive design as they allow you to write styles that respond to changes in things like screen size or orientation.

Screen Shot 2017-04-12 at 1.03.00 PM

Through media declarations, CSS had allowed us to filter style application by media type for quite some time now. In the past, we have been able to define which styles apply to screen devices, projectors, printers, and handheld devices through some pretty basic syntax.

Screen Shot 2017-04-12 at 1.03.40 PM

While these capabilities were extremely handy in making sure that you could write separate style sheets for screen and print, they never really realized their ultimate goal of defining multiple device types. Mobile manufacturers for the most part, shunned the handheld media type due to its limited use and their desire to give users the full web experience. That left a huge gap, in terms of a designer’s ability to write styles that changed based on the type of device being used. To fill that gap, media queries were created to allow designers to extend the media declarations to include various media properties when filtering style application.

This is actually really useful, as it allows designers to control styling based on factors such as screen size, orientation, or color, which is far more flexible than simply defining a device type.

Screen Shot 2017-04-12 at 1.04.35 PM

Taking a look at the syntax and how it works, media queries contain a media type and one or more expressions. These expressions contain media features, which are then evaluated and used to determine whether styles are applied or not. Keywords such as “and,” “not,” or “only,” help you refine exactly when styles are applied.

Screen Shot 2017-04-12 at 1.05.07 PM

“Not” negates the expressions that follow it and applies the styles only if the conditions that follow are not met.”Only” can be used to detect for media query support, as older user agents that don’t support them will ignore any media declarations that being with “only”. The “and” keyword allow you to join expressions together, further filtering when styles will applied.

You can also comma-separate a list of media queries, which is very much treated like the “or” logical operator.

Screen Shot 2017-04-12 at 1.05.47 PM

In the case above, if one of the expressions returns true, the entire list is applied.

We also have a very divers group of media features to test for:

Screen Shot 2017-04-12 at 1.06.21 PMScreen Shot 2017-04-12 at 1.06.37 PM

As you can see, some of the features also accept a minimum or a maximum prefix. This allows much more flexibility, as you can check for a minimum height or a maximum width instead of a fixed value.

After this crash course about media queries, I’m going to take a closer look at how they’re implemented in a responsive design workflow. I’ll start by exploring the concept of a breakpoint, which I’ve gone over briefly in a previous lesson. First off, a breakpoint indicates the moment your layout switches from one layout to another, and is usually triggered by the width of the screen.

Now, when I used the Sketch application in my lesson Learn Sketch: The Basics, I did indeed go through how to design layouts for different screen sizes. Each of those design layouts represented different breakpoints I wanted for the website.

Though I created four different layouts for four different screen sizes, many layouts are based on the typical screen sizes for smartphones, tablets and desktop devices. While many layouts will have more than these three basic breakpoints, almost all responsive designs will feature some combination of those three screen size ranges. This means that one of the first things that you need to do when planning a responsive design is define the breakpoints for your layout.

In the below image, you’ll see a list of the three most common breakpoints:

Screen Shot 2017-04-12 at 1.09.03 PM

Mobile styles will target any screen smaller than 480 px wide, while tablet styles will usually target screens between 481 and 768 px. Desktop styles, on the other hand, will target any screen wider than 768 px. Obviously, all tablets and smartphones aren’t the same size, so you’ll need to determine which range of screen widths you want to support.

Now, I’ll go through some of the syntax begin used here to explain how breakpoints are set. First note that each of the media queries uses the “only” keyword, which hides the styles from older non-conforming user agents. Because of this,  you will want to have a set of default styles to fall back on. The “screen” media types ensure that the styles apply to screen-based devices. The mobile media query uses the “maximum-width” media property to restrict styles to screens under 481 px, which should target the majority of smartphone devices.

Screen Shot 2017-04-12 at 1.10.26 PM

The tablet media query uses slightly longer syntax, by combining both a minimum and a maximum-width media property to define a specific range of screen sizes. Essentially, this targets any screens between 481 to 768 px.

Screen Shot 2017-04-12 at 1.11.13 PM

Note that the minimum-width value is one pixel over the smartphone query. You want to make sure there is no overlap as you plan your breakpoints, which could case some cascading issues within your styles.

Finally, the desktop media query simply targets any screen size over 768 px.

Screen Shot 2017-04-12 at 1.11.33 PM

Notice that all three of the media queries are suing the width property with a minimum or a maximum prefix.

It is also becoming more popular among responsive designers to set breakpoints using ems instead of pixels. By using ems, the width of the screen is set relative to the device’s font size.

Above for example, we could change this media query from px to ems by dividing the width of 480 px by 16 px and setting that to the resulting 30 ems. Since the average device font size is 16 px, this is usually a good place to start from.

While this requires us to do a little math on the front end, we now have a responsive design that responds not only to the screen’s width but also user’s zooming as well.

For this portion of lesson two, I’m going to end with discussing fluid grids. One of the most famous observations about responsive design is that it’s becoming more and more important to think of your content like water. I needs to have the ability to flow into whatever container it’s viewed on.

Screen Shot 2017-04-13 at 1.44.44 PM

Of you limit yourself to creating fixed layouts for each of your breakpoints, you’re ignoring the wide variety of screen sizes within each range. One of the best ways to make sure your content works, regardless of the screens being viewed on, is to use a fluid layout so that your content can flex and resize within each of your set breakpoints.

Creating separate fluid layouts for each breakpoint create considerably more work than crafting a single fluid layout or separate fixed layouts. For this reason, many designers have adopted the use of fluid grids to make crafting multiple layouts faster and more precise. Grid systems are a fantastic way of creating structured, properly proportioned layouts that have been used by designers for decades across multiple disciplines. For a web design, grids are typically defined as a number of columns and gutters that are then used by the designer to establish the widths of page elements and regions.

Screen Shot 2017-04-13 at 1.46.02 PM

The exact number of columns and their base width is typically up to the designer, and is usually related to a default font size, ideal ratio or an ideal screen width. Although the most popular is currently 960 pixels, many designers are moving to grids based off  of larger ideal screen sizes, such as a thousand pixels.

Once the grid is established, page elements are mapped to grid coordinates and values are assigned based on where they fit within the grid.

Screen Shot 2017-04-13 at 1.46.51 PM

Once the framework is built, creating the actual layout becomes fairly simple: based on the desired layout, you simply add the appropriate classes to the appropriate page element. If your design is relatively simple and unlikely to change frequently, it might be more efficient to simply create layouts for each breakpoint that’s tailored for specific screen ranges. If your layouts are more complex or have a wide range of variations in terms of page types, it’s probably worth it took the time to craft a framework around your site’s specific needs.

Screen Shot 2017-04-13 at 1.48.34 PM

If you simply don’t have the time to construct your own fluid grid system or feel that your technical skills aren’t quite at that level yet, I’m happy to tell you that there are a multitude of existing frameworks that you can download and use within your own projects.

This frameworks range from the very simple layout-only styles to entire boilerplates that come with a mixture of HTML, CSS and JavaScript that provide a full framework for site development.

Screen Shot 2017-04-13 at 1.49.30 PM

Before I end this, below is a list of some downsides to using fluid grids:

Screen Shot 2017-04-13 at 1.50.09 PM.png

As shown, the styles are heavily class-based and usually use non-semantic class names that can clutter up your HTML. Some require specific containing and clearing elements that may force you to include additional markup to your HTML as well. Most of these frameworks are fairly large in size, too.

Whether you use an existing framework or build your own, it’s certainly worth your time to download and explore a few of them just to see how different developers approach building fluid grids.

March 7, 2017 | Lesson 2, pt. I (Responsive Design Fundamentals)

This next lesson in the Responsive Design Fundamentals course on lynda.com is going to be separated into three parts, beginning with exploring multiple mobile viewports and understanding how they effect the design process.

So we’ll start by examining the mobile viewport and how we can control how the content displays on mobile screens. Unfortunately, the example given in the lynda.com videos uses an iPhone 3GS despite technology currently being on iPhone 7. But the concept still applies, so we’ll stick with the 3GS with a screen resolution of 320 x 480 pixels (meaning that the screen is 320 px wide when in portrait mode).

When browsing on a desktop device, the concept of the viewport becomes a little more obvious, as any open browser window is defined as the viewport. Because the viewport is independent of the screen, we can resize it to whatever size we want. On mobile devices, the viewport functions in much the same way. It gives you a defined area to display web pages that is independent of the device’s screen. It’s simply not as obvious as the desktop viewport, and users don’t actually resize the viewport as much as they scale it up or down when they zoom in and out of webpages.

Screen Shot 2017-04-07 at 12.58.08 PM

Since viewports have a minimum scaling factor, users rarely ever see their edges as they do when they resize floating browser windows. Because of the small size of mobile screens, mobile viewports are designed to be larger than the screen’s resolution. Mobile Safari has a viewport of 980 px, while Opera’s is around 850. When you compare that to an iPhone with a screen width of 320 px, you can see that the viewport is much larger than the actual screen itself.

In large part, this is due to mobile viewports having to display content that’s designed for much wider screens. Typically, mobile browsers will display a web page within the viewport and then shrink that viewport down until the content fits within the width of the screen itself.

If mobile browsers didn’t behave this way, you’d only be able to see a small portion of most web pages.

Screen Shot 2017-04-07 at 1.00.27 PM

This would be much more confusing as you’d have to pan around the page to explore its content without really knowing where anything was. This is described as “keyhole browsing”, because it’s similar to viewing an entire room through small keyhole.

Let’s say that you’ve created a responsive design that has a mobile phone layout designed for 320 px. On an iPhone, the default mobile viewport is 980 px, so your 320-px layout is only going to occupy about a third of that. The viewport will then be scaled down to fit the 320-px screen, making your layout really tiny and defeating your carefully crafted 320-px layout.

Screen Shot 2017-04-07 at 1.01.26 PM

So, in order to build responsive sites that neatly within mobile screen sizes, you’ll need to know how to control both he viewport size and its initial scale factor.

Currently, there are two mechanisms for overriding the user agent’s default viewport. You can either use the viewport meta tag or the @viewport CSS rule. Since they both use similar syntax, below are code examples for each, and I’ll give a brief description of their effects on the viewport.

The meta viewport tag appears in the head of your HTML, and has tow basic parts: name (which is viewport) and content (which will contain the properties and values you wish to set for the viewport itself).

Screen Shot 2017-04-07 at 1.25.44 PM

The @viewport rule can appear anywhere in you CSS that yo want, but since it can effect media queries, it’s recommended that you place it prior to any media queries in your styles. Most designers place it near the top of their styles as one of, if not the very first, rule. The syntax is similar to the meta viewport tag. You simply declare an @viewport rule and the populate it with the properties that you wish to control.

Screen Shot 2017-04-07 at 1.26.18 PM

It is also important to note that in the viewport meta tag syntax, you don’t append “px” to the pixel value, while in the @viewport CSS syntax you do.

While a specific pixel value for width might be fine for some projects, remember that not all mobile screens are 320 pixels wide. If your website is using a fluid layout, you’re going to want the layout to be based on the available screen width of the device and not limit the viewport to just one single size. To do that, we can use the property value “device-width.”

Screen Shot 2017-04-07 at 1.28.14 PM

This value instructs the browser to se the viewport to the exact size as the available screen pixels. Setting this will remove any initial viewport scaling and allows you to create fluid layouts that adapt to multiple devices. Unless there’s a reason to use a specific value for your viewports, this is the value recommended to responsive designs.

Just as you can set the width, you can also set the height in the same way. However, this probably won’t be needed all that often but it’s available if needed.

You can also set the initial scale value for the property’s content as well. Initial scale controls the zoom factor of your content of the initial view of the page. Once the page has been viewed, the user is then free to scale the page at any factor they want. This is separate of the viewport width.

Screen Shot 2017-04-07 at 1.29.22 PM

So above, if the initial scale is set to 2, for example, notice that the content is now scaled up to 200% even though the width of the viewport remains unchanged. Setting initial scale to “1” ensures that the content appears at 100%, regardless of viewport width.

Screen Shot 2017-04-07 at 1.30.05 PM

It’s common to see people set width to “device-width” and then also set initial scale to “1”, but in reality that’s not really necessary. If you set the viewport width to “device-width”, the browser automatically sets initial scale to 100%. In fact, on iOS devices, there’s a bug with initial scale that affects pages when the orientation changes, so many people advise leaving initial scale off entirely unless you need to set the value to something other than 100%.

In terms of syntax, notice that you use an integer to set the scaling factor and that meta viewport tags use the initial scale property, while @viewport uses zoom.

The @viewport syntax currently also allows a percentage value as well, but since that may change in the future, you’re safer just using a number.

You can also control the range of scaling allowed by your site as well. Let’s say you want to allow people to zoom in and out on your page content, but you do want to control just how much zooming they can do. By using the minimum and maximum scale properties, you can do just that.

In terms of syntax, there is a little bit of difference between the meta viewport tag and the @viewport syntax. In the meta viewport tag, you’ll use the minimum and maximum scale properties and a positive numeric value, which indicates the scaling factor. In the @viewport syntax, you’ll use the minimum and maximum zoom properties, and can use either a positive number or a percentage value.

If you wish, you can turn scaling off by using the user-scalable property. This allows you to either enable or disable user’s ability to zoom in and out on your page content, and i more commonly used for applications rather than websites. For the meta tag syntax, you’l use “user-scalable” and values of either “yes” or “no”. As for @viewport, you’ll use the “user-zoom” property which will accept either the “zoom” or “fixed” values.

Keep in mind that users are accustomed to having the ability to zoom in and out of web content. If you disable this for your site, you should have a clear reason to do so.

 

March 6, 2017 | Lesson 1 (Responsive Design Fundamentals)

The first lesson for Responsive Design Fundamentals was more or less a introduction less for the course to explain what is responsive design and why it’s important.

So, beginning with what is responsive design, one of the biggest challenges face by web designers is the lack of control that they have over their medium. Take print design for example. If we’re designing a magazine layout, we’ll need to deal with variables such as paper stock, what type of press it’s printed on, and which inks we’ll use. While these choices may influence the design decisions, we’re still designing for fixed dimensions. We’re largely in control o fate entire process, and the people that consume the content will experience it in exactly the same way.

Now, when creating content for the web, there are a numerous set of variables in how that content will be consumed. For example, We have to consider the wide variety of browsers and operating systems that people might be using, whether the content is accessible to screen readers or other accessibility-enabled devices, how the content will look if and when it’s printed, or whether they’re attempting to access the content on any one of the growing number of diverse web-capable devices that don’t really resemble the traditional screen and browser configuration.

Screen Shot 2017-03-31 at 3.24.02 PMScreen Shot 2017-04-05 at 1.26.53 PM

Of course, the change that’s been getting the most attention recently is mobile. The recent explosion of client accessing the web on mobile devices has made designing for the mobile screens a requirement.

Screen Shot 2017-03-31 at 3.24.40 PM

But even with desktop monitors, you’ll notice that screen sizes are not only getting smaller, but bigger as well. Because of this, trying to design separately for each context that your content might be encountered in is almost impossible.

This is where responsive design comes in. Responsive design is a design strategy that is centered on designing your content so that it responds to the environment it’s encountered in. The term was first coined by Ethan Marcotte who identifies three fundamental techniques for responsive design:

Screen Shot 2017-03-31 at 3.25.38 PMScreen Shot 2017-03-31 at 3.25.54 PM

Marcotte sticks to these three techniques to define what responsive design is, but like most new terms, its meaning is still evolving. Many people are using it to refer to any techniques or strategies that allow design to respond to different environments. Some may feel it’s a very broad term and one that can encompass almost anything that frees your content from the restrictions of a single context. Learning and understanding responsive design is less about learning specific techniques and more about changing the way we think about designing for the web.

As with all web design, a responsive design starts with HTML. Clean, well-structured HTML helps create content that is meaningful and easier to manipulate based on context. Likewise, the care the designer gives when planning the site’s semantics in uses of ID and class attributes can go a long way towards making the site more responsive.

HTML5 also includes a few features that helps sites be more functional across multiple devices. The new form elements, for example, allow designers to create forms that take advantage of mobile device interfaces and facilitate making phone calls and sending text without requiring extra markup or scripting.

Screen Shot 2017-04-05 at 1.00.42 PM

CSS also plays a major role in creating responsive design. CSS media queries allow us to apply different sets of styles based on factors such as screen size, orientation, or resolution. This allows to change layout and typography to a design that’s more suited to the context in which it’s viewed. Responsive layouts are typically fluid in nature so that they can flex to fit the screen on which they’re viewed. Newer CSS features, such as transitions and transforms, allow designers to change how content displays and interacts with the user without requiring additional scripting. CSS-based graphics can also help reduce the amount of resources requested by the page by replacing icons or other images.

Screen Shot 2017-04-05 at 1.01.48 PM

JavaScript is also used in varying degrees by different responsive designs. It’s primarily used to control resource loading, supply the correct images and media based on the needs of different devices, and to add device-specific functionality like geolocation and touch events to sites.

Screen Shot 2017-04-05 at 1.02.30 PM

Essentially, these three technologies – HTML, CSS, and JavaScript – form the backbone of most responsive designs.

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.

 

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