Using variables in Photoshop
August 23, 2015 5:29 pmLeave your thoughts
Sass and Less introduced a cool new way to create and use variables in CSS. You can store your variables in a single location then if you need to make a change simply update the variable and it changes every other instance globally. Wouldn’t it be cool if you could do something similar in Photoshop? Well now you can. For web designers Photoshop mockups have been a great way of getting high-fidelity prototypes into the hands of clients relatively quickly and efficiently and whilst there’s a whole host of new techniques such as style cards or designing in the browser it’s unlikely that Photoshop mockups are going to die off anytime soon. However whilst revising drafts in Photoshop is more efficient than having to adjust HTML and CSS it’s still a pretty painful process to re-tune your entire design – especially when it involves updating the same colour or font size in multiple different places. That’s where Ditto comes in handy: http://casualnotebook.com/ditto. Using Ditto you can create variables, assign them values and then link them to layers such that if you update the variable at any point in the future all your layers will be updated automatically. There are a number of attributes than can be controlled using variables: Fill Text Visibility Font Size Font Family FOnt Colour Line Height X Y So here’s how to use it. Install Head over to http://casualnotebook.com/ditto and download the extension, it’s free but I’d recommend rewarding the developer with a few $, afterall this will save you time! Once downloaded open up Photoshop and navigate to:
file > scripts > browse > Ditto Photoshop Extension > installer.jsx
![ditto-install](https://www.absolutewillynilly.com/wp-content/uploads/web-design/ditto-install.jpg)
![ditto-blue-text](https://www.absolutewillynilly.com/wp-content/uploads/web-design/ditto-blue-text.jpg)
window > extensions > ditto
![ditto-open](https://www.absolutewillynilly.com/wp-content/uploads/web-design/ditto-open.jpg)
![ditto-red-text](https://www.absolutewillynilly.com/wp-content/uploads/web-design/ditto-red-text.jpg)
![ditto-blue-text](https://www.absolutewillynilly.com/wp-content/uploads/web-design/ditto-blue-text.jpg)
Categorised in: Web Design
This post was written by WillyNilly