Posts Tagged ‘graphic design’

Posted on February 6, 2009 - by Khaled

46 Essential FireFox Extensions Every Web Designer Should Have

FireFox is becoming more and more popular. This is  due in part to its great extensibility and easy customization. Here are 46 essential FireFox addons that I have and I think that they are really useful to help you with your daily activities related to web design, web development, graphic design, blogging and keeping yourself informed , productive and up to date. Feel free to post your own extensions that you use and love and that I missed in this list.

17 Essential Web Development & Web Design Add-ons:

1. Abduction! Enables you to capture screenshots of an entire web page or just of a part of it and saves it as an image.
2. Fire Vox Think of it as an open source screen reader that is designed especially for Firefox! Now you no longer have any excuse for not testing your site with screen readers! Probably the easiest Screen reader I’ve ever used.
3. Codetch by Zachary Carter is Dreamweaver-like text editor for firefox.
4. ColorZilla Advanced Eyedropper, ColorPicker, Page Zoomer that also enables you to work with palettes.
5. CSSViewer Very handy and light. A simple CSS property viewer.
6. Dust-Me Selectors a cool little extension that finds unused CSS selectors. Released by SitePoint.
7. FireFTP a free, secure, cross-platform FTP client for Mozilla Firefox.
8. Firebug Was initially developed by Joe Hewitt! One of my all time favorite FireFox extensions! It enables you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
9. FirePHP An extension for the Firebug add-on. It enables you to log to your Firebug Console using a simple PHP method call.
10. FireScope Another extension for Firebug. It enables Firebug with HTML and CSS refrences. This one too was released by SitePoint.com
11. FireShot An excellent and ery complete solution for Web development, maintaing blogs and much more. It creates screenshots of web pages or parts of web pages, it provides a set of editing and
annotation tools for those screenshots (insert text annotations and graphical annotations). The captures can be: uploaded to FREE public screenshot hosting, saved to disk as PNG, GIF, JPEG or BMP, printed or copied to clipboard, e-mailed or sent to configurable external editors.
12. Font Finder Get all CSS styles of selected text in Firefox  (or thunderbird).
13. MeasureIt Lets you draw out a ruler to get the pixel width or height of any element on a web page.
14. SEO Toolbar Displays ILQ and other important SEO numbers for a given web site.
15. Stylish Customize the look of the application and of websites you’re visiting with Stylish, a user styles manager. Great for testing.
16. Total Validator Web standards rule! A 5-in-1 validator that Performs multiple validations and takes screen shots in one go.
17. Web Developer Adds a menu and a toolbar with various web developer tools. An excellent replacement of Firebug although I believe you can combine the use of both of them for an optimal result.

8  Essential Bookmarking, Socializing, blogging and Micromessaging Add-ons:

18. Netvibes Adds RSS feeds to your netvibes.com account
19. Delicious Bookmarks Delicious Bookmarks is the official Firefox add-on for Delicious, the world’s leading social bookmarking service. t integrates your bookmarks and tags with Firefox and keeps them in sync for easy, convenient access.
20. Digg Toolbar lets you Digg, submit content, and keep track of Digg even when you’re
not on the Digg site itself. With a notification window built into the
toolbar, you’ll never miss a popular story or when friends Digg,
submit, or comment on stories.
21. Foxmarks Bookmark Synchronizer If you use Firefox on more than one computer, you’ll want Foxmarks.
22. StumbleUpon StumbleUpon discovers web sites based on your interests, learns what you like and brings you more.
23. Shareaholic If you use sites like Facebook, MySpace, Digg, Gmail, Twitter you’ll want Shareaholic.
24. TwitterFox TwitterFox is a Firefox extension that notifies you of your friends’ status on Twitter. You can use it to post Twitter updates and it will convert your URLs to tiny ones.
25. ScribeFire Blog Editor ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to your blog. Anfd it helped me a lot while creating this post

5 Essential Organizing and Executive Assistance Addons:

