Lately, the biggest company that suffer the most from IE 6 security breach is Google. Not only because of the recent attack in China, but also because the latest development of browsing technologies require all browsers to keep up with the standard. Obviously, IE 6 won’t make it anymore, however their predecessors can (IE 7+). That’s why they have decided to discard IE6 support to their apps beginning from Google Docs and Google Sites.

This is a big news to web designers around the world, because the biggest company in the internet history will definitely make a massive influence to all people in the world. Even though IE7 still has CSS bugs here and there, it doesn’t matter as much as IE 6. I hope that this sound reaches internet users in my country, since more than 50% of it still using IE6. The percentage is declining, but I hope this news accelerate it a little .

As I mentioned before, you can choose to take a picture from visible area or the whole website. From there, you can either Upload, Save, Email, Send to Clipboard (same as print screen), or Open in External Editor (MS Paint or Photoshop). And the most useful part is this: Edit.

FireShot also have their own Editing Windows. Saving a lot of times cropping, resizing, drawing or highlighting your snapshots without opening other image external editors. This is a good example for bloggers who wants to create tutorials from website snapshots. The result in Editing Windows can either saved in your computer or directly uploaded in FireShot’s image hosting.

The latest FireShot improvement is the ability to render FLASH animation (as you can see from my example above, the flash section in my website is captured perfectly). Before, it was only plain flash background without the captured animation.

From here you can download examples of website screen shots that I have found from my previous post.

• Download Screenshot – 1
• Download Screenshot – 2

You can find FireShot for FireFox in the FireFox addons page or click here.
Another additional information: This Plugin only applicable to Firefox in Windows…

From just one site I got this much of CSS Showcases:

• CSS Vault
• 
• CSS Beauty
• Screenfluent
• iSquare
• CSS Clip
• Web Galerie
• CSS Fill
• CSS Heaven
• CSS Thesis
• Piepmatzel
• Showcase GR
• Style Church
• Screenalicious
• CSS Elite
• Zen Garden
• Stylegala
• CSS Remix
• CSS Reboot
• CSS Tux
• CSS Mania
• CSS Import
• CSS Drive
• Unmatched Style
• CSS Bloom
• CSS Galleries
• Style The Web
• The Daily Slurp
• CSS Gallery.ro
• W3C Sites
• Standards Reboot
• Liquid Designs
• CSS Smooth Operator
• CSS Princess
• CSS Hazard
• CSS Galaxy
• CeeSes
• CSS Collection
• CSS Green
• CSS Container
• WebDigity
• Creative Pakistan
• CSS Design Yorkshire

I have subscribed each of the site’s RSS in my Firefox’s NewsFox plugins. As a result, everyday there are at least 15 new and well-designed websites to be snapped and stored as future references and inspirations. Now I must spent all the weekend to read, organize, as well as to store all those snapshots and articles.

Undergoing MyBlogLog Verification

Artzmania Magazine:

Smashing Magazine:

• 40+ Excellent Freefonts For Professional Design
• Friday Freebies: Font, Icons and Wallpapers
• WordPress Plugins & Tutorials: Your Pick
• CSS Float Theory: Things You Should Know
• The Secrets Of Grunge Design
• 35 (Really) Incredible Free Icon Sets
• Best Of February 2008

PSDTuts:

• Seriously Cool Photoshop Explosion Effect
• Valentines Day – Photoshop Style
• 3D Web Design Effect
• Quick and Effective Facial Photo Retouching

Well, here’s my review of Firefox extensions which related to web designing:

Web Developer

This is the must have tools that web designers should have. You can view a web page and edit it at the same time. It’s a very good tool to evaluate your own website, and to take a peek at other people’s work. I wanted to make a detailed review about this extension, but Six Revisions already listed their 9 Practical Ways to enhance this tool.

Fire FTP

A powerful, less bugg, FTP application. Manage your account to upload websites in simple steps. Easy to configure and use, as easy as click and drag. Linux’s site is featuring this extension in one of their post. Why bother using dedicated FTP client while you can do it from your own browser?

NewsFox

An RSS Reader inside a browser will make you spend lesser time from switching applications. I know that most of modern browser will include their own RSS Reader. Even Firefox already have LiveBookmark. However, NewsFox can manage your RSS Feeds neatly. It’s quite shame that they don’t have the search feature for those feeds. I personally subscribed 50 RSS feeds and will keep growing, because more and more well designed websites are featured each days. How to use? Simply add the feed you are going t read, check the feed, and refresh the feed so that it can retrieve updates from the site. Since I have many feeds to read every day, I often categorized all the feeds. Every Friday I look for new websites in Designsnack from their feed and use the following extension to make a snapshot:

ScreenGrab

