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.
Next, we're going to add some additional elements into our design, and then turn those elements on and off with our data sets. This way, each individual banner doesn't have to look exactly like all of the other ones. So inside of the variables dialog box, if you still have this open, you can click OK. Now if we want to work with a specific layout, another nice feature under the Image menu is the Apply Data Set. If we come down to this all of the data sets that are loaded into the Photoshop can be activated. So you can have any one of these in place so that you can work with them. So lets come over here is select Washington, D.C., click Preview or San Francisco or Breckenridge.
Once you have the one you want you can click Apply and this will be the state of the design we'll be working with. Now what I want to add to the banner is a ribbon or a violator that'll sit on the upper right hand side. And then we can specify to our users if the price is new or updated. So first let's come over here to our toolbar, let's come down and choose the Rectangle Shaped tool, let's come over here and click on the stage. Just like Illustrator, we're going to get a dialog box, it's going to ask us for the size. Let's set this to 200 pixels by 30 pixels, I'll choose from center then click OK.
Now how this is styled will depend on what you did the last time you used this shape layer in Photoshop. Now in the Layers panel we can see the new vector shape here. Let's come over here and rename this. We'll name it Ribbon. Add the toolbar at the top. Let's come up here. I'm going to fill this with black, make sure that the stroke is set to none. Next, let's come down and select the Move tool. Let's hit Cmd or Ctrl+T for transform. Let's hold the Shift key. Let's rotate this 45 degrees. Press Return. Still on the Move tool.
Let's move this over to the right hand side of the screen. I'm going to position this hear so that it just cuts through the number nine in the price. With the ribbon selected in the Layers panel, let's come down to the Effects, and let's choose Gradient Overlay. Let's come up here and click on the Gradient Swatch, then down here let's select the first color stop. Let's come in here and select gold color, click OK. For the second color stop, let's pick an orange color. Let's choose OK. Choose OK for the gradient editor. Down here in the angle, let's hold the Shift key and let's move this down to negative 135 degrees.
That'll give us a nice gradient from the bottom to the top of the ribbon. Let's click OK. Next hit the letter T for the Text tool. Let's come up to the canvas and let's click drag a text area. Then let's type in the word label. Let's do Select All, let's come up here and call it the text white. I'm going to set mine to about 18 points. Close up the text area. Hit Cmd or Ctrl+return to commit the text changes. Next hit Cmd or Ctrl+T to transform. Let's rotate this 45 degrees as well. Get the Move tool. And let's move this over here over top of the ribbon.
So now with these in place I want to have the ribbon look like it's behind some of the text. So let's grab the Ribbon layer. Let's move this down to be below the price text label here. Now I want to move this over a little bit to the right. So bring this to about right here using my arrow keys. Next we'll grab the Label. Let's move this to about right here. Now we're going to use this new artwork to specify if some of our advertisements are new or have been modified. Now in order to do that, we need to define these as variables. So, let's come back to our Image menu. Let's come down to Variables. Let's choose Define. Under the layer, let's come down and let's first choose Ribbon.
And for the variable type here, we're going to choose visibility, this will give the ability to hide or show that layer based on the value of our dataset. So let's come down here and name this ribbonV, for visibility. Next, let's come over and choose the text the layer called label, here we're going to turn on Visibility as well. So we're going to name this labelV and we're also going to turn on text replacement, so this particular Text layer is going to have two variables associated to it. One being whether or not we can show or hide it, and the second one being the actual data that shows up inside of that variable.
So for text replacement, let's copy that variable name, let's paste it and name it label T. So label V is for visibility. Label T is for text. Then we'll click OK. Now we've added three more variables to our Photoshop file. Let's chose Save inside of Photoshop. lets come back to our text file and let's come up to the first line and add the three additional variables. So after photoClip, we're going to hit comma, space, ribbonV. Then a, labelV comma space and then labelT.
So the variable after photoClip is going to define whether or not we can see the ribbon. Next whether or not we can see the label, and then what the value of the label's going to be. So for Aruba we don't want that label to show up at all, so after the Aruba JPEG, which is being defined for photoclip, let's hit a comma then a space, then we're going to type in false. To turn on visibility for any variable you have to use true or false. So false is going to set ribbonV to false or it's going to hide it. We'll need to set the same thing for the label. So false comma space and then we have to define and then we have to put some kind of value for labelT, even though we are going to be turning off the label and the ribbon. So lets just put a letter x there Now for Washington D.C. we don't want to have that extra artwork showing up on that banner either, so let's come up here and let's copy the comma.
So let's come up here and select the comma both False settings and the letter x. Let's come down on to Washington D.C., let's paste that as well. Now let's come down to the end of the line for San Francisco. Here we do want to specify that this advertisement is new. So let's hit a comma, space. We'll type in true, for the ribbon. True for the label, comma, space, and then the value. Let's type in the letters new in all upper case. Next we'll use the flag on breckin ridge as well. So after the Breckenridge.jpg comma space open and true comma space true again comma space and here we want to specify that this price has been lowered.
So I'll type lowered in here. And then for Amsterdam we'll leave this unmodified. So we'll leave False, False and the letter x just like we did for Washington D.C. and for Aruba. So now we've all this extra data in place. Let's choose File>Save inside of our Text file. Let's switch back over to Photoshop. Let's come over to our Image menu. Let's come down to Variables, then to Data Sets. Let's come over here and choose Import. We're going to import our brand new data sets. So now can see down here all of the extra variables showing up. Now, let's switch our data set to Washington, D.C., to give our canvas a second to update.
You'll see that the ribbon on the right hand side goes away. Let's go back to Aruba. The ribbon also goes away on Aruba. Let's come down to San Francisco. This is a new advertisement. So we can see all of the data showing up in addition to the ribbon and the text saying that this is new. Let's come down to Breckinridge. This ones been lowered. And then finally down to Amsterdam where we're not using the ribbon on this banner either. So now in addition to just bringing in different JPG files and setting text, we're turning on and off additional layers and setting additional data based on our data sets.
And now with all of this in place, next we'll look at how we can export from Photoshop and get individual graphics that we can use in our interactive projects, based on all of these data sets.
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.