Painting with Color a Photoshop Technique for Photographers and Graphic Artist

Painting with Color a Photoshop Technique for Photographers and Graphic Artist

Painting with Color a Photoshop Technique for Photographers and Graphic Artist

Sometime we need to tell a stronger visual story than is available with standard color or black and white photographs.

We want something to “jump” off the page in our image and grab the attention of the viewer and hold it.

If you do, I have something for you.

Painting with Color a Photoshop Technique for Photographers and Graphic Artist
Painting with Color a Photoshop Technique for Photographers and Graphic Artist

As a graphic artist and photographer, I employed something that I feel is part of both worlds. It is a technique I learned a few years ago when I would process wedding photographs that I had taken.

I call it “Painting with Color”.

I have used this photography skill many times when I have designed newsletter and websites because it does demand attention from the viewer.

It’s like underling a word in a sentence to make sure the reader does not sail on by. Some images take on a surreal eerie effect that stumps the senses.

Painting with Color a Photoshop Technique for Photographers and Graphic Artist
Painting with Color a Photoshop Technique for Photographers and Graphic Artist
Painting with Color a Photoshop Technique for Photographers and Graphic Artist

The manipulation is done in Photoshop and is not hard at all.

First you will want to pick a suitable image. Something that will have a sharp contrast going from color to black and white.

 Not all photographs work and some better than others.

As you play with the tools you will get a better feel of what to look for in the way of an image to use.

Painting with Color a Photoshop Technique for Photographers and Graphic Artist
Painting with Color a Photoshop Technique for Photographers and Graphic Artist
Painting with Color a Photoshop Technique for Photographers and Graphic Artist

I have made a step-by-step video on YouTube detailing how use this technique on your own photography. Click the link below to view it.

Happy painting.

Painting with Color a Photoshop Technique for Photographers and Graphic Artist

.

  1. Open an image in Photoshop. Make sure the “Layer” pallet is open so you can keep an eye on it throughout this whole process. If it’s not open, go to the top > Window > Click layers
  2. You will also want to make sure the “History” pallet is open and can find that in the same place as the layer pallet.
  3. Now the magic begins.
  4. Make a second layer of the image by dragging the first layer into duplicate layer tool located at the bottom of layer pallet. It looks like the paper with fold on it (to the left of the trash can).
  5. You will now be working on the top color image in the layer. That is the image that will be turned into B&W while the bottom image stays color. When you paint that part of the B&W it will give way to the color image below in just that spot only.  
  6. To change the color image on top to B&W, highlight the top image in layer. Go to top > Image > Adjustments > Black & White. Now adjust the B&W using the tool pallet that will show up. Adjust the B&W to the best way that you like it. This is important to make a good B&W because that part of the image that will stay B&W will be most the image.
  7. Now you want to click “add layer mask”. That is also located at the bottom of layer pallet. It looks like an image with a BIG hole in it. This tool will then allow you to paint to the color image below. You will notice a white image will appear next to the B&W on the top layer.
  8. Remember this saying: White reveals, Black conceals. That is what you will want to remember as you move forward.
  9. Now you will want to select the eraser tool in the main tool pallet. If you do not know what that tool is just hover over each tool for a second and a pop up will show which one of the tools are.
  10. When that tool is open, you can the adjust the size of the tool by going to the top and change the brush size. On a Mac computer, the shortcut is the two bracket buttons to the right of the letter P. That is also where you change the mode, opacity and flow. I make the mode: brush and leave the Opacity 100% and Flow 100%.
  11. Remember when I said white reveals and black conceals? To switch back and forth on that tool go back to the main tool pallet and down below you will see two screens with an arrow pointing to both. You will want to make one black and one white. By clicking the double arrow it will switch which one is on top and regulating what the brush is doing.
  12. White will reveal what is on the bottom layer. In this case, it’s the color below. If you made a mistake and painted too much area you can switch to black and it will turn that part back to B&W. Very cool.
  13. Make sure you use the magnifying glass and make the image BIGGER so you can do fine detail. That will give your finished image more believability.
  14. You can leave this image in the layer form when you save it because it will make a Photoshop Document (PSD) file out of it. That way you can go back and work on it some more if you wish. You will also want to make a .JPG so you can share it with others and you can do that by making a “Save As” and clicking .jpg.

 

