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.
[edit] In addition to GIMP, is it possible to do this in CSS?
2
-
2For the CSS part: Inner text shadow is tricky. Otherwise I think it is quite achievable. – Jari Keinänen 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". – Mateen Ulhaq Mar 6 '11 at 1:45
Add a comment
|
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.
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)
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:
- About three small dark gradients for the shadows.
- 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.
