Hashem Zahran » Design Tutorials http://hashemzahran.com Visionary Entrepreneur & Internet Evangelist Sun, 29 Apr 2012 23:47:11 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Designing for the New Fold: Web Design Post Monitorism http://hashemzahran.com/designing-for-the-new-fold-web-design-post-monitorism/?utm_source=rss&utm_medium=rss&utm_campaign=designing-for-the-new-fold-web-design-post-monitorism http://hashemzahran.com/designing-for-the-new-fold-web-design-post-monitorism/#comments Sun, 20 Mar 2011 11:15:58 +0000 Hashem http://www.hashemzahran.com/?p=1252 Designing for the ‘fold’ has long been a priority for many Web Designers, but with so many devices capable of displaying your website, how on earth do you know where it is? Should we be worried? This article asks how important the ‘fold’ actually is, the variables at play, changing browsing habits and what you can do about it. The Death of the Fold is upon us, at last!

Click here for Slide Notes & Presentation Download

]]> http://hashemzahran.com/designing-for-the-new-fold-web-design-post-monitorism/feed/ 0 Understanding Visual Hierarchy in Web Design http://hashemzahran.com/understanding-visual-hierarchy-in-web-design/?utm_source=rss&utm_medium=rss&utm_campaign=understanding-visual-hierarchy-in-web-design http://hashemzahran.com/understanding-visual-hierarchy-in-web-design/#comments Sun, 27 Feb 2011 21:44:16 +0000 Hashem http://www.hashemzahran.com/?p=1115 Visual hierarchy is one of the most important principles behind effective web design. This session will examine why developing a visual hierarchy is crucial on the web, the theory behind it, and how you can use some very basic exercises in your own designs to put these principles into practice.

Click here for Slide Notes & Presentation Download

]]> http://hashemzahran.com/understanding-visual-hierarchy-in-web-design/feed/ 0 6 free online image editors http://hashemzahran.com/6-free-online-image-editors/?utm_source=rss&utm_medium=rss&utm_campaign=6-free-online-image-editors http://hashemzahran.com/6-free-online-image-editors/#comments Wed, 28 Jul 2010 08:05:09 +0000 Hashem http://www.hashemzahran.com/?p=421 As a designer, you already know what it means to have a Mac loaded with your best image editor software Photoshop. but what if you can’t access your Mac or even you can get a Photoshop license?

There are a lot of free online image editors tools that you can use, a simple Google search will show you millions of online image editor websites, and here in this post I stumbled to give you the best editors you might use in your future projects. It’s all free doesn’t require any registration or hidden fees and all tools are open. Take a look at them and let me know what software you use.

1- Pixlr

Available at: www.pixlr.com
Pixlr is a free online photo editor. Edit, adjust and filter your images. No registration jump right in!
Pixlr

2- SplashUP

Available at: www.splashup.com
Splashup is the only full-featured, free range, image editor online. Create new images, edit existing images and manipulate layers with filters, …
SplashUP

3- SumoPaint

Available at: www.sumopaint.com
Browser based online image editor and drawing application. Community and sharing features for registered users. Requires Flash.
SumoPaint

4- Picnik

Available at: www.picnik.com
Picnik lets you edit all your photos online, from one easy place.
Picnik

5- ImageEditor.Net

Available at: www.imageeditor.net
Edit your images, pictures and photos online from your web browser with ease!
ImageEditor

6- FotoFlexer

Available at: www.fotoflexer.com
According to their website, FotoFlexer is the most powerful online photo editor in existence…
FotoFlexer

]]> http://hashemzahran.com/6-free-online-image-editors/feed/ 1 How to add custom Google Map to your site? http://hashemzahran.com/how-to-add-custom-google-map-to-your-site/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-add-custom-google-map-to-your-site http://hashemzahran.com/how-to-add-custom-google-map-to-your-site/#comments Mon, 26 Jul 2010 08:04:11 +0000 Hashem http://www.hashemzahran.com/?p=404 During my search on how to customize a Google map to be added into a project I’m working on, I came across on on a very useful tutorial on how to Google maps more customized by adding your company logo, parking lots, or even the nearest traffic directions on how to get into your location.
Adding a custom Google Map to your website make it more reliable to your visitors to get a clear overview of your business location, it’s a good thing to have specially if you offer an on-location services that requires your clients and customers to drop by your business head quarters.

Google Map Directions

In this tutorial you will have a general overview on:

  • Google Maps API
  • Getting the Coordinates
  • Adding the Map to Your Website
  • Adding Markers
  • Customizing the Markers
  • The Directions
  • Calculating the Route
  • Adding Infoboxes

Source:

]]> http://hashemzahran.com/how-to-add-custom-google-map-to-your-site/feed/ 4 10 Brilliant Web Design Tutorials http://hashemzahran.com/10-brilliant-web-design-tutorials/?utm_source=rss&utm_medium=rss&utm_campaign=10-brilliant-web-design-tutorials http://hashemzahran.com/10-brilliant-web-design-tutorials/#comments Fri, 23 Jul 2010 16:25:59 +0000 Hashem http://www.hashemzahran.com/?p=292 If you are interested in web design, This those tutorials would be useful for you. Even professional designers can use tips and tricks from other tutorials found on the internet. So in this post I’ll show you 10 briliant web design tutorials that I’ve always stumbled upon. All of the tutorials use Photoshop for the main application. By the end, you should have a pretty good idea of where and how to start designing for the Web. So enjoy and feel free to drop a comment showing any question or showcases you like.

Create a Colorful Business Web Design

Use drop-shadows and inner shadows to produce a great letterpress-type effect.

Create a Hand-Drawn-Inspired Web Design

Use a (Wacom) graphics tablet to produce a hand-drawn effect for things like the RSS icon.
Create a Hand-Drawn-Inspired Web Design

Design an Italian Restaurant Web Layout

Use Photoshop’s built-in custom shapes to add depth and interest to your design.
Design an Italian Restaurant Web Layout

Create Your Own Portfolio Web Page

Use the brush tool with custom brush packs to produce pretty swirl patterns.
Create Your Own Portfolio Web Page

Design a Colorful WordPress Theme

Use the rectangle and move tools to create a colorful background pattern.
Design a Colorful WordPress Theme

Design a Photographer’s Portfolio Layout

Use professional photo-montage techniques to produce a great header illustration.
Design a Photographer’s Portfolio Layout

Design a Unique and Grungy Web Layout

Use scans and photographs of paper and other hand-drawn elements to produce an awesome abstract theme.
Design a Unique and Grungy Web Layout

Create an Amazing Consulting Layout

Use typography to create custom shapes and objects.
Create an Amazing Consulting Layout

Create an Interior Design Web Layout

Use low opacities and strokes to add depth to your design.
Create an Interior Design Web Layout

Create a Clean and Colorful Web Layout

Use the artistic film-grain filter to produce awesome background effects.
Create a Clean and Colorful Web Layout

]]> http://hashemzahran.com/10-brilliant-web-design-tutorials/feed/ 2