What is interlace options when saving PNG image in Photoshop?

What is interlace options when saving PNG image in Photoshop?

When you Saving image in Photoshop with .PNG
You might wonder what is the interlace options stand for?
The answer is in this article.


Answer:

     -Interlaced When the website is loading, Your PNG image will display blurry and sharper while loading.
     -None When the website is loading, Your PNG image will loads from top to bottom and you only see a part of the image at first.

BTW, This option is not very necessary, because today, we have Hi speed internet. Interlaced PNG or none-interlaced you might not feel difference.

Read more...

Introduction to 'Smush It' the best image optimiser from Yahoo!

If you wanna put the large image on your website(wider than 600 pixel)
like the picture below:

Click on image to view full size

Many webmaster often use function Save for Web in Adobe Photoshop. but the sharpness of the image will reduce if you use this function.

Comparison Images

If you wanna put the large image on your website with original sharpness , minimal size (for faster page load). I think 'Smush it' may be your answer.




Smush It is the image optimizer which developed by Yahoo Developer

Let's see how it works.

-Go to Smush It page (www.smushit.com) or Click Here

-Then Click at Uploader
-Browse your image and then just wait....



-Finished



-Very impressive result (24.89% reduction!)



You will love it!

---

Webmaster of Thai Othello Page

Read more...

How to Make Electric Effect by Photoshop

Last months I designed this poster for Thailand Othello Championship 2009 by Adobe Photoshop

Many peoples loved it. You may wonder how did I do this electric effect on this poster.
This tutorial will show you how to do...

Step 1: Create New file (Any dimension)in Adobe Photoshop and Press 'D' to reset the colors of foreground and background to default. (Black and White)

Step 2: Choose=> Filter and Then Render=>Clouds

You should get the results like this picture below:

Step 3: Now Click on=> Filter and Then Render=>Difference Clouds

The results:

Step 4: Press CTRL+I to invert the color

The results:

Step 5: Press CTRL+L and move the middle arrow to the right.

Step 6: Adjust the color by press CTRL+U (Don't forget to tick on Colorize), You can change to your prefer colors. (for this example, I change to Blue.)

Step 7: After you have satisfy the color of your electric effect, then Save to PSD format.
For now, You are finish creating electric effect.

Step 8: And When You wanna use it...

• Open your electric file.


• Delete Black color from your electric effect(For doing this choose=>Select=>Color Range...=>Click on Black color and Press Delete button)


• At your electric layer's Blending Mode: Choose Screen


• Drag and Drop it to the picture which you wanna put this effect on.


• Adjust it until you satisfy with the result


• Finish

---

Webmaster of Thai Othello Page

Read more...

Using Lightbox to Make Your Website More Interesting

Now a day, many new websites are using lightbox effect for doing gallery or just using on the images with in the content.
If you have no idea about what lightbox is? just click on this sample picture below...

It looks very interesting, Right? Okay, I will tell you how to do it!

Step 1. Firstly, You have to go to this website. And download lightbox.(Zip file)

http://www.huddletogether.com/projects/lightbox2/

Step 2. After you get the lightbox2.04.zip(Zip file) on your computer. Extract it!

Step 3. You will see the folder name lightbox2.04Open it and there is the index.html which has the instruction there. If you understand it clearly, No more reading here! But if you don't, You might follow my next step. :)

Step 4. For understanding how to use it. You might have to prepare 3 sample pictures(or more). And just name them as picture01.jpg, picture02.jpg, picture03.jpg

Step 5. Resize them and name them as picture01-thumbnail.jpg, picture02-thumbnail.jpg, picture03-thumbnail.jpg
Here you get 6 pics: 3 pics in the full resolution and 3 pics are the thumbnail. Put them all in the same folder. (for this example I use the folder name example-pics)
Step 6. Upload the example-pics folder to your website. I assume you upload to this location.

Root/example-pics

The picture shows how to upload the example-pics folder to your website by using filezilla

Step 7.Back to your lightbox2.04 folder , I recommend you to rename the folder name to be lightbox
Step 8.Upload thelightbox folder to your website. I assume you upload to this location.

Root/lightbox

Step 9. Okay, put this code in your template html between your <head>...</head> tag.

<link rel="stylesheet" href="Your Website URL/lightbox/css/lightbox.css" type="text/css"
media="screen" />
<script src="Your Website URL/lightbox/js/prototype.js" type="text/javascript">
</script>
<script src="Your Website URL/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript">
</script>
<script src="Your Website URL/lightbox/js/lightbox.js" type="text/javascript">
</script>

Don't forget to change Your Website URL in the code :)

Step 10. And when you want to use the lightbox just use this code

<a href="Your full resolution picture url" rel="lightbox" title="your title">
<img src="Your thumbnail location url" alt="your title" /></a>

For this example (6 pics which you prepare on Step 4-5) the code should be:

<a href="http://www.yourwebsite.com/example-pics/picture01.jpg" rel="lightbox" title="picture01">
<img src="http://www.yourwebsite.com/example-pics/picture01-thumbnail.jpg" alt="picture01" /></a>

<a href="http://www.yourwebsite.com/example-pics/picture02.jpg" rel="lightbox" title="picture02">
<img src="http://www.yourwebsite.com/example-pics/picture02-thumbnail.jpg" alt="picture02" /></a>

<a href="http://www.yourwebsite.com/example-pics/picture03.jpg" rel="lightbox" title="picture03">
<img src="http://www.yourwebsite.com/example-pics/picture03-thumbnail.jpg" alt="picture03" /></a>

Step 11.Open your page and see the lightbox sample :)

