Need help laying gradient over selection

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

GIMP Version: 2.8.16
Operating System: Windows
GIMP Experience: New User

Hi folks! Am new to the forum and to gimp, tho' I have done a bit of work in photoshop. I've been trying to do something that seems like it ought to be easy... make a TV channel logo icon like this one:

I've made ones with more of a 3d effect in photoshop like this one I just made:

But I need to replicate the 1st one above. It looks much simpler, as it seems to just have a gradient laid over a selection as I did with photoshop above. But I can't make any selection with the wide curve at the bottom, and the rounded corners at the top corners. I'd like the sharply defined edges around the gradient. Mine are too soft. Would anyone here know how I might achieve this in gimp?

Thanks kindly

Dalia · **Joined:** Dec 10, 2013 **Posts:** 1004

Would this work? If so, I'll write something up.

Dalia · **Joined:** Dec 10, 2013 **Posts:** 1004

I've attached a quick pdf file if you can use it.

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

Dalia wrote:

Would this work? If so, I'll write something up.

Wow... yes Sorry... I got lost in photoshop

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

Dalia wrote:

I've attached a quick pdf file if you can use it.

Yes... I see it. I'll check it out.

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

Walked through the instructions in your pdf just fine. Had to lookup where alpha to selection was quickly on Google. But it all went exceptionally smoothly.

Thanks so very much Dalia

Now it's off to make a few of these channel logos correctly.

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

Stumbled over this when I tried adding lettering by pasting fuzzy selected text from my previous logo into what I'd made from scratch up to the point of applying a gradient.

Will see if I can figure out how to overlay a transparent gradient.

2-ton · **Posted:** Thu May 19, 2016 8:37 pm **(#8)**

your gradient layer needs to be between the background and the text layers.

Dalia · **Joined:** Dec 10, 2013 **Posts:** 1004

You're there....all you need to do is lower the opacity of the gradient layer.

Dalia · **Joined:** Dec 10, 2013 **Posts:** 1004

2-ton is correct. This is how it would look with the gradient between text and background.

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

What a terrific forum and group of people here. Putting the gradient layer underneath the text pasted from a selection from the original got me to this:

I did have to fiddle with the layer scaling and where to start and stop mouse motion for the gradient for quite a while until I was satisfied. And I wish I could figure out a universal method of setting guides to a coordinate where I could start the ellipse selection to minimize how many tries it takes to get the results I'm looking for. But I guess that's just a matter of doing this enough times, and establishing a feel for the process.

This pretty matches the example I was trying to replicate. Now I'll have to sit back and contemplate whether or not to try giving the button a more 3D effect like i'd been doing with Inner Glow in Photoshop.

Thanks 2-ton & Dalia

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

Well that was easy. I like it!

Dalia · **Joined:** Dec 10, 2013 **Posts:** 1004

I like it too! Great job tchiqwik. :clap

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

Hey Dalia. It looks really great as I posted it above. But when I scaled it down and placed it inside an app skin I've been working on, it lost the crispness of the borders of the image. And though the 3D effect that blended the white and blue on the outer edge of the gradient layer looked good originally, when the image is scaled down it looks more fuzzy than crisp too. Here's a comparison.

What do you think??

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

Thought it might look better if was able to use a lighter background. But here the 3D inner glow also fattens the borders. It looks better to my eyes like this without it.

Maybe I need to step away for a while and revisit this after a break.

.

Dalia · **Joined:** Dec 10, 2013 **Posts:** 1004

I wish I could help you out here. I know there are pros on this board that might have an answer for you... Having said that - this amateur can only come up with (1) Because the background is dark, perhaps a slight shadow with the opacity at 100 will enhance the bevel effect and (2) What if you worked the original to the scale you ultimately want it to be?

I took the liberty of copying your example and duplicated it to work on the beveled one only - I went to Filters > Enhance > Sharpen. Then Filters > Light and Shadow > Drop Shadow and gave it the following values > Offset X and Y "-1" Blur 15 Opacity 100.

Here they are - your original and the one I played with:

Calling all pros... :oops:

tchiqwik · **Joined:** May 19, 2016 **Posts:** 19

That does make the lettering pop a bit better Dalia. I will want to use that. Whether or not to go with the 3D effect where the outlines are a bit fuzzier, or the flatter version with crisper edges seems just an artistic call I'll have to make. And I'm leaning to the 3D version. What I ended up in the 3D effect looks odd when I sit it next to all the these other 'stock' flat looking channel logo icons. But I think a number of icons with this 3D effect will look much better together as a group. And I've been forgetting that these are going to be used as buttons to activate a menu. And with that in mind having that 3D look makes sense.

Heh... am reasoning all this out as I write

Edit: Oh! And you're very right about the fact I should be designing these in the size that they're intended to be displayed.

steven8 · **Joined:** Jul 04, 2015 **Posts:** 256

I can't believe it. I finally followed a tutorial and it worked! Thank you, Dalia...well written!

Wallace · **Posted:** Sat May 21, 2016 6:37 am **(#19)**

tchiqwik wrote:

Hey Dalia. It looks really great as I posted it above. But when I scaled it down and placed it inside an app skin I've been working on, it lost the crispness of the borders of the image. And though the 3D effect that blended the white and blue on the outer edge of the gradient layer looked good originally, when the image is scaled down it looks more fuzzy than crisp too. Here's a comparison.

Image
What do you think??

You will always loose image quality whenever you scale raster images.
The amount of scaling is also a factor,
when it comes to image quality loss.
Knowing the exact size required and saving the image as a PNG.
Should help to keep the quality of the image intact/undamaged.

Below is a suggested process,
which I sometimes employ.
To help images such as yours look crisp and or clean.

Note:This process doesn't include scaling of the image.

Your specific image has white anomalies around it's outer edge.
This could be removed.

View of image,
with anomalies removed.

Creating a Darker outer edge,
can help to make the image look much nicer.
Once the outer edge has it's anomalies removed.
You can then create a darker outer edge.

Alpha to Selection you image.

Create a path form this selection.

Stroke the path,
to create the dark outer edge.

Use optional Drop-Shadow.

My final results...

Attachment:

4969_cbsn-test-2-PS-IG-sm wallace.png [ 46.19 KiB | Viewed 1646 times ]

Dalia · **Joined:** Dec 10, 2013 **Posts:** 1004

Now that's a tutorial by a pro. Wallace I hope you don't mind - I created a pdf - lots of great information.