26. WebNotes a nice highlighter and sticky tool that’s still in Beta but works fantastically good! With WebNotes stop copying and pasting… Start making your notes online. For more info read this Interview with Alex King, marketing director at WebNotes.
27. ReminderFox ReminderFox displays and manages lists of date-based reminders and ToDo’s.
28. FEBE Firefox Environment Backup Extension allows you to quickly and easily backup your Firefox extensions. In fact, it goes beyond just backing up
29. Sxipper Forget your passwords! Sxipper accurately fills in forms, manages passwords and your OpenIDs. it really helps keep organized and spend a lot less time filling in forms.
30. Glue I hesitated to put glow in this category or in the preceeding one. I believe it fits perfectly in both. Glue is simply Outstanding! Alex iskold and co did amazing work for this one! I started using glue since it was called BlueOrganizer. connects you with friends around things you visit! Glue works automatically as you browse popular sites about books, music, movies, wines, restaurants, gadgets, stocks, actors, tv shows and other everyday things around the web.

3 Essential Shutterbug Addons:

31. Cooliris An outstanding extension! Cooliris transforms your browser into a visually stunning, lightning fast way to search and enjoy online photos, videos and more.
32. Fast Video Download Download video files from popular sites like YouTube, Dailymotion, Break.com and more.
33. Fotofox Drag, drop and arrange pictures adding photo titles, and create albums by multi-selecting photos, and then upload to one of a selection of online photo services – all of this without interrupting your Internet browsing. A greattime saver IMO.

6 Essential FireFox Functionalities, Appearance and Tabs Addons:

34. FaviconizeTab Let’s you just reduce the size of the tab to restrict it to just displaying the favicon! If you open many tabs like I do this will be really helpful.
35. Morning Coffee A very useful extension that keeps track of daily routine websites and opens them in tabs.
36. Personas for Firefox is a extension that adds lightweight theming to your browser. It’s an experiment in personalizing. If you are a graphic designer then this enables you to style the browser without having to code.
37. Session Manager I love this one! Saving sessions and pages is so easy! and restoring a session of 100+ after a FireFox crash shouldn’t be a problem with Session Manager. Same when you restart your computer or FireFox. It saves and restores the state of all windows – either when you want it or automatically.
38. Tab Mix Plus Tab Mix Plus enhances Firefox’s tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. I don’t use its session manager as I prefer using “Session Manager” extension -see above-
39. Undo Closed Tabs Button How many times did you accidently closed a tab you still need? Tired of going to History -> Recently Closed Tabs just to undo a closed tab? Then this extension is for you! This extension allows you to undo closed tabs via a toolbar and/or tab bar button or the right-click context menu.

7 Essential Miscellaneous Addons  :

40. GooglePreview Inserts preview images (thumbnails) and popularity ranks of web sites into the Google and Yahoo search results pages.
41. FlashGot Download all the links, movies and audio clips of a page at the maximum speed with a single click, using the most popular, lightweight and reliable external download managers.
42. Flagfox Displays a country flag depicting the location of the current website’s server and provides quick access to detailed location and webserver information.
43. FoxyTunes Music and Web/Graphic Design/Development are quite tied together in my opinion. FoxyTunes lets you control almost any media player and find lyrics, covers, videos, bios and much more with a click right from your browser.
44. Better Gmail 2 Based on GreaseMonkey, it adds useful extra features to Gmail, like hierarchical labels, macros, file attachment icons, and more.
45. Gmail Manager Allows you to manage multiple Gmail accounts and receive new mail notifications. Displays your account details including unread messages, saved drafts, spam messages, labels with new mail, space used, and new mail snippets.
46. eBay Sidebar for Firefox Keep an eye on your eBay trading wherever you are on the web when you install the eBay Companion for Firefox. It’s a free tool built with eBay users in mind that will help you get more out of your buying and selling.

I hope you enjoyed this post. Don’t forget to share using the buttons below and to subscribe via RSS or E-mail. Or just follow me on Twitter

Posted on January 29, 2009 - by Khaled

The Beauty and the Web: Thoughts about the importance of the visual aspect in Graphic and Web Design

TRUE BEAUTY!, originally uploaded by Pureen.

This was a part of a longer article but it got righteously chunked from it by the publisher to whom I submitted the paper. I chose to post it here as it contains some points that deserve to be shared, and probably discussed, with you.

