Posted on by Michel · 3 Comments

Fireworks Grunge Styles 1.0

Today I am happy to announce for download the following Fireworks styles, by Fireworks guru Mikko Vartio:

(You can find Mikko in Twitter and Flickr, where he often posts about Adobe Fireworks.)

The styles are called Fireworks Grunge Styles, version 1.0.

They are absolutely free — but if you mention their author, Mikko, in a project where you plan to use them, this will be greatly appreciated! ;-)

Fireworks Grunge Styles (screenshot)
[downloaded over 300 times between Nov 14, 2009 and Dec 30, 2010!]

Description from the Author

  • The styles are based on Advanced Stroke settings and Alpha channel.
  • The grunge comes from custom white stroke and with Filters/Convert To Alpha, the stroke is “removed”.
  • Each style is coloured with Filters/Hue/Saturation settings, so color can be adjusted with adjusting the Hue value (see “Filters” section in the Property Inspector).

Installation & Use

Simply copy the file “Grunge Styles.stl” (found in the ZIP archive) to the Adobe Fireworks “Styles” folder and restart Fireworks.

1) Example location of the folder on Windows XP, for Fireworks CS4:
C:\Documents and Settings\USERNAME\Application Data\Adobe\Fireworks CS4\Styles\

2) Example location of the folder on Windows Vista, for Fireworks CS4:
C:\Users\USERNAME\AppData\Adobe\Fireworks CS4\Styles\

(For Windows 7 and MacOS X, please, refer to Adobe Fireworks Help, for the exact location of the “Styles” folder!)

That’s it! :-)

After you have copied the styles to the Fireworks “Styles” folder, and restarted Fireworks, you can can select “Grunge Styles” from the dropdown list in the “Styles” panel [screenshot], then select an object on the canvas, and apply any of the styles to it. They can be also edited easily (color, for example), so feel free to experiment!

Of course, you can also load the styles without first copying them: Open the “Styles” panel in Fireworks, then select “Load Style” from the panel menu [screenshot], and load them! (But personally, I prefer the other method.)

Download

[ Download Fireworks Grunge Styles 1.0 ]

Enjoy! :)

