Lessons

Lesson Info

Overview of Adobe® Photoshop® to HTML

I just wanted to remind people that this is just an introduction. This is an overview. This is We're gonna be talking about what we're gonna be doing over the course of the five week class, which is going to begin two weeks from today. Is that correct, Krug starting on April 20th. So this is just an overview on actually building anything. We're gonna talk about what will be building PSD two html or Photoshopped html. You can actually be using any image editor you want, but we're assuming that most of your using photo shop out there is the de facto image editing tool. And I've taught a lot of workshops and Web design after a lot of one day classes in Flash and Dreamweaver and a common recurring theme that I've seen people is the really good designers. They know how to design things. They have great design, Compton not to malign anyone from any certain age group, but more often than not, the people that I'm finding who are over 40 or learned 100 design. Perhaps 15 years ago, they kind of...

missed out on the whole Web thing and they're seeing that they've got a lot of potential clients with their losing business suit because they're doing great print work for them. When the client is saying, Can you also designed the Web page for me? And you know, they're saying, No, I can't do that because I don't do Web pages or they've gotten himself into a situation where they say Of course I can do that and they're designing things in Photoshop and they're working with the developer who's turning that into functioning pages. There's nothing wrong with working that way. But as the marketplace becomes leaner as things become more competitive, in a certain sense you are you're not as viable. You're not as competitive if you can't turn this. Photoshopped cops into Web pages yourself. And I've seen a lot of people who are in this position, and they say, You know, I could just if only I knew how to turn that PST come. I know how to design for the Web. I understand all the principles and limitations and challenges. If I could just get it into HTML myself, I could one more person out of the equation. I could speed up my workflow. I could get more business I could stop turning down jobs. So what we're talking about here is turning our design concepts into functioning Web pages. And, of course, if you're beginning with Photoshopped, we kind of lied when we made up the title for this course, it sounded really catchy, so we kept it. We're not actually turning Photoshopped into HTML. We need HTML. But what we're really doing here over the course of the five weeks is we're gonna learn how to turn our Photoshopped pages into HTML documents because it's the HTML document that actually gets viewed in the browser. But the way it starts to look like something is through the use of CSS. So this isn't really an HTML class. It's a CSS class, and I tell people who are just getting started in Web design. Now, if you're gonna learn one thing, don't spend a lot of time learning html. The HTML is out there, you know you need to know how it works. You need to be able to recognize its structure, but memorizing every tag is not a good use of your time. If you want to start building Web pages and getting work as an interactive designer The key skill that you need to learn to CSS. And of course, the tool that we're gonna be doing this in is Dreamweaver. So the real focus of this class is going from Photoshopped taking a photo shop file, slicing it up into separate images, then creating an HTML doc and then using cascading style sheets to make it look exactly well, we say almost exactly like the original PSD file. I think the rule of thumb for designers would like to promise our Web designers would like to promise that we're going to get pixel perfect precision to the original photo shop comp. I'm gonna have set the bar a little lower and aim for about 98% precision, because sometimes we have to make some compromises along the way. So what are we gonna be learning, or what do you need to be familiar with or getting recently with? If you want to be taking this court's the core concept for talking about are the separation of presentation and content before you go any further in your Web design studies make it be clear that you understand the separation of presentation and content when I'm referring for these two things. I'm really saying that CSS is the presentation and HTML is the content whilst gonna be talking a lot about semantic markup. When we talk about building Web page, it means using the right tag for the right reason. That mazing means using tags like H one H two paragraph tags, DUl tag or on ordered lists, anchor tags and so forth. Do you need to know how to write all these tags? Not really. Dream Dream Lever is going to write a list of these tags for you. You just need to recognize them and know when to use the right tag in the right place. Another important thing will be going over is the CSS box model. You cannot go anywhere without understanding the CSS box model. We're talking about using margin and padding. Make sure you understand the difference between those two but turning your HTML document into a functioning Web page. It looks a lot like that Photoshopped com will be dependent on using the CSS box model. We can't forget about using lists for navigation, the U L tag and the L. I tags, because when you talk about making a website. When we talk about semantic markup when we talk about using logic and order and we talk about building our site for search ability or to respond to search engines, what better way to make a navigation bargaining to make a list of the entire contents of the site? So best practices and Web design means you might have think you might be thinking that you built a knave bar in Photoshop. But when you get into Dreamweaver and CSS and HTML, that needs to be a nun ordered list, which is populated by list items. Must be many people confused those toothy ul tags in the Ally tag. I will be going over those points repeatedly until they're clear and you can't build a Web page these days without using. Give tags for layouts. If you're still in the world of table based Web design, it's time we just stop using tables for layout only used tables for displaying tabular data control your page layout with def tags, and you're gonna need to be familiar with the concept of floats and positioning to control that layout. So many of you are thinking I know this is over my head. I can't possibly remember this. Don't worry. The five weeks that we're gonna be doing this, the exercise files that I've built I've structured based on the principle of repetition, we're gonna be approaching these concepts every week, getting a little more difficult and complex with each week. So if it sounds completely foreign, don't worry. We're going to start small and build up, and we can't forget about accessibility. Um, accessibility is really important in Web design. While some people do it for socially conscious reasons or to make pages more accessible to everyone who could possibly using the World Wide Web talk about ubiquity. The real reason you want to make accessible, quiet pages accessible or the real reason you're gonna want to tell your clients that we want to make our pages is accessible is that accessible pages get better search results. So we're going to strive to follow best practices. But I have a couple of disclaimers here because I can't possibly keep everyone happy. These projects are designed to work in all modern browsers. That means it's gonna work in Internet Explorer seven, Firefox, safari, chrome and opera. I should I should say, My goal is to make it work in all these modern browsers. I've only built the photo shop documents so far. I have to come back to you in two weeks with five functioning HTML pages and let's hope they work in all the different browsers. But now this is gonna be like a pivotal moment in my career, the evolution of the Internet. I'm just going to say that I e six equals bad. And what I'm saying to my client's right now is I don't develop for Ice six anymore, and I would encourage everyone so that we can all move the Web forward is I want you all to tell your clients that you don't develop for I E six anymore either. According to the latest W three C stats, IE six usage statistics have now dropped under 10% which just seems like a lot. But it was over 10% last fall. All we can do was we all have to work together and try to push this browser out of here. What I'm generally telling my clients these days is if they wanted to work in 96 this is going to take me 20% more time and it's gonna cost 20% more. So just added on to your estimate in the beginning or another way to look at it is it's 20% less than 20% faster if we don't do it in I e six. One of the big opportunities for not having to develop a 96 despite its own pesky box model is I can use transparent pink files. So all modern browsers support transparent pings, which allows us to bring a lot more visual richness. And a lot of Richard design quality toe are photoshopped files and track Carry that over to R P STS to our HTML and CSS. Another thing that I'm going to do, which isn't gonna make everyone happy, is all my measurements are gonna be in pixels and not in EMS. So since we're also in the error of era of the modern browser, I'm gonna assume that all modern browsers scale proportionately. Yes, I know that you can have text site text zooming turned on or off, but the people who hit command plus and see their text zoom are going to see that zooming and breaking up the layout they're gonna be seeing that anyhow. So while best practices would be to say to design in EMS so that weaken meet accessibility requirements, the class goes a lot more quickly. When we have to do the math and pixels, then it EMS. It's not a perfect solution, but most of you, if you're getting started in Web design now, you're probably not building your best. Work is still 12 or 18 months from now, and the Web is moving forward and changing so quickly. It's time to be forward thinking and thinking only in pixels and not necessarily working in EMS. So the accessibility, usability and SDO purists will not always be happy with the solutions that I've taken. Some people say, you know well, that's totally black hat. That's not the best for Aecio. That's not best for usability. And that's not best for accessibility. There's a lot of people are going to try to keep happy here, but I'm focusing mostly on designers. Designers want to make things look good and they want to keep their clients happy. They want to get the project done in a certain amount of time, so my goal on all of these is to try to find followed the Buddhist principle of the middle way. We can't take the high road. We can't take the low road, but we'll try to follow as many best practices as possible or try to pages which are W three c compliant for X html and our CSS try to in cages which look really good in the browser. So the other thing that I'm doing, which is perhaps forward thinking, is most of these projects designed for a width of 960 pixels. So 9 60 is the new minimum for your resolution, because W three c stats are saying that 96% of users now have a resolution of 10 24 by 7 68 or larger. Although while I I advocate this, it is ironic that I just had a client last week and I struggled and I wrestled with him. I could not get him to go wider than 800 pixels. 800 by 600 is what he wants wanted because he said, I don't wanna have to do a little scrolling. They're gonna have to you any schooling so some people might still be reluctant, but I'm gonna encourage everyone to go 9 60 wide or even wider. The reason that most of these are some of these, at least in the beginning. Our first exercises, air pixels tall is that what's fits best in our video format since my resolution from my screen is over. So only 7 20 I'm not going to try to make Photoshopped files, which are much taller than that so we can see the whole thing and in the video at one time. However, for those of you who are currently designing Web pages, I would encourage you to not be limited by that. I think it's also time to go below the fold or beneath the fold. Although there are usability, tests would say that users won't see content, which is below the fold. It is my opinion now that everybody knows how to scroll. If you look at The New York Times, if you look at ESPN if you looked at contemporary news sites, many sites have lot of content below that 727 120 pixel barrier, so feel free to make your layouts larger. I was really in good article from Jacob Nielson this morning. His usability Where's it? Use it. The website. Use it. His usability alert. That said, If the content is good, if you have something really important at the bottom, people will scroll down to it. But if you fill it up with fluff, it's gonna get ignored. And another trend that I'm going to be using this really large background images as more and more of us get bigger monitors with bigger resolution, more and more Web pages are using that real estate behind the Web page, and it's more. More people have a higher band with connection. We're seeing large image files, large file sizes. We're seeing much mawr, visually rich background images. So feel free to use that space outside your page. And another thing, which I'm gonna be showing you is consider using a grid system. There's a lot of free templates out there. Like what? You could find it 9 60 dot gs that help you lay out your page on a grid of 960 pixels wide. So as I was getting ready for this class, I started looking into design trends. I went I want to see what's really happening in Web design out there right now. It's so over were overwhelming. There's so many different things happening. They're getting visually richer. They're getting more complex. So I went to a couple of CSS galleries. You might be familiar with these such a CSS vault in CSS Beauty. These air user submitted galleries that have all the latest and greatest trends and Web design, and I literally looked it over 200 Web pages and took screenshots to sort of see what's happening in Web design today. What are the trends? What is the state of the art? What should we be doing? If we're teaching how to make Web pages, we should be really looking at the best Web pages out there. What I'm seeing is more rich textures, more Grady INTs, more lighting effects. I'm seeing more drop shadows, more illusions of three D space. What I'm seeing is especially through the use of a Ping files. I'm seeing all the great tricks that you can see in Photoshop, and I've seen that being applied successfully into Web pages. 345 years ago, things were a lot flatter. File sizes were smaller. I think transparency wasn't really, really an option. Things just the Web of four or five years ago looked dull in comparison. So everything is getting richer. And these Photoshopped concepts are getting trance furred successfully into HTML and CSS also seeing more sort of typography and one of things we're gonna do in, ah, our fifth exercises go beyond website fonts. So it's a really exciting time, I think, in terms of design trends, especially in terms of interactivity, I'm seeing especial with Jake Weary. Everyone wants something flashy. And 18 months ago that meant flash. But there are so many more options out now. How there right now, particularly what you could do with Jake Weary. If you haven't heard of J Query, it's time to start reading the design blog's because it's everywhere on the Web right now, Matt fact, um, on the creative live website right now, we've got an image slideshow. Rotator, which I'm Bed is being done with a query. If you've been watching slide shows have been watching a lot of the new interactivity that's happening. A Web design. Right now, it's probably being done with Jake weary. What is Jake? We're you're probably you're asking that is a compact Java script framework that allows dynamic animation to be added to your Web page. Now, if you're thinking, wait a minute, you lost me at HTML and CSS. I didn't want to learn how to write any JavaScript. Don't worry about it. There's not a whole lot of Jake or you need to write. We're just gonna be cutting and pasting some code. You just need to know how to implement the Web development that someone else has done and know how to put that into your HTML documents. So you've got some interactivity and bring it to life because everybody is asking for something interactive these days.