Painting with Color a Photoshop Technique for Photographers and Graphic Artist

Sometimes Text Needs Help Standing Out on A Busy Background

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.

Sometimes Text Needs Help Standing Out on A Busy Background

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.

Sometimes Text Needs Help Standing Out on A Busy Background
Sometimes Text Needs Help Standing Out on A Busy Background

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.

Sometimes Text Needs Help Standing Out on A Busy Background
Sometimes Text Needs Help Standing Out on A Busy Background

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.

Sometimes Text Needs Help Standing Out on A Busy Background
Sometimes Text Needs Help Standing Out on A Busy Background

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

  1. In Illustrator, create palette/workspace
  2. Position image onto workspace (changing opacity helps in seeing workspace under image)
  3. Select Text Tool.  Create a text space, off from the image workspace.  (I’m calling this the text ‘fill,’ or ‘fill layer.’)
  4. Import and arrange text.  Choose font and sizes.  Position onto image for best appearance.
  5. (Now here comes THE Technique! ) …
  6. 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. 
  7. 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.’)
  8. 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)
  9. Enlarge the font size of layer 2, the border layer. Using the stroke toolbar, increase the stroke size of layer 2.
  10. 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.’
  11. SAVE as an .Ai file in the GFX folder of my choice,
  12. 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

Creative Annual Reports Make People Want To Read Them

Creative Annual Reports Make People Want To Read Them

Creative Annual Reports Make People Want to Read Them

Hard to believe?

It all depends on who is designing them.

Yes, I know it must have all the important numbers to give stock holders and the public a sense of the health of the company or organization but, does it have to be so dry?

Creative Annual Reports Make People Want to Read Them
Creative Annual Reports Make People Want to Read Them

I take no greater challenge than to take something that is made year after year and make it stand out.

Creative layout, graphics and photography will do just that.

I like to do a lot of research on a company to find out what will best present them in the best light possible.

I follow their brand as far as colors, logo, text usage and many other special things that says who they are but what else can I design that has not been done before?

Creative Annual Reports Make People Want to Read Them
Creative Annual Reports Make People Want to Read Them

The Salvation Army Annual Report was something of a challenge.

Red was the dominant color for them but it does not take much of the color before it becomes over powering.

Red does that!

Creative Annual Reports Make People Want to Read Them
Creative Annual Reports Make People Want to Read Them

I used some color photographs but I also used black and white and then added some images that had been colorized.

What is colorized you may ask?

It is a Photoshop technique where you turn a color image into black and white and then paint back just a few places in the B&W and return it to its original color. It makes the image stand out.

Some images I turned into sepia tone to tell a different story.

Other techniques were used on the layout itself to make the report more appealing and enjoyable to read.

Creative Annual Reports Make People Want to Read Them
Creative Annual Reports Make People Want to Read Them

In the end, the annual report gave the needed information but it was also eye catching to were someone might just want to pick it up and flip through it.

If that is what happened, then I succeeded in having it stand out.

Creative Annual Reports Make People Want to Read Them
Creative Annual Reports Make People Want to Read Them

Creative Annual Reports Make People Want to Read Them

Designing Amazing Newsletters and Magazines

Designing Amazing Newsletters and Magazines

Designing Amazing Newsletters and Magazines

.

Designing newsletters, magazines and books for print and digital.

I am a photographer first and always and have been for 40+ years.

I started out as a wedding photographer back in the early 70’s but found out I had curiosity and ability to photograph many things on planet earth.

I have a library of images that I have taken on landscape, wildlife and close-up macro photo’s that I think are very good.

Designing Amazing Newsletters and Magazines
Designing Amazing Newsletters and Magazines

Through wedding photography, I learned people skills. My dad had this skill also so have much to thank him for. Photography also taught me how to look at the world in very creative ways.

