Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 in this course we hand coded a .csv file, which is really just a text file, where all of the variables are separated by commas. So in the example we can see here in the Photoshop file we're using the Breckenridge data set which is defined here on line five where the city variable is Breckenridge, the price is $899. The photoBase, JPEG file is being specified as the breckenridge JPEG. Same thing for the photo clip. Then we have our ribbon set to visible. The label is also set to visible and the label text is set to lowered.
Now in this course, we hand coded these datasets. But if you're working with a large amount of data, you can use spreadsheet applications. So in Microsoft Excel for example, you can see here that I've set up a column that matches every one of the Photoshop variables. And then from Excel's File menu you can chose Save As and chose Comma Separated Values or .csv and you can also chose Tab Delimited Text. Photoshop also supports separating the varaibles with tabs instead of commas. You can also use Google's Spreadsheet application. Again with all of the variables set up in all of the columns.
You can choose the File menu that's inside of the browser window and then choose Download As, and you can pick Comma Separated Values or Plain Text. Or, if you're Apple's Numbers, you can choose File>Export, and choose Comma Separated Values, and there are more spreadsheet applications which also have the ability to save out as comma separated values. And with that, that concludes automating web graphics by using Zinc Dynamic Datasets inside of Photoshop and I really appreciate you watching my course.
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.