Sometimes Text Needs Help Standing Out on A Busy Background
Sometimes Text Needs Help Standing Out on A Busy Background
I used to work for a ad agency designing ads. One day they asked me if I would design graphics to post on social media.
They were a Christian organization as am I, so they wanted their social media posts to reflect that sentiment.
They gave me full creative license to use Bible scriptures, quotes from different scholars or even great people from the past like Winston Churchill or Mark Twain.
I would use some of my own photography of wildlife, landscape and some of my family.
Many times, I would use a photo stock agency if I found a great saying and wanted just the right image for it.
The image of the boy and man is my son teaching my grandson how to cut wood.
Putting together text with a great image makes a very powerful message and tells that story in a hurry.
One of the problems I encountered as I began to match text with a photograph was the busyness in the image would keep the text from showing up clearly. It made it hard to read.
I tried several ideas until something dawned on me. The technique was simple.
It would require using layers in Adobe Illustrator.
You can also use this process in Photoshop, InDesign and just about any other software that has a text tool but I have found Illustrator is the best and fastest for designing ads.
It is an easy program to wrap your head around and very intuitive.
Like I said, you need to do this in layers.
The video below will explain a step by step of how to do this very cool technique.
Sometimes Text Needs Help Standing Out on A Busy Background
Step by step to Making Text Stand Out … J.T’s recipe
- In Illustrator, create palette/workspace
- Position image onto workspace (changing opacity helps in seeing workspace under image)
- Select Text Tool. Create a text space, off from the image workspace. (I’m calling this the text ‘fill,’ or ‘fill layer.’)
- Import and arrange text. Choose font and sizes. Position onto image for best appearance.
- (Now here comes THE Technique! ) …
- COPY the arranged text, and slide down that text box off the image workspace, thus creating another layer. On a Mac you can press the option button while dragging and will make a new copy.
- Change the color of this layer to the envisioned border color that works well w/ the rest of the image. (I’m calling this the text ‘border,’ or ‘border layer.’)
- Go to Layers Dialog – should see at least 3 layers: base image, 1st layer (fill), 2nd text layer (border); which would of course be the most recent. Reverse the text layers, so border is now layer 2, and fill is layer 3. (Remember, Ps and Ai build from bottom-up, and border layer has to be underneath the text fill layer. Reversing the layers is how to accomplish this)
- Enlarge the font size of layer 2, the border layer. Using the stroke toolbar, increase the stroke size of layer 2.
- When satisfied with text and border appearance, combine the two text layers by scrolling a new bounding box around them both, go to the OBJECT drop-down, and select ‘Group.’
- SAVE as an .Ai file in the GFX folder of my choice,
- Then EXPORT AS (be sure to choose art boards box) … type of end-use format I need. If it is to be made as a JPG make sure you select RGB and not CYMK. RGB is for internet usage where CMYK is for printing. If you try and put a CMYK on the internet be it for social media or a website, the colors will come out crazy. I make a high resolution (240dpi) first just in case I want to print it out and then make a second copy at 72dpi for the internet.
Sometimes Text Needs Help Standing Out on A Busy Background
