Friday, May 27, 2011

CSS Tip: Preloading Rollover BG Image

I encountered an issue today, I created a nav bar for a client project and used the "background-image" to change on :hover for creating a roll-over effect using CSS. But when I showed the client the page, He asked me to pre-load the hover images so that there is no interruption when the user put his mouse over the buttons. As my nav buttons are all different in size so I had to use around 5 different images for every button.

I crawled the web and found a great simple solution that I want to share. We create a div for every background image and define a class in css  to pre-load the background image and assign the property visibility: hidden; to the class so that the DIVs with the pre-loaded images will not appear on the page.

So I created five classes for five buttons and assign every class to the DIVs in my HTML Document.
.imgLoader {
    background-image:url(images/nav/home-menu_bg-over.png);
    visibility:hidden;
}
.imgLoader2 {
    background-image:url(images/nav/catering_bg-over.png);
    visibility:hidden;
}
.imgLoader3 {
    background-image:url(images/nav/bar-b-q_benefits_bg-over.png);
    visibility:hidden;
}
.imgLoader4 {
    background-image:url(images/nav/locations_bg-over.png);
    visibility:hidden;
}
.imgLoader5 {
    background-image:url(images/nav/about_bg-over.png);
    visibility:hidden;
}
 In this way, we have preloaded all the hover state images and when we set it as hover image for our links, it does not load from the start.

pretty-cool.... :)

Tuesday, May 24, 2011

Quick Tutorial: Designing A Newsletter Ad with Fireworks + Photoshop


Today's short tutorial is about designing a newsletter ad using Adobe Photoshop and Fireworks. You must have noticed in your subscribed email newsletters that some Graphic / Image Ads appear in the email embedded with the HTML Newsletter.

Category:
Designing a Graphic Newsletter Ad
Skill Level: Intermediate to Advance
Source Files: http://hotfile.com/dl/133156607/9bbf162/Design_Newsletter-PSD_PNG.zip.html
Tools: Fireworks 8, Photoshop CS2

Standard Width for Email Ads: 600 Pixels

This is an ad that I did last year for one of my clients in dubai, I am now uploading the source files as open source to be used as a learning experience.

I use a strategy that is I think of my own, as we all know that drawing in Fireworks is far easier than Photoshop, at least for me... so I have designed the basic objects and image placements of the ad in Fireworks 8 and then open the .PNG file in Photoshop and use the photoshop text tool for type, as photoshop's text/type result is very smooth and you can rasterize the text and apply filters if you can get more smoother / crisper results.

Look at the source files for further guidance. I used Myriad Pro as the main font, you can search and download from the web.

Thursday, May 19, 2011

Tutorial: Defining a site in Adobe Dreamweaver CS 5

Hi. Again this month...
I know posts have been slow for the last month, but have been very busy with a few projects. Today I am going to share a basic tutorial on how to define a New website in Dreamweaver CS5 and linking it to your local testing server and testing the pages.

Also we are going to use XAMPP as the local server in this tutorial, therefore please follow more information below regarding XAMPP, it's a great application which makes life easier on web designers who want to test their pages on local server, test simple PHP pages etc. before launching on live server. You can also use IIS built-in Windows.

Category: Adobe Dreamweaver CS5
Skill Level: Novice to Beginner
Environment: Windows, XAMPP ( or Local server like IIS /Apache)

Author: Iqtidar Ali @ Soul Designs

XAMPP:
XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use - just download, extract and start. For more information please follow this link http://www.apachefriends.org/en/xampp.html

Step 1:
Open Dreamweaver CS5 and and If you have the layout in Designer Mode, which I assume is, Click on the "Files" button to open File Management window of Dreamweaver. Alternatively you can goto " Window -> Files " or Simply press "F8" to bring up the "Files" window. See Screen 1-0

Screen 1-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 2:
Open the drop down under "Files" and click on "Manage Sites". See Screen 1-0

Step 3:
New Window of "Manage Sites" will open now, click on "New..." as you can see in Screen 3-0

Screen 3-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.
Step 4:
Now's the time to define our new site in Dreamweaver. In the new dialogue box opened We will put the name of the site, in this example I have used the name "Example Site" and we will click on the folder link to define a local folder for the site where we will store our website's files. See Screen 4-0

Screen 4-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 5:
Now we will define the testing server for this site. On the left of the dialogue box under "Site" there's another tab "Servers" click on servers tab, the new box will appear, see on the bottom left of the blank box there should be a "+" sign click on the plus-sign.

After clicking the "+" sign anothe pop-up box will opened to ask you information regarding the server. Because in this example we are using our local-computer as testing server, we will use the option "Connect using: Local/Network"

Screen 5-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Now Browse for the foloder in which your server keeps http files / htdocs / public html , In my case the server folder is located in "C:/xampp/htdocs/example_site". Now press "Save" button and for more guidance look at Screen 5-0

Step 6:
Click to check the Check-box under "Testing" to make our defined server as the testing server as well. Press "Save" to save the site settings. See Screen 6-0

Screen 6-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 7:

Create a new HTML document by Pressing "CTRL+N" or going to "File -> New". See Screen 7-0

Screen 7-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 8:
Save the document in the local site directory's root as "Index.html" or "Index.php" the one suits you better and create some Copy / Tables /DIVs etc and Save the document. Open "Files" window again and Press the "Up Arrow" which says "Put files", this will upload your local files to testing/remote server. See Screen 8-0

Screen 8-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Step 9:
Now's the time to test your website. Put the local server address in your browser's address bar and it should work fine. In my case the address is "http://localhost/example_site", hurraaah... it works.... See Screen 9-0

Screen 9-0. Click or Right-click on image for high-res shot or righ-click open in new tab to download.

Wednesday, May 18, 2011