Join Chris Converse for an in-depth discussion in this video Modifying the graphics, part of Creating a Responsive Web Experience.
Now if you're starting from your final project from the Creating Your Responsive Web Design course, we're going to modify some of those graphics in this video. So inside of the Exercise Files for our templates, let's come in and open banner artwork.psd. The only real change inside of this file is that this photograph has been flipped horizontally to give us some negative space in the upper left hand side here. As we saw from the introduction video, we're going to have our Logo here, and we're going to have a caption that's going to animate in. We're also going to animate the photographs in a horizontal fashion, so let's to the Crop tool.
Let's come down and select the Slice tool. The slices will appear on the stage. Hold Cmd+Ctrl, double-click to get to the Slice Options. So the second change that I made inside of here was to decrease the width here. So the width of the large banner is now 1,080 pixels, to accommodate a horizontal motion. For the medium, we increase the width to 900 pixels. And for small screen, we're going to leave this at 500 by 100. So since these slices are already created, let's come up to the File menu. Let's come down and choose Save for Web. The optimization settings are already set as well. Let's come down and choose Save.
From the desktop, let's choose the my Website folder, select the Images directory. On the options let's choose All User Slices, then click Save. We're going to overwrite the previous files that we had from the previous course. Lets close that file, lets come back to the exercise files, next lets open up content artwork.psd. This is the other file that was part of the previous course were we created the difference sizes of our Logos, the Promo Graphics and our mobile arrows. So, in the Layers panel lets come down and turn on the FPL layer, I'll zoom up on the canvas a little bit I have the Slice tool selected so we can see the slices.
So one modification here is that I increased the size of the sprite graphic. In the previous course, our call to action link was a sprite graphic that consisted of an orange arrow and a blue arrow. And when the user rolled over the links we switched the position of this graphic. Now with the caption that we're going to be adding in to the heading area we need to have four different states of this graphic. So one nice thing about using spreadsheet is we can increase the size of this graphic. We don't have to modify our previous CSS were we can simply add more rules to change and manipulate this particular spreadsheet for the additional graphics that we need. Here are the new graphic I've created over here is the Mobile menu error.
When we change the user experience in this course instead of having an navigation switch to the bottom of the screen, we're going to collapse the navigation keep it at the top. And give our users this mobile navigation arrow. So this is also set up as a spreadsheet, so we can indicate when the menu is closed and when it's open. Now we're ready to save these out, so let's come over to the Layers menu. Let's turn off the FPL layer. Let's come to File, choose Save for Web. All of these settings have been set as well. We'll choose Save. Under Slices, make sure we have All User Slices selected. From the desktop we'll choose myWebsite, Images and then Save.
And then we will overwrite the existing graphics, now Save and Close your Photoshop file, now the text what we've done so far lets come back to the myWebsite folder on the desktop, lets open up index.html open a browser. Here we can see the header graphics are now modified we have the buildings on the right hand side In the next movie, we'll reposition our Logo to be on the left hand side. And if we come in here and size the browser down, our CSS rules are still in place. And when we get to the small screen size, we can see the navigation is still showing at the bottom of the screen. So now that our graphics are in place, next we're going to modify some HTML and CSS to reposition the navigation to stay at the top.
And to reposition the logo so it doesn't collide with the buildings.
- Modifying the graphics
- Adjusting the CSS for the navigation
- Loading content with jQuery
- Loading alternate content based on screen size
- Animating the hero panel
- Maintaining support for Internet Explorer 7 and 8