Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
Seeing as our typographical options are somewhat limited when it comes to the fonts that can be displayed on the web, you might be tempted to simply save your text out as an image and then place those images accordingly in your web pages. This is definitely a way around the font issue that we see as designers. But at the same time it goes against the best practices and it can cause several serious headaches. By using images in your designs instead of actual text, you're not providing selectable or searchable text for your end user; therefore, you're limiting their ability to interact with your content.
You're also killing the accessibility of your site for people with disabilities and doing irreparable harm to your SEO as well. Not to mention the fact that if you save your text out as an image versus using live text, you won't be able to change or modify that text unless you go back into Photoshop, make your changes, then re-export and re-upload it to the server. That's a lot of work, whereas if you'd just used live text, you could've just gone in and made the change, hit Save, and you're done. It's also been my experience that many people don't save live text for the objects that they are using as images on their web site.
Instead, they'll only have a flattened JPEG or PNG file. This means they're no longer able to edit the text in Photoshop and they have to start all over again redesigning that part of their web site. Take a look at his example that I have onscreen. I have this file open and I have two layers inside: one called IMAGE and one called TEXT. The one that's called TEXT is actually live editable text. So if I need to change that at any time, I just double-click the T and I can make changes to it. I could change it to say Image for instance. If I wanted to do the exact same thing over on the word IMAGE, double-clicking that only brings up the Layer Styles.
There is no way to change this because it's rasterized. Sure, I can move it around and I can do things with it, but I can't ever change the text itself. I can't easily change the color of it either. If I want to change the color of the other text, I just simply double-click to highlight it and then I can change the color, just like that. I can also take this live text object here and free transform it using Command+T or Ctrl+T. I can shrink it down, I can blow it back up, and because it's still vector text, it maintains the edge integrity all the way around all of the text.
Try to do the same thing with the image on the right. Let's move it up. Command+T or Ctrl+T and I'll shrink it way down. Then let's Command+T or Ctrl+T again and blow it right back up. It looks great, doesn't it? Not really. So let's undo that. Let's get back to our original. Just go up to File and choose Revert. There we go. So I think by now you're getting my point. Yes, you can use images instead of live text in a web page and I get it that sometimes that's the only option, but that doesn't necessarily make it a good option.
There are currently no FAQs about Photoshop for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.