Later in life I turned my creative bent to the graphic design world. I went back to college and received a graphic arts degree. Soon after starting school I learned many of the same basic artistic skills I learned in photography would help me in BIG ways in the area of graphics. They are so related like kissing cousins so to speak.

 

Designing Amazing Newsletters and Magazines
Designing Amazing Newsletters and Magazines

While still in school, one of the first projects I started working on was a newsletter for a prison ministry that was called “Inside Out” and was sponsored by Central Christian Church in Mesa, Arizona.

The program I use to design the newsletter was on a program by Adobe called InDesign. Adobe is also the maker of Photoshop, Illustrator, Premier Pro and many other visual programs for professional designers and photographers.

Designing Amazing Newsletters and Magazines
Designing Amazing Newsletters and Magazines

Designing Amazing Newsletters and Magazines

.

InDesign is an amazing program that lets you design multiple page layouts that are used on books, magazines and newsletters for print but also can now be turned into a eBook.

It can be a complicated program if used to its full potential. I belong to a local InDesign user group in the Phoenix area that meets every other month to help keep professional designers up-to-date on the new features Adobe is always adding to its program.

Designing Amazing Newsletters and Magazines
Designing Amazing Newsletters and Magazines

I not only did the layout of the newsletter but I also designed its logo that sits at the top of first page but I made the graphics that you will find through out every page.

I was able to experiment with many types of font usage and “call outs” and tried to improve each issue over the years.

Our newsletter staff produced 20 issues over a 5-year period.

Designing Amazing Newsletters and Magazines
Designing Amazing Newsletters and Magazines

I do miss the editorial staff that helped me collaborate on this by-monthly project.

We did it all!

From article idea’s to the writing of these article’s to the layout and finally of the printing and mailing of the finished newsletter to individual prisoners.

Thank you to Kim, Nancy and Rosie whom made this project possible on every issue. I try and stay in touch with them on a regular basis.  

Designing Amazing Newsletters and Magazines

 Click the cover to down load a PDF of that issue of the newsletter.

Graphic Design That Grabs Your Attention

Graphic Design That Grabs Your Attention

Graphic Design That Grabs Your Attention

Graphic Design That Grabs Your Attention

 This was a three generation photo I took of me with my son and grandson.

Photographing or Designing something that grabs someone’s attention has always been and is my goal.

All the graphics on this article were also photographed by me.

I was a photographer for 40+ years but at the age of 58 I went back to school for a graphic arts degree.

I soon learned how to design and build WordPress web sites because I realized right away web sites were the best way to show off my work

 

I found I was very good at web design especially when I combined my graphic skills with web work.

Match made in heaven so to speak.

Do I only use my photography on the graphics that I make? NO!

I will many times use a photo stock agency if I need something specific either for a logo design, website layout, printed material such as a newsletter or social media graphics.

Graphic Design That Grabs Your Attention

             My son dancing at a wedding with three of his four daughters.

Graphic Design That Grabs Your Attention

My wife enjoys having time with each grandchild and getting to know them. This was a photograph I turned into a painting in Photoshop.

I found that by combining photographs or graphics with text was a very powerful tool to get a message across fast. This is graphic design that grabs your attention!

People do not read so much anymore because we are bombarded with so much information that if they can see something with text and visuals that is short, clear and concise it will hold our attention far longer and look more inviting.

A cloud formation just before a big storm in the Phoenix area taken on my iPhone.

The image on the right was a photograph I took of my grandson and his girl friend on the 4th of July.

Graphic Design That Grabs Your Attention

The graphics on this page were made for social media. Some graphics are religious in nature and some are funny and others have just a positive bent to them.

I get my inspiration not only from the Bible but also great thinkers that said amazing quotes like Mark Twain and CS Lewis. I sometimes find a photograph and look for a quote to match or I run across a quote and hunt down an image that ties it all together.

Some are fast and others are amazingly slow to design. I want the message to be just right.

Graphic Design That Grabs Your Attention

My wife with three of her granddaughters enjoying a hot afternoon in the pool.