Note:

• If you have a set of related images that you would like to group, You should put [groupname] after the code rel="lightbox[groupname]". It will allow you to use arrow key on the keyboard for moving to next or previous image.
• You can apply this method with photoshop automate web photo gallery.
  

---

Webmaster of Thai Othello Page

Read more...

Making Gif Animation by Photoshop and ImageReady

There are many way to do gif animation. But I think using Photoshop and ImageReady is one of the simplest way.

Step 1. Make sure you have install Adobe Photoshop on your PC. Once you have already installed Photoshop, It will automatically install ImageReady.

Step 2. Prepare your pictures for making gif animation. I prepare this 4 pictures as show below.


Step 3. Open all the picture in Photoshop. Drag and drop it into one file. (Hold shift button and drag, It will snap to the proper position.)




Step 4. Now all the picture are in one photoshop file and they will be in the seperate layer. And click to the ImageReady button (show below), It will switch to ImageReady Program. (Before you go to imageready, You might save the file first.)



Step 5. And here you are in ImageReady program.
Open the Animation window (window=>animation).
Click on Duplicate button to copy the frame. (For me, I copy to 4 frame.)



Step 6. Frame 1. Show only picture01 and hide other layers(click on the eye on the layer. Eye=Show layer, Blank=Hide layer), Frame 2. show only picture02, Frame 3. show only picture03, Frame 4. show only picture04. (You can preview by click on play button.) Adjust the time of the frame as you prefer.




Step 7. If you finish adjusting your animation, Then click Save Optimized As. It will save to gif format.



Finish! Congratulation for you first gif animation! :)


Note

• If you understand how to do it, You might making it in photoshop layer. No need to prepare 4 picture like I did in the step 1 and 2.
• This Tips can apply for making banner and emoticon.
• For making emoticon, the appropriate pixel is 50x50 pixels.

---

Webmaster of Thai Othello Page

Read more...

Automate Web Photo Gallery in Photoshop

If you want to do the photo gallery in your website.
I introduce you to use automate gallery function in photoshop.
It is the easiest way to do, very fast and really save time!
here is how to do...


Step 1. Make sure you have install adobe photoshop on your computer. (photoshop 7 or higher is recommended)

Step 2. Preparing 2 folders.

1. 1st folder with include your images for doing photo gallery.
2. 2nd folder for saving the files which photoshop will generate web gallery.

I prepare 2 folder which name Source Image and Gallery.

Source Image folder contain the images that you want to do the gallery. Gallery folder contain nothing inside.

Step 3. Open Photoshop, Choose=>file=>Automate=>Web Photo Gallery

Step 4. Now you are in the automate web photho gallery function which has many sub-menu.

-Styles Menu: choose the style of gallery that you like ( There are many style, you can try them all later)

-Email: Insert an email or leave it blank

-Source Images

• Use: Click Browse and point to your 1st folder (my 1st folder name Source Image) and then click OK.
  

• Destination: Click Browse and point to your 2nd folder ( my 2nd folder name Gallery) and then click OK.

-Option

• General: export file setting
• Banner: You can inset your site name, contact info, photographer, date.
• Large Image: specific size and quality of large image in the gallery
• Thumbnails: specific size of thumbnails in the gallery
• Custom Colors: CSS color style of your gallery

Step 5. after you have satisfy your setting then click OK.

Step 6. Now, the gallery has created. But if you still don't like it, you can redo it all over again!

Step 7. Upload it to your website! using your favourite ftp program and then upload the 2nd folder(my 2nd folder is name Gallery) to your root.

Finish!!!

For this example, the URL to access to the gallery will be:

http://yourwebsite/Gallery/index.htm


Note:

• If you already have the folder named Gallery in your root then you might change the 2nd folder name to whatever you want. (The URL to access to the gallery will change also)
  
• You can edit the file index.htm in HTML to match your website, i.e. change header, footer.
• You can edit gallery CSS style in the file name galleryStyle.css that locate in the sub folder name images.
  
• You can see my live site photo gallery that using this method here:Example Gallery (more than 200 pictures but It takes only 30 minutes for creating :))

---

Webmaster of Thai Othello Page

Read more...

Edit GIF and PNG images

When you open the file within gif and png format in photoshop.

You will find that the layer is locked and can't open for editing.
If you get stuck with this problem. This little guide will show you how to edit them.

Step 1: Open gif or png file with adobe photoshop program.
You will see that the layer is index layer (locked).
And you can't do anything.

Step 2: To solve this problem, just go to menu Image=>Mode=>and Change from Indexed Color to RGB Color

Finish: Now, the layer is not lock anymore!!!

---

Webmaster of Thai Othello Page

Read more...