I've been prototyping in Component Studio(referred to as CS for the remainder of this tutorial) a lot recently. CS does some things amazingly well but a lot of things you have to hack and changing image colors is one of them. You may want to change image colors for any number of reasons from types of cards to making a PnP version. I've been known to put a note on the top step that sets a isPnP variable to 1 or 0 and base my entire design on this. I can just set that variable once for both so i can generate a printer friendly PnP or normal cards.
The cards below are for a prototype I was working on where one of the sides is a Law and the other is a Lobbyist and you should be able to tell at a glance what is what. So the document is the law and the person is the lobbyist. and there are(so far) 3 colors. Red, Blue and Yellow. I decided to add an icon to each side to show what that side is.
The cards have 2 colors a dark color and a light color. The images are the dark color with an opacity set but you can use the dark color. First in sheets I create the colors that I want to change the images. Which in the above example is ForeColor. The color that the text box it is in is the background color and in my spreadsheets is called TemplateColor.
Ok then it's off to find your images. I used https://thenounproject.com/ for mine be sure to get your attribution for what ever you get from there if you use there and put them in the rulebook or on the cards themselves. The document is this https://thenounproject.com/search/?q=document&i=1262053 and the person is this https://thenounproject.com/search/?q=person&i=1129051 and the way this trick works is you invert the image and put it in front of a box that's the same size as the image. (you can change the color of the box) so go into your trusty image editor of choice and first you want to crop out everything but the icon. and then select the icon with the magic wand and invert your selection. then create a new layer and hide the old layer and take the paint bucket and fill in the selection with black (you will invert this in CS later) on the new layer. You should at this point have the opposite of what you wanted. see below:
Now onward to CS. Upload your inverted images to CS. In CS the first thing you want to do is set your color on a box so add a box and position it where you want your image. Like the following step, you will notice a box where you want your image.
After the color box you will add the inverted image. In my case it's {$ForeColor}. In my cards in this demo they are static but i do have another project where they are pulled from a data source. but those have a white background so i decided to use this instead because it shows more complexity. The next step is to actually add the image.
A couple key things about this step. one it needs to be exactly the same dimensions and positions as the previous step. Second invert the colors. (you could have just made it white but i find it difficult to see what the image it is in the CS interface if it's white) and lastly the blend mode is add. this will make the background white. now to mimic the background that you already have the last step.
For this step you want to copy the first step so you have the same dimensions. and you want to change the fill color to the color of your background in my case {$TemplateColor}. and the important portion is the blend mode should be multiply at this point. and that's how you get to the above. In my above image you can't actually read the text so for me to get it to be like the document image i just changed the color step's opacity to 30% and to get it to have that grayed out look i changed the replace color steps blend to darken. alternatively i could have chosen saturate and it looks fine there.
You can play around with these steps a lot of it is just me playing around till i get things the way i want them to be.
Until next time,
Happy designing
No comments:
Post a Comment