Graphic Design That Grabs Your Attention

My son is a great and patient teacher to his son.

Graphic Design That Grabs Your Attention

My son actually took this shot of both him and his son going down the slide together. I have no idea how he took such an amazing shot while being in the image!

I will have more blog posts in the future with these short inspiration graphics so check me and my blog out again. 

Graphic Design That Grabs Your Attention

Pull Your Hair Out Issue With Adobe Illustrator

Pull Your Hair Out Issue With Adobe Illustrator

Pull your hair out issue with Adobe Illustrator

Pull your hair out issue with Adobe Illustrator

I had a BIG issue with the new Adobe Illustrator 2017 up-date that made me want to pull what little hair I have, OUT.

I build beautiful websites for people and small business.

I like to use my graphic art skills to make them beautiful so when I started to upload images for a new website for a landscape photographer that I was designing for, I ran into a problem I had not in counted before.

Even though I have also been a photographer for many years and have used Photoshop since forever, I use Illustrator to make sliders, backgrounds with text and many graphics for websites.

When you are trying to combine Photographs with text, Illustrator is just the best way to go. This is what it was built to do.

Photoshop can do it also but it is much harder. It was never really designed to use and add text in a easy efficient way.

SOOOOOoooooo…..

When I designed a slider (narrow photograph) for the top of the website that would rotate with other sliders, something strange happened.

I designed the new slider in the usual way. I then turned it into a .jpg. The image looked fine and just like what the photographer took but when I uploaded it onto the WordPress website it was super saturated like the image below.

Not at all like the original image from the photographer as you can see from the image below…

What!!

I remade it thinking I did something wrong. It came out the same way again.

Thinking it was a issue with that particular new WordPress site, I took the image and loaded it on another website. Same thing happened again.

This is crazy I though as I tried to seek out help from the WordPress community. No answers were forthcoming. I took a deep breath and began to think what was different this time around from all the hundreds of images I had designed and put onto WordPress websites before.

I decided instead of making a .jpg I would make and up-load a .png because that format works just as well on websites and the internet.

That one worked and looked great.

Then it hit me!

I had updated my Adobe CC account just a few days before. The updates were from 2015 to the new 2017. Illustrator was one of those programs that was updated.  

I then reloaded 2015 Illustrator back onto my computer and went through the whole process again. The image was created and up-loaded just as it was intended.

No super saturation.

I then contacted a Adobe tech and they had me look at the saturated image in Photoshop and see what mode it was in.

I told them it was in CYMK even though I had asked for RGB in Illustrator.

They then told me it was a known issue with Illustrator 2017 that they are fixing.

I felt good that I had figured out the issue but it took me 3 hours of frustration across a couple of different platforms.

That is why I called this blog “Pull your hair out issue with Adobe Illustrator”

Who knew!

The first river photograph to be used as a slider and saved in CYMK mode. This image is NOT what the photographer wanted. Much to saturated but the colors are also off.

The second river photograph to be used as a slider and saved in RGB mode. This image is just as the photographer wanted.

A river photograph to be used as a slider and saved in RGB mode. This image is just as the photographer wanted.

Remember:

When you are putting images on WordPress or the internet for that matter that the image needs to be in RGB. That was something I knew from my graphic arts classes but I had no idea the new Illustrator 2017 was not making it when I asked it for.

CYMK mode is for when photographs are to be printed on a printer but RGB mode is for photographs to be used on the internet.

I love building websites but you do run into issues that need to be figured out. I am also thankful that there are communities of professionals that I can use to figure out problems and see what is new in my field.

Here are four:

WordPress.org codex: https://codex.wordpress.org/

Wpbeginner: http://www.wpbeginner.com/blog/

Divi nation on Facebook: https://www.facebook.com/groups/DiviThemeUsers/

Website Magazine: http://www.websitemagazine.com/content/

I also belong to a local WordPress community in my area that I connect through my local meetup group once a month. I also go to a WordPress boot camp in the Phoenix once a year.

Pull your hair out issue with Adobe Illustrator