As a designer, you can’t always rely on your own work to get inspiration. Try looking at others’ websites and see their layout combinations. Sometimes if my sense of color harmony is not right, I browse on my snapshot collections to choose on which website’s color I can follow on. You can take a snapshot of the whole site, part of the site’s frame, or only their visible portion.

A little bit off-topic, here:
This post is my first post after more than 2 weeks. Those are rough weeks as I am beginning to work at a news company (still designing website). The situation is quite hectic here. I am moving to the capital (Jakarta) with my good ol’ motorcycle in the intense raining season. It’s a though situation, but I’m manage to get used to it.

One more thing to cover, this entry was presented for Jacob Cass’ Graphic Design Writing Group Project. It’s a good start for a newbie like me to involve in design competitions (even though it was lottery based).

This is the image that I use for the print:

While this is the result, one day after I transfer the payment:

I’m a bit fan of World of Warcraft and currently playing at local Indonesian server. And I’m also a huge fan of all Blizzard’s artwork (both game and illustration).

For all the laptop skin gallery can be browsed and ordered from:
Eternity Creative Design

This week’s focus is about web design directories. It could be a directory of designer’s website or website design. Website designers from all over the world creating a lot of request from their clients in regular basis. Most of the design are just “given away” without proper acknowledgment from the public. That’s why in recent trends, web designers submit their websites to web directories to gain more network by sharing portfolios. This method would also help designers in finding inspiration from other designer’s work. In some cases, it will be the source of motivation for achieving high standard in web designs.

Web Creme

I found this directory when I was having an internship during my college times. The layout is so simple. This directory list the websites in timely basis. Each site is given a 460 x 210 pixels of website’s snapshot from an angle that captures the website’s logo. Visitors can also sort the websites directory from their color tag, representing the colors that each website’s uses. Webcreme also provides a page for their monthly archive. IMHO, the standard of this directory is quite high. With no additional advertisements other than three banners at the top and a google adsense, this directory maintains it’s simplicity and clarity of a directory.

Because of it’s simplicity, visitors can expect some light loading time and fast navigation. However, due to the simplicity of the directory database, visitors can only browse on time and color basis. Each page only consist of 10 website snapshots, which will make the older sites will get drowned every time there is new website entry. There are no comments, visitor’s feedback, or opinion regarding the webmaster’s websites of choice. Thus who need a quick browse is recommended to see this site directory.

Oriental Gallery

A brand new website design directory in 2007, oriental gallery has its own focus on website design. Like their taglines, this site list all the websites with oriental touch that you’ve never seen before and I do admit that in compare to other website design directories. I don’t know if Indonesia is included to their oriental standards because their database only includes Japan, Korea and China for this moment. The list of websites that they presented, IMO, are unique in the term of presentation. Mostly those sites are presented with creative and phenomenal flash animation. Each site is categorized by region, business type, and ratings at a scale of 5.

The sites updates on timely basis. The latest site is placed at the top of each page and consist of 6 sites per page. The snapshots are provided in two version, one snapshot consist of the website as it is visible in internet browsers, while the other consist of cropped website with 100% resolution. From this feature, visitors can be more informed in visual way. Other things that this site provides other than directory is some articles related to website design.

A little bit plus value is that visitors can give ratings with the AJAX rating system without registering to the site. This is a breakthrough in functionality however it may gives each site uncomfortable ratings for no reason. For oriental websites, this is the regional standard for website design uniqueness.

Design Snack

A comprehensive and complicated site directory system is well presented in Design Snack. This site directory system consist commenting, submitting, member registration, ratings, and categorizing. The additional points is their award and approving system. Each site is categorized based on their business type. Every submission is well tracked and approved by either member of the sites or the webmasters. Each member can give positive, negative and neutral comments which also affect the rating of the site. Any site which is stand out among others is given the opportunity to join their regular awarding system.

The site provides advertising opportunities without any requirements for relating to website design. A 60 x 60 pixels banner (or should I say icon) is one of the space they provide for advertisements.

Another trivia facts from this directory is the listing of website’s bandwidth requirements. The site categorized each entry with the hi and lo bandwidth symbol. Alerting the visitors before further browsing the site. This feature is quite useful in case that the visitor has a limited bandwidth subscription for their internet access. For most viewers in Indonesia, this is a must provided information.

This directory is recommended for heavy browsing and comprehensive listings of website design.

Starting this year I would like to make more review on great graphic design tutorials on the web. My criteria of choosing a great tutorial is simplicity, cleanliness, and well designed. I hope that by reviewing those tutorials, I can help myself on increasing the quality of my own tutorials.

