Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I am just interested to know how was the Flash logo shown bellow designed? How can something similar can be created using GIMP? sorry I can't afford Photoshop.

Adobe Flash icon/logo

[edit] In addition to GIMP, is it possible to do this in CSS?

share|improve this question
2  
For the CSS part: Inner text shadow is tricky. Otherwise I think it is quite achievable. –  koiyu Mar 1 '11 at 12:00
    
If you want to add a bit more wow (... I can't believe I just said that???), I'd recommend using a barely noticeable texture inside the "Fl". –  muntoo Mar 6 '11 at 1:45

2 Answers 2

Here's my attempt at creating this using CSS. The main idea here is to use both CSS3 multiple backgrounds and gradients to create the effect - a radial transparent to semi-transparent black gradient layered over a bright pink to dark red linear gradient.

Attempt at recreating Flash CS4 logo with CSS

The glaring omission is the lack of inset text shadow, which is CSS does not, and will probably not have in the near future.

Have a look at the live demo: http://jsfiddle.net/qrhSD/2/ (Mozilla only, though you can quite easily convert the rules to work for Webkit browsers too)

share|improve this answer
    
+1. Awesome effort.See Koiyu's comment about the shadow. –  Johannes Mar 2 '11 at 1:48
    
@Johannes Doesn't help, as I said it's impossible. –  Yi Jiang Mar 2 '11 at 10:20

Subtle radial gradient for the background. It has a constant hue. The saturation varies because they wanted a soft, plastic effect.

The "hole" effect is made via a Photoshop feature called layer styles. It's easy in Photoshop but GIMP doesn't have layer styles so I think there's no easy way there.

Since this particular logo is simple, you can just look at the basic graphic elements and duplicate them by hand in GIMP. For example:

  1. About three small dark gradients for the shadows.
  2. A copy of the hole-mask, shifted 1px downwards and made to additively blend with the background, producing the highlight effect before the mask is applied to make the hole

And so on.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.