Join Emily Kay for an in-depth discussion in this video What you should know, part of Photoshop for Web Design.
- [Instructor] In order to get the most out of this course, you should already have some knowledge of Photoshop. If you don't, I'm going to refer you to the Photoshop Essential Training Course here in the library. It will also be beneficial if you have a fundamental knowledge of the web. This will aid in you getting the most out of this course. There's a few extras that I'm using in this course. These are some enhancements to Photoshop, and let me tell you, they are awesome timesavers. The first one is Fontea. Fontea is a plug-in that allows you to browse and use Google web fonts right inside of Photoshop.
This is going to give you over 800 available fonts. If you come to the Fontea website, and download and install the plug-in, you'll need to quit Photoshop and then relaunch it. I've already placed the Fontea window palette in my workspace so that I have quick access to it. Let me just quickly show you how this works. I'm going to go ahead and select a layer that has text on it, and here I have all of the Google web fonts available.
Once I find one that I like, all I need to do is simply click on it, and it's going to apply it to my text, so I can very quickly test and see how these web fonts would look, and if I decide to use them, I can just continue to use them. I really like this plug-in because it gives me a plethora of web based fonts available for me to use right in my designs. Another one of my favorite enhancements for Photoshop is a script that allows you to expand or unsmart Smart Objects.
If you come to the Magic Scripts website, you'll need to scroll down and find the Unsmart script. You can download all of the scripts, and make sure that you're installing this into your scripts folder. Once you do this, you'll have the ability to utilize Smart Objects, and you can break them apart so you can have access to them and delete their link to the Smart Object element itself. This is extremely useful especially when you're using multiple instances of the same Smart Object.
When you double click on one of the files for this course, you may see a window that looks like this letting you know that it cannot locate linked assets. What I want you to do is just go ahead and click okay. The file's going to open up just fine, but if you look through the various layers and layer sets, you might see that some of the images are going to have a warning symbol appearing on them, like these two right here. If you click on these layers, and go to the property pane, you'll see that there's a little exclamation warning symbol, and what you're going to want to do is click on the warning symbol and select Update Modified Content.
It's simply going to update and relink to that cloud based asset. You don't have to do this step if you don't want to modify any of the elements, but if you want to work with and modify the elements, you will need to relink to the proper cloud based library item. In addition to that, you might find that some of the items will appear with a red question mark. This is an indication that the file is not able to locate this particular graphic.
What you'll need to do in this case, is you'll need to click on the question mark and you'll need to relink to the library graphic. This particular file is my pineapple. You'll select the graphic from the library, and you'll click the relink button in the lower right hand corner. This is going to relink the library item, and now if we look, you can see that that icon has disappeared. If you ignore these warnings, the file is not going to be impacted. The only time that it's going to become an issue is if you try to make changes to those layers, you'll get a warning dialog box.
I just wanted to point this out since this is particular to this course, and we are using a ton of library items in this course. As long as you just follow these steps, you'll be able to relink everything, and if you want to manipulate any of the artwork, you'll have no problems.
- Setting up workspaces and artboards
- Using libraries
- Responsive design tips and tricks
- Setting breakpoints
- Creating navigation elements
- Creating textures and backgrounds
- Embedding or linking smart objects
- Making custom templates
- Creating reusable UI elements
- Saving and exporting for the web
- Using Generator