Viewers: in countries Watching now:
Learn to composite graphics in Adobe Photoshop using variables and a simple text file. This Design the Web installment shows how to automate your production workflow by combining separate graphic files, typography, and Photoshop effects into custom, ready-to-use graphics. This workflow allows you to generate hundreds, even thousands, of unique graphics suitable for websites, interactive projects, or even print. All you need to begin is a layered Photoshop file.
The Design the Web series was created and produced by Chris Converse. We are honored to host this content in our library.
Now, if you're a premium subscriber, to the lynda.com online training library, you'll have access too these exercise files. If you are not a premium subscriber, there is a free set of files, which includes this file here called banner_data.csv. This is basically a blank text file. I just wanted to make sure we all had a text file to start from, and you can edit this text file with notepad on Windows, which is part of the operating system. With text edit on the Macintosh, which is also free or any web-based or code-based text editor. The next file is called banner.psd.
This is the source of Photoshop file that I'm going to be using throughout this course. Now again, if you don't have access to the files, you can use any Photoshop file. You just need to make sure you have multiple layers in that file, and a couple of text layers. That way we can define those as variables and set some of the data. And finally, in the Photos directory, are five JPEG files. These are photographs from different cities. So, what we're going to be doing is using the banner.psd to load in the csv data. Which, in turn, is going to set type on our Type layers, and pull in these graphics from this photo's folder.
Now if you want to create your own Photoshop assets, the size I'm going to be working with here is going to be 800 pixels wide by 200 pixels tall. But again, you can use any Photoshop file and load in any extra JPEG files throughout the course. So, now that we're familiar with the exercise files, next we'll start working inside the banner.psd file.
There are currently no FAQs about Design the Web: Automating Web Graphics.
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.