Nowadays it is obvious that images are very important for humans. On the net Images and graphical interface and presentation are very important components of most of the websites.

Having a well designed site with attractive images that can express a given message will make a huge difference for your visitors and that will probably lead them to have a better opinion about your site and you. The internet is becoming more and more visual, people are making sales or hiring decisions based on the looks and how much your products (and images) can be incorporated and nice to see in their daily life.

So even if you’re a top notch programmer or developer you will need a nice usable front-end! You can have the best of the applications developed but you won’t go far if it does not look good or if it is not useable! If you can’t do it yourself seek help. Graphic designer, artists, User experience designers (UX), Human-computer interaction (HCI) guys are just there for this.

Of course there are multiple definitions and interpretations about beauty and beauty in Graphic/Web Design. But there are simple rules to always respect. For some Graphic design is a type of art while for others it is just a tool or a medium to embellish web sites, web applications, software or documents and to guide the consumer while using them.

Almost everywhere and at anytime visual images are there trying to drag our attention and to persuade us of something! Or may be to amuse and impress us! And any Graphic or artistic web designer try to communicate a message through their production and through a given style they chose.
Another important point is the choice of the right colors palette for the right production whether it is a Web site, a print document or anything else. Colors are very important as they mean something! Yes colors are significant! Just remember that even the flowers colors mean different feelings and mind-sets. The same rule applies for Web and Graphic design. Choose the right color for the right product! Do your research in this field. Don’t create dark Web sites for young teenage girls! Yet don’t create flashy pink business cards for a CEO of a big company! I know I am pushing it to the limit but this is just to caricaturize the mistakes that can be committed when it comes to choosing the right colors.

Try to always be creative and innovative and to align your elements carefully to render something that is coherent and “beautiful” to see.
Just try to put as much time on your images and graphics as you put on your copy and texts. This will have a concrete effect on the way you are perceived by your visitors and potential clients.

The above posters about graphic design are taken from Veerle’s Graphic design poster competition.
Don’t forget to subscribe via RSS or E-mail. Or just follow me on Twitter

Posted on January 20, 2009 - by Khaled

Easily Create “Obama style” graphics with Photoshop

Easily show your support! This tutorial will show you how to use Photoshop to quickly turn your photograph into a graphic that has the “Obama style”. WIth Obama the internet was used at its fullest so this tutorial seems to be something in tune with his campaign! especially that today is his inauguration day. Start with your photograph, set the mode to CMYK.

Hit ctrl+M to pop up the curves window. Set channel to black, output to 70 and input to 35.

Then go to filter > Blur > Smart Blur. Set Radius to 2, threshold to 50 and quality to high.

Revert back to RGB Mode. Go to Image > adjustments > Gradient Map. Set the first color at location 0% (blue color: #03334c ), the second color at location 25% ( red color: #d91a21), the third point of the gradient at location 60% (color: #70969e) and the last one at location 100% (color #fce3a6). and hit OK. You will obtain this:

Add some ornaments and text to customize it more.

Tweak it a bit more with Mask layers, dodge and burn tools and you’re quickly done.

This was a tutorial written on the fly for the occasion of Obama’s inauguration day! Let’s say we’re full of hope right now for the future.

Posted on January 20, 2009 - by Khaled

Create a cool frog in just 3 steps with Photoshop

Another quick photoshop tutorial…So do you remember this fella?

If you were a regular reader of this blog when it used to be called “No relation” then you will recognize this frog as it was on the header. You can download the full resolution stock photo from sxc.hu for free. I will quickly show you in 3 steps how to turn this plain ordinary frog into a cool one! Ok first of all let’s change the eyes color to something more attractive and exotic! what about pink?

Step 1 : Eyes color

Start with the selection of the eyes with the elliptical marquee tool.

Now we’re going to add a new adjustment layer to tweak the Hue/saturation of the eyes.

Set the hue/saturation to the following values:

Of course by setting the hue value differently you can have a different eyes color. Just choose what you like!

Step 2 : Body color

Ok don’t deselect just inverse the selection (ctrl+shift+I). Add a new adjustment layer of Brightness and contrast: set brightness to +30 and contrast to +25.

Now as you see the colors are a lot more lively and nicer to see!

Step 3 : Final touches

Ok use the Burn tool (brush 35px, Range: Midtones; Exposure: 30%) and darken the shadow and the lower parts of the frog. You may want to use the dodge tool to add some brightness to the eyes. The final result will look like this:

I hope you enjoyed this quick tutorial. If you need more details about the steps just let me know.

Posted on January 16, 2009 - by Khaled

Easily achieve the trendy LetterPress effect with Photoshop

In late 2008 and early 2009 LetterPress effect is becoming increasingly popular and used in many web sites. So here 2 quick examples on how you can create a realistic letterpress effect with Adobe Photoshop (Version 7 or newer). This will take you just a couple of minutes and you can achieve it even if you are a beginner.

Example 1:

Open Photoshop, create a new document (600 x 400 for instance). I started with a white background and typed the word Letterpress (Font: Century Gothic, 60pt, All caps and set the color for instance to: #00bae8).

Now we are going to add layer effects (double click the text layer) and simply check the inner Shadow box and set it to these values (shadow color: black #000000):

You will obtain this kind of effect:

As you see we’re almost there! You can customize a bit more with overlaying a gradient overlay or you can rasterize the type layer and work on it with burn/dodge tool. You can check out this tutorial to see how to use Dodge/Burn tools. You should be able to end up with a final aspect that looks like this:

I just applied a gradient overlay effect and some burning at the base of the letters.

Example 2:

Ok, let’s see another variation that might work better if you are after a metallic Letterpress effect. Create a new document, fill in the background with a light grey color (#d0d0d0 for instance). Type in LETTERPRESS (Font: Century Gothic, 60pt, All caps, Set tracking to 50 and set the color for instance to: #919191). Now we’re going to add an inner glow effect this time. Set the Inner glow values as following (color: #000000):

The noise percentage can be tweaked and set to what is best for your purpose!

Now apply an outer glow with these settings:

You should obtain something like this:

All you need now is to play with your background to make it look like brushed metal using noise filters and motion blur along with dodge/burn tools. May  be also add a gradient overlay to the text layer and you will have something that looks like this:

If you think I should put more details about the creation of this metallic background or on the last steps of this tutorials let me know!

Posted on December 18, 2008 - by Khaled

Weather & Web Design

Raindrops, originally uploaded by daruma*.

Today is a rainy cold day… The sky is dark and gloomy. As I have a big thin glass window in front of me it seemed to me as if the stormy weather colors were sneaking inside my office, and by the way this is my first winter in this office with this huge window that gave me the impression to be seating on the dark clouds…

This just happened as I was looking for some inspiration to design a new graphic theme for a joomla web site. The general topic of the site is about Nature, wild life and environment… Checking out my Gmail box themed with the “Bus Stop” design that turned into its ‘rainy’ version based on my location gave me a nice idea to design different themes for this web site that will be displayed according to the weather of the visitor’s location… I proposed this to the client via a phone call and he really liked the concept…

Funny enough, when I opened Photoshop to start a design mock up and pick up color palettes; I instinctively started with a rainy theme… It was the easiest palette to create and it probably has the nicest colors… At least that’s what the other Graphic designers of my company thought…

This is the first time I feel such a strong connection between Web Design and the elements surrounding you especially the weather. Of course I, sometimes, seek specific inspiration from different sources according to the theme or the design element I am working on including going out to some specific places or browsing some given web sites or reading/viewing some magazines, books or photo albums but it is usually necessary to take some time and think about ideas and sketch some of them on paper… So the connection is not as obvious as it was today and the creation of the mock up (which turned out to be quite nice and close to a final design) and the choice of the palette were never easier?!! Is it the window? Or is it the fact that I am producing less during the year as I am a bit more focused on tasks like Sales, marketing, Project management and human resources recruitment… I can’t really tell but I believe that today’s rainy weather was really useful to come up with this design and to discover tangibly this existing and interesting relationship between Web design and nature element like the weather… It was like a flawless process this time…

A hot cup of kopi luwak coffee is good idea for now…

Posted on March 24, 2008 - by Khaled

I am not a fan of EPS files!