PNGs and GIFs have slightly different syntax than JPGs, but the logic is the same. Again, there's a thousand options here and I'm not going to cover them all. What you put after the filename is what determines the image type and image quality. For example: PB_Headshots_Jordan05_16x9.JPGģ. This will save your developers a TON of headache and time down the road and will prevent them from having to guess or inspect each photo. We're sure to include the image ratio within the actual file name. If the folder does not already exist, it will create one.Ģ. For example: 16×9/FileName.jpg would place the image inside of a folder named "16×9". Photoshop will determine anything preceding a forward slash as a file path. We organize everything into subfolders named either categorically or based on the image ratio. For a complete list of what's possible, check out this Adobe help section article.ġ. There's a ton of personal preference and customizability that can be tweaked to your liking, so I'll just stick to what we do and let you draw your own conclusions. Generate Assets will use the layer's name to determine what to do with the image files. Photoshop currently supports three file types for generating assets: JPG, PNG, and GIF. Remember not to oversize your images as it'll cause them to be pixelated. Now you're going to want to make duplicates of your image on every corresponding artboard (you can do this by alt-dragging the image). This is where all your sweet images will be generated at. psd is saved in, you'll notice a new folder called yadayadayada-assets. If you check out the root folder that your. Make sure you save your file directly after you turn it on. Head up to File > Generate > Image Assets. You can either Option + Drag your already existing artboard and edit the dimensions in the properties panel, hit the artboard's name on the canvas followed by the plus button, or switch to your artboard move tool by hitting Shift + V and creating one with a custom size. We now have a single artboard set up for us already, but we'll most likely want to include more than one size of our photos. Hit create and check out your new artboard. You shouldn't need to change anything else beyond this. You shouldn't need higher than 72 for the resolution. Set the dimensions for your first artboard and make sure the artboard box is checked. You can start off in the web presets if you want. Go to File>New and create a new document. I'm going to blaze past this part since most of the steps are self-explanatory. Here's a pretty standard list to start from: desktop, how the images look on Retina displays, and decide where and how they'll used. If you're working with a developer, grab a list from him. The final piece of prep work that we need to do is figure out what sizes we'll be using in different contexts on our website. For example:Ĭlient Abbreviation (Internal in this case, so Pixel Bakery) -> Project Name -> File Name / Purpose -> Unique Identifier -> Version Number 02. We always use a Big Idea -> Little Idea system. If you don't set these rules up, you'll end up with a lot of IMG_5135112.JPG and Headshots_Old_Finalfinal.jpg You'll know exactly where to find your images and be able to identify the correct one immediately based off of the name. It prevents files from getting jumbled and lost, and eases the learning curve with your clients. Establishing and enforcing naming conventions and file structure ahead of time will help increase the shelf life of your project. I'm sorry in advance if this part sounds soap box-y.īefore we do anything else, we need to make sure our workflow has a good foundation. Compressing the files correctly so your website visitors have a quick and enjoyable browsing experience.Ġ1.Prepping your files ahead of time correctly. There's several sub-steps that we'll go through, but overall it comes down to: Even beginners should have no trouble mastering this technique. We use this workflow because it's very simple and fast to use, and our clients are able to understand the process with relative ease. This workflow takes advantage of Photoshop's new Artboard capabilities, which provides Illustrator-like functionality to canvases. (Also my camera decided to stop recording towards the end of the video so you'll have to stare at the screen recording of my desktop for a bit. You can pick up a subscription from their website for $9.99/month that includes both Photoshop and Lightroom.įor those of you that need to touch and feel, I've uploaded all of the working files that I use in this tutorial. You'll need Adobe Photoshop for this tutorial if you don't already have it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |