Inkscape Logo Creation Part Three

Inkscape for Daily Life.

Local Group

Part Three: Decoration

Pallete

I’m not good at color. All I can do is sharing what I know.

Inkscape has enough pallete to be used for your project. One of my favorites is material design pallete. Just click the right most pallete color, and you will see pallete choice.

I’m curious, how to get a bright color for this logo. After having some trial error with google material pallete. I finally found it in accent pallete. In this case a700.

Coloring

Let’s open our last project. Rename it from ‘logo-shape (01).svg’ to ‘logo-color (01).svg’ Then open the new ‘logo-color (01).svg’ file.

We are going to save this elliptical star logo to other place, because coloring require the path to broken apart. Create a new ‘Star’ layer inside ‘Basic Shape’ layer. Duplicate logo, and move to ‘Star’ layer.

Go to ‘Star’ layer. Click the logo object and make sure it has 100% opacity. Then go back to ‘umbrella’ layer. Hide ‘Star’ layer disability. We are still working in current ‘umbrella’ layer.

Click the logo path, change the opacity to 100%, as we don’t play with shape anymore.

Click the logo path again, and click menu (Path - Break Apart).

I colored them with: only blue from google material [a300 .. a900]. I really love the soft looks.

Remember that we need to mimic Telkom Vision Logo, and we have seven leaves, so we need seven colors. Let’s pick rainbow color that has seven colors: Red, Orange, Yellow, Green, Blue, Indigo, Violet.

Actually I decide to have a different color than rainbow. I colored them with: Red a700, Orange a700, Yellow a700, Green a700, Blue a700, Indigo a700, Violet a700.

Shadow and Glow

We are going to need a new layer called ‘Shadow and Glow’. Since the object will be under ‘Content’ layer. Let’s put the layer below ‘Content’ layer.

We need four copy our ‘Star’ layer. Each renamed to

‘Shadow Filter’ layer.
‘Glow Filter’ layer.
‘Shadow Blur’ layer.
‘Glow Blur’ layer.

All should be unlock and visibility should be disabled.

We also need to lock the ‘Umbrella’ layer.

I’m amateur here ini creating glow, so any critics is welcomed.

Shadow by Filter

Go to ‘Shadow Filter’ layer, and set show the visibility. Select logo and click menu (Filters - Shadows and Glows - Drop Shadow)

Blur Color: #00000080.
Shadow Type: Shadow Only
Blur: 10px
Horizontal Offset: 20px
Vertical Offset: 20px

Let’s set show visibility on ‘Umbrella’ layer and get the result.

Shadow by Manual Blurring

Go to ‘Shadow Blur’ layer, and set show the visibility.

There’s another method. We can create manual shadow by resize the object and blur later.

Horizontal Position: -20px
Vertical Position: -20px
Width: +40 px
Height: +40 px

From Original Size

To Modified Size

And Blur about 3% with #00000080 color and get the result.

Glow by Filter

With the same method as Shadow by Filter, but using #ffffff80 color. And put it against Gradient Background.

Glow by Blur

With the same method as Shadow by Blur, but using #ffffff80 color. And put it against Gradient Background.

Combination

Yes you can combine any method above, also playing with each object opacity.

Decorations

We are going to need a new layer called ‘Decorations’. Since the object will be on top of ‘Content’ layer. Let’s put the layer above ‘Content’ layer.

We need three copy our ‘Star’ layer. Each renamed to

‘Glossy Shine’ layer.
‘Gradient’ layer.
‘Pattern’ layer.

And also one empty layer, renamed to

‘Cool Effect’ layer.

Gradient

I know sometimes flat is boring. We need to make the logo object more realistic by adding gradient to emulate height against lightning.

Select Logo in ‘Gradient’ layer. And Click Menu (Object - Fill and Strokes). Click Radial Gradient and add five nodes. Besides RGBA, we are going to use HSLA.

This is just an example, you may play with other gradient. I maintain the middle with full transparency to conserve the color, (1) #ffffffa0 (2) #00000014 (3) #00000000 (4) #ffffff14 (5) #000000a0

Let’s set show visibility on ‘Umbrella’ layer and get the result.

Glossy Shine

This is a famous old effect in between the year 2000 and 2010.

Go to ‘Glossy Shine’ layer. And Set show visibility of this layer.

Create Ellipse from Circle in the middle of document.

Position: 50px horizontal, 200px vertical.
Size: 900px width x 600px height

Open Transform Tool

Rotate 45 Degree
Move Horizontal -200px
Move Vertical 200px

Select both Star Shape and Ellipse, and click menu (Path - Intersection).

Select the result object and click Radial Gradient. Edit Gradient and move the two nodes diagonally. From top right #ffffff00 to bottom left #ffffff40. You can also add middle node, and let’s give it almost transparent color #ffffff04.

Let’s set show visibility on ‘Umbrella’ layer and get the result.

Cool Filter Effect

This Filter would make your logo a 3D looks.

Go to ‘Umbrella’ layer. Group all Umbrella Leaves. Duplicate and move to ‘Cool Effect’ layer.

Go to ‘Cool Effect’ layer. And Set show visibility of this layer.

Select Logo in ‘Cool Effect’ layer. And Click Menu (Filters - Morphology - Cool Outside). And get the result.

Pattern

Long time ago I found this Pattern in Vectezzy

https://www.vecteezy.com/patterns/22080-crazy-circles-free-seamless-pattern

I still desire to create my own pattern. Since I don’t now the license of this pattern, I won’t include thia pattern in the SVG file. But I’ll show you how it can improve your logo.

Go to ‘Pattern’ layer. And Set show visibility of this layer. Select Logo in ‘Pattern’ layer. And Click Menu (Object - Fill and Strokes). And fill with Pattern, with 20% Opacity.

And get the result.

Of course you can experiment with hundreds of cool free pattern from the internet. Packed Circle from Inkscape also cool.

Final Result

Rainbow

Let’s Combine all your hardwork into one cool logo.

Please Click for higher resolution.

Google Material

This one using only blue from google material [a100 .. a900].

Please Click for higher resolution.

Beyond Logo

After all, there is no limit for creativity.

For final touch I did intersection from the Umbrella Path Against a Splatter Path. You must ungroup each object and union each, before you do both.

I found this Cool Splatter here. It was made by ‘Bonang Respati Satmoko’. Using GIMP and later Inkscape. Since the spallter is not mine, I can’t put it in the SVG source. I want to keep the SVG source original.

https://archive.org/details/SplatterCat

I also did (Filters - Bevels - Button).

I’m using the Rainbow Colored Logo. The background, I’m using Blue Google Material in Gradient. Duplicate it first, Rotate 90 Degree, and reduce opacity to 50%.

Please Click for higher resolution.

Evolve

Dare to Change. In previous logo, we translate the word Vision to a shape. I translate this logo to AV (Alumni Vision). But the thing is, a different requirement need different concept. For the sake of fun, let’s change the AV word to AU word (Auto Update). so let’s modify our basic shape and start over.

While conservatives logo use their name outside the logo, so the text won’t interfere the shape. Most profesional, blend their logo with their shape. As you can see in figure below, the text is inside the logo.

Less is more. Simple color has stronger impact than the colourful one.

Please Click for higher resolution.