0

I'm trying to create a composition to use as a featured image for my upcoming blog post comparing the three major Infrastructore as a Service (IaaS) cloud providers: Amazon Web Services (AWS), Google Compute Platform (GCP), and Microsoft Azure. You can see a rough draft below:

The Azure logo and pre-existing white version of the AWS logo show up fine. However, the lettering on the GCP logo SVG is transparent, and were not visible on that background. I need to turn the text white while maintaining the transparent background. I tried using the magic wand and paint bucket in Photoshop to accomplish this, but as you can see, that resulted in very rough edges.

I suspect I'll need to use Illustrator to modify the SVG, but I've never used it before, and I have no idea where to begin.

Any pointers?

Draft composition

  • 1
    I suggest you to look for basic Illustrator tutorials, that should cover your needs for this case. There are plenty all over the internet. – Luciano Jun 27 '17 at 15:05
  • I've already tried that, and I'm unable to select the text paths like every tutorial I've found says I should be able to do. – Sean W. Jun 28 '17 at 0:25
3

When I tried to open the file in Illustrator I got the following error message:

Clipping will be lost on roundtrip to tiny

I have no idea what that means but I know it means Illustrator cannot open this file properly. It seems as if the text vanishes completely...

But guess what can open this file? The free and open source Inkscape! (This sort of scenario is also known as 'Adobe Fail')

So after opening the file (without issue) in Inkscape, go to Object > Objects and tear off the panel if it's docked... This makes it easier to see what's going on.

Click on 'Google' and note which group has been highlighted in the Objects Panel (it's g4033):

Inkscape Objects Panel

Inside of that group: two more groups, inside of those groups is what we're after... These are labeled 'use4029' and 'path4025'. Activate both of these objects by clicking and Ctrl+clicking on them in the Objects Panel:

Active objects

At the bottom of the UI choose white (if that's what you want)...

Now we just need to make the text fully opaque. To do this activate object 'g4033' in the Objects Panel and then (at bottom-left of the UI) increase the opacity to 100%.

Finally just save out and you're done. Final result:

GCP Logo text in white

  • @SeanW. Not a problem... glad I could help – BANG Jun 29 '17 at 19:07
1

Photoshop Answer: If you're loading an SVG into Photoshop it's important to know that the graphic will be converted into a bitmap file (SVG's are vector files). If it's imperative that the file remain vector you will need to go to the illustrator answer.

In Photoshop I would just take the marquee tool and copy the text onto a new layer and color overlay the text with white. Then group the layers and export.

Illustrator Answer: Since you are new to Illustrator I'll try to keep this as simple as possible, fortunately this is an easy fix. Open the SVG in Illustrator and use the selection tool (keyboard shortcut = v) to draw a box around and select the text you'd like to change. The paths around the text should be visible to show it's selected. If you're unable to select the text the layer may be locked. To unlock a layer simply click the lock next to the layer in the layers panel (window>layers).

Next, with the text selected, go to the bottom left with the two color selection boxes (in Photoshop they are foreground/background but in Illustrator they are fill/stroke) and double click the fill box and change the color to white.

Hope this helps! (Illustrator is definitely worth learning if you're interested.)

  • Thanks for the advice. I'm still unable to select the text in Illustrator. The layer I need isn't locked, but it is very deeply nested. Oddly, I can select the hexagon part of the logo. Could you take a look at it? – Sean W. Jun 28 '17 at 0:27
0

A quick raster image solution would be printscreen, invert, increase contrast and then either use that as a mask or as an additive layer. Not the best way to handle vector logos, but good for mockups.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.