This week’s review is started by Veerle‘s tutorial of Creating Simple Art Brushes in Illustrator. The tutorial is presented so well which makes me wonder when I have the time to layout my own tutorials to become as good as that. This tutorial explains about the function of Arc tool in Adobe Illustrator for making simple art brushes. Frankly speaking, I didn’t know the function of Arc tool before reading this tutorial. It took me for about 5 minutes to master it. It’s time to experiment my good ol’ Illustrator.

Still related to graphic design, which is Website Design. The Go Mediazine releases one of the series of creating a Killer Band Website Design Layout with Drupal CMS. In their previous news, Go Mediazine already mentioned that they will release a series of tutorial for Web Design Layout with Drupal. This tutorial is presented by Sean Hodge of aiburn.com and Connection Cube. He serve as a guest author for Go Mediazine, especially for this tutorial. The tutorial explains about creating layout with Slice tool in Adobe Photoshop. The layout involves:

• Setting up workspace for website layout
• Creating an outstanding Go Media’s Arsenal vector banner
• Creating button effect for navigation bar
• Creating textures for background

The tutorial is quite simple. For a beginner like me, an hour is the most I can do to master it. I also looking forward for the next series.

One of PSDTUTS author has released a tutorial for creating another alternative for Gold Text effect in photoshop. Yes, another alternative, I said. Because there are zillions of tutorials with the same title, but all of them are done in different ways. I found this tutorial as simple, quick, clean, and elegant. The tutorial is presented by Fabio, one of PSDTUTS contributors. This tutorial only involves filter effect and blending options. I’m not going to say it here because it is so simple, please go to the tutorial page in PSDTUTS instead. I’m a fellow subscriber of PSDTUTS. Almost everyday they post new, clean, and well presented tutorial. One of my favorite is creating spectacular flaming-text-like-a-meteor tutorial.

The first edition of Drexter Magazine is out and can be downloaded at drextermagz.wordpress.com. I just grab myself the first edition at first thing in the morning from Design Diary‘s RSS subscription. This might be another design source or inspiration for all fellow designers.

This is my first Photoshop tutorial since 2008. In previous year I have a list of web resource for free brushes but didn’t mention on how to use it. This quick guide will explain how Brush Tool were used worldwide.

If I can make a free definition of Brush tool, Brush tool is a set of defined bitmap shapes which can be used as a tip of a real brush. In other words, you can customized the shape of your brush tip to begin painting.

Brush Tool can be either created or imported. Lots of designers make their own brushes to stand out among others. Most of it were distributed freely. I don’t exactly know when it was distributed as free stuff but since Adobe shared it for free, there is no copyright issue regarding brush sets. If somebody distribute a brush to ask for payment, you’ve been tricked!

Tool Overview:

This is the preview of a Brush Tool. In default Keyboard Shortcut, you can activate it by pressing B key.

This is the preview of Brush Tool Options.

The Brush Option will be activated if you are using Brush Tool. The picture above shows the content of Brush Option. You can accessed it via triangle button beside the word “Brush:”. Or you can accessed the Preset Manager from Edit » Preset Manager… » Preset Type » Brush.

To use the Brush Tool, simply click on one of the Brush Shapes in the Brush Option. The thumbnail image is showing the brush tip shape and it’s size in pixels. The size were default size, meaning it is the original size of a brush. You can still increase the master diameter, however it will reduce the quality of the brush.

Well, I’m not going to teach you how to drag, you can RTFM by yourself. One fundamental thing that you should know is Brush Tool can only be used in bitmap based or rasterized layer, it can’t be applied in vector shape layers.

To import Brush from other sources.

You can download free brush source at different shape and size. Most designer make their own brush in high-resolution to preserve quality. You can accessed it through this article. The file will be at the type of .abr or .zip package. Mostly they were zipped to include text document which consist of the creator’s signature. You must unzipped the package and bring the .abr file into this directory:
...\YourAdobePhotoshopDirectory\Presets\Brushes\

If you already open Adobe Photoshop application, you’ll need to restart the application to see the change in the brush preset.

The other way to import new brush is through Preset Manager. Click the Load and find your .abr file to import the brush into Preset Manager.

Modify Brush Tool Using Brush Palette:

You can modify the Brush Tip Shape inside Brush Palette. To access Brush Palette, go to Window » Brush. Therefore, you can edit the tip shape and modified it as you like. Here is the guide:

1. Pick the Brush Tip Shape that you wanted to modify in the Brush Tip Shape menu
2. Pick the modify options (Shape Dynamics, Scattering, Texture, etc…) one by one and see the change they made
3. If the shape seems didn’t have any effect at all, you should try using the brush into your document to see the change they made
4. Try to be more creative and use different combination of options

These are the Keyboard Shortcut while working with Brush Tool:
“<" & ">” to toggle between brush tip shape
“[" & "]“ to increase and decrease brush tip shape

Hope you enjoy it.