[ short URL: http://optimiced.com/en/?p=644 ]

Posted on by Michel · 1 Comment

Michael Jackson: “This Is It” (the movie, imdb #tt1477715)

On Thursday, me, Ani & Nixo went to see a movie. This happens rarely for me, but it was worth it, especially this time!

Michael Jacskon, This Is It (movie poster)

“This Is It“, dedicated to the memory of Michael Jackson, and starring Michael Jackson.

(official trailer @ youtube, available also in HD)

In the movie, I saw the work of an amazing musician “behind the scenes”, in rehearsals, in life! I saw Michael Jackson (almost) without make-up and sometimes… even without his sunglasses! :)

Most of the footage shows the preparation for the concerts in London, where Michael Jackson and his group of musicians and dancers had a planned series of 50 shows at the 02 Arena.

Unfortunately, Michael died (or was killed?) just before the tour has begun… This was really it, “This Is It” — his last tour that did not happen… :-(

Before I went to see this movie, I was a bit afraid that I may be disappointed. I was afraid to see a former star, supported on the stage so that he won’t fall down? I was afraid to see Michael Jackson that doesn’t sing and doesn’t dance?

Well, I wasn’t right!

Michael was singing, dancing and was giving everything out of himself at the rehearsals! You will really see it like you never did before, if you go to see this movie!

These would have been the best, the most original shows in his career — if they did happen, of course…

If you like Michael Jackson and appreciate his creative work — go to see this movie on a big screen (the quality of the sound is important, too)!

And if you don’t like Michael Jackson, but you love beautiful music and beautiful dance — go to see this movie on a big screen, you won’t regret it, too! Buy tickets for “This Is It”, and you will see a real genius at work! You will see and hear real music! You will also see a lot of funny moments during the rehearsals — you will see how an amazing gang of musicians and dancers work together with an even more amazing guy — who is no more, unfortunately…

* * *

An unknown for me commenter said the following words at imdb.com, after watching the movie:

Title: Genius?
Date: 29 October 2009
Rating: 10/10
Author: shakazulubb, from Germany

This was a clear view into the integral preparation of a concert by a complete genius. I was never a Michael Jackson fan, however, my wife was and since she was desperate to see the film I decided to accompany her. I was astounded. I could not believe this man in the film was the same person that is was always hounded by the press and made to look like the devil. He was by no means weird, ill health, or a drug user. If he was, he masked it very well.

The film shows us what we are missing as far as the concert goes and what a pity, it would have been amazing! He seemed at ease, and so happy and normal while on stage, as if it was built to be his. You would never believe this was the ”freak” that the world perceived him to be. Shame on those people. Genius at work, a perfectionist down the smallest detail and I think the film has captured this very well. What I liked a lot was the fact that the film was not concentrating on his death and tragedy, but solely on his concert, his music, and his geniality and it was a fitting tribute to one of the greatest musicians of our times. So I would urge anyone who has had any miss conceptions about the man to go see this, you like me will more than likely change your views on the man.

RIP, Michael!

— A very good and exact comment!

In “This Is It” I saw a happy person who was dreaming of music, and dreaming to be there again — on the stage, to sing and dance for all of us!

A lot of people paid tribute to him and his music, when he left this earth, earlier this year… But Michael is not here anymore… And there will be no concerts in London, not this year nor the next — no concerts, ever. Only some recordings are left, some raw footage from the rehearsals…

* * *

I can’t find the right words, sorry. So, just go and spend some money to see the movie. This will be money well invested, I promise.

Posted on by Michel

A better, more accessible CSS way to hide outline from links

When starting a new project, I do not use global CSS resets — like Eric Meyer’s excellent CSS reset. That’s why, I rarely have problems with removed outlines from links.

As you probably know, users which do not use a mouse but navigate webpages with keyboard only, need to see outlines on links when they tab through them. This helps them visually understand which link they will activate.

A fairly new trend is to remove (suppress) this dotted outline on links to make pages look “nicer” to the eye. While design may look “nicer” and more “Web 2.0” to some, when this outline is removed, the accessibility aspect of this remains, and it is very serious.

But Roger Johansson suggested a much better approach: remove links from :active state only!

This is the article that he recommends to all Web developers:

Better CSS outline suppression

Basically, what happens:

You remove the dotted outline from links which are only clicked with the mouse, while keyboard users will see the outline normally!

How? Just use this bit of code, and that’s it:

a:active {outline:none;}

Excellent tip!

I promise to myself that if I will ever try to remove the outline from links, I will do it in this, much more accessible way! :-)

Posted on by Michel

Fiesta (Jacques Prévert)

Et les verres étaient vides
Et la bouteille brisée
Et le lit était grand ouvert
Et la porte fermée
Et toutes les étoiles de verre
Du bonheur et de la beauté
Resplendissaient dans la poussière
De la chambre mal balayée
Et j’étais ivre mort
Et j’étais feu de joie
Et toi ivre vivante
Toute nue dans mes bras.

« Fiesta »
Jacques Prévert

Posted on by Michel

Anonymous Pro – an interesting font for coders

If you write code (HTML, XHTML, CSS, JS, PHP, etc.), then the Anonymous Pro monospaced font may be of some interest to you. It’s intended for coders and developers/designers (the 0, of course, is crossed;-) and it includes Cyrillic characters.

Anonymous Pro font

You can download it for free from here:

www.ms-studio.com/FontSales/anonymouspro.html

But my personal preference for a monospaced font is Consolas. As far as I know, this new font by Microsoft can be downloaded for free, too; Consolas is readable and suitable for all kinds of code — in my case, I most often see XHTML and CSS code blocks in it:)

Posted on by Michel · 1 Comment

“Jeffrey Zeldman is now following you on Twitter”

…or how Twitter can be actually of some use;-)

{ Some drafts in my blog were hidden really deep, so… ;-) }

{ This story developed somewhere in July 2009… }

Twitter is an amazing… media? Social network? Means for ultra-fast transfer of news, wisdom, stupid things and “important” things like “I am drinking coffee now”? Something like IRC, but with an option for SMS, filtering, search, etc.?

Twitter is all of this simultaneously! :-)

Jeffrey Zeldman's hat…I am a Web designer and (partially) a geek, so it was very interesting for me to follow the discussion in two of the latest publications of Jeffrey Zeldman:

www.zeldman.com/2009/07/02/xhtml-wtf/
www.zeldman.com/2009/07/07/in-defense-of-web-developers/

…where the consequences of discontinuing the work on the XHTML 2 standard, and what will happen with XHTML 1.0, HTML 4.01, as well as with the new HTML 5, were passionately discussed.

At some point, in the Zeldman’s website, a strange bug appeared (in Firefox 3/Win): somewhere around 3/4 of the page with his last post and the numerous comments below, the content suddenly was disappearing (screenshot). Without a reason. The page itself was validating perfectly and there were no problems with the encoding or the HTML/CSS code.

Jeffrey noticed the problem, too, and was trying to solve it for quite a long time. The assumption that a problematic pingback with UTF-16 encoding was the culprit, was not confirmed.

I tried to investigate, too, out of curiosity, without any positive results, though.

Finally, I assumed that there’s a CSS bug in the rendering engine of Firefox/Win which (maybe) can be fixed with some new CSS rule. One of the readers of Zeldman’s blog mentioned that he tried to check something with Firebug, so I quickly made a test page + CSS file with the rule which (supposedly) was fixing this issue; then I tested in Firefox 3.0.11/WinXP. The problem was gone! :-)

Only one line fixed the problem for Firefox:

div#wrapper {
overflow: visible;
}

Then I’ve spent some more time to test in detail if the change did not affect any other popular browser (Opera 9.6, Safari 4, Chrome 2, IE7, IE6) and finally, I wrote to Zeldman, proposing him the fix for Firefox.

Zeldman replied:

@optimiced Will try as soon as I’m back on my feet. Thanks wise one.

Soon after that, Zeldman implemented the fix, and the design was fixed! :-)

Unfortunately, the fix introduced a new bug — the background of the page was “flashing” for a second or two on each page load because overflow: visible caused the background of the element #wrapper to load with a little delay (before: overflow: auto).

Well, after some more thought invested, I and another reader suggested two additional simple CSS solutions, which at a later stage proved to play very well together and fixed the “flashing problem” in all browsers — Firefox and Safari included! :-)

Last (but not least), I would like to say that Jeffrey Zeldman is a cool dude! After the whole story with the CSS bugs in Firefox and the red background flash was over, Jeffrey thanked me personally and added me to his Twitter list, and then promised to send me the new (third) edition of his popular book about Web Standards, as a present! (I think that somewhere in the CSS on zeldman.com there are some more acknowledgments hidden;-)

It’s always nice to communicate with such people, even if with messages only 140 characters long! ;-)

So, I am pleased to say, too: “Jeffrey, thank you!” :-)

* * *

Ah, and finally, why did I start this blog post with the question, what exactly is Twitter?

Because, after using Twitter for at least a few years, I can say that Twitter allows quick, precise communication in a new way. Comments in blogs, feedback forms, emails, allow us to communicate, too, but Twitter is something different. Something, which I cannot define precisely, but something, which fulfills its purpose and is also fun!

This is why you can (still) find me on Twitter (but you won’t probably find me on Facebook)… and, you can find me on my personal blog, of course! ;-p

Posted on by Michel · 2 Comments

Why Fireworks?*

Sometimes I hear “Adobe Fireworks? What it is for?” or “Why should I use Fireworks, if I use Photoshop/Illustrator?”.

Instead of answering that question, I’d like to show you the following illustration:

Mercedes SLA, drawn in Adobe Fireworks
— this vector illustration was created with Fireworks in 2005, by Fred Michel (unfortunately, I couldn’t find more information about its author) [download PNG editable file].

Or:

A compass, by David Hogue
— this illustration is by David Hogue, it was created a couple of days ago as a try to use similar technique as in an Illustrator tutorial [download PNG editable file].

Not bad results, eh? Especially for a program that is looked upon (by some) as an inferior alternative to Ai/Ps;-)

With Fireworks you can create some magical things or simple color effects. This is the ideal program for graphics for Web/screen — it combines the best of the bitmap and vector world. Fireworks is easier to use than Illustrator, it is even more easier than Photoshop. No, it is not free, but it is not expensive, either (it’s approximately 3 times less expensive than Photoshop, if I must be exact).

Some prefer GIMP. Others — Inkscape. Some creative professionals use only Illustrator and Photoshop. I remain a true fan of Fireworks and I would be happy, if Adobe will continue with its successful development…

My personal opinion is that for Web graphics and all graphic design tasks intended for use on screen (RGB/RGBa), Fireworks is the perfect tool! :-)

UPDATE (2009/Sep/23):

Illustration by Ryan Hicks, drawn in Fireworks
— I also forgot to show this excellent illustration by Ryan Hicks [download PNG editable file] (thanks, Jim!:-).
________________________
*Why Fireworks?
— a popular article by designer Stéphane Bergeron, published in Adobe Devnet.