Senin, 02 Februari 2009

PhotoShop Tutorial – basic technique of slicing

. Senin, 02 Februari 2009

I do believe that you have already known about software that can manage the picture called Photoshop. With Photoshop, we can create an interesting picture easily, you can also edit the original picture (e.g. Photo) into a different pictures or your favorite and interest one.

If you like a blog design or web design, you should be able to operate Photoshop. One of technique that relates a lot with blog or web design is slicing technique.

Slicing is a technique to divide or cut a picture into some parts and has different size and format. The slicing technique is often used to make the pictures not heavy when the blog is loading. Example. See the sample picture (1) below:

The sample picture above is often used as background of sidebar title. Do you know that to show the background the sample above, you don’t have to show the whole picture but only cut them into small pieces so that when the blog is loading, it will not be heavy. You only need a small picture as seen below:

The technique to show the picture is by using Code:

background:url("image_URL”) repeat-x;

Repeat-x is a technique to show the pictures repeatedly in horizontal form (x - axis). So, even though the picture is only a small piece, the picture will seem full to the sides as seen in picture one above;

The picture above is usually used as a blog or web background (in big size). In order not to make the picture burden or weigh the loading, the picture needs to be cut as the pictures below;

The technique to show the picture is by using Code:

Background: URL ("image_URL”) repeat-y;

repeat-y is a technique to show the picture repeatedly in vertical way (y-axis). Even though, the picture is only a small piece; the picture will look full vertically as see in the picture 2 above.

This post will not discuss deeper about repeat-x or repeat-y picture because it will focus on basic technique of slicing in Photoshop.

Ok, now open your Photoshop, and then make a new file.

Choose the image size 640 x 480 (sample only)

Make a new layer, click: Layer » New » Layer…

Or simply click the icon of right bottom of create New layer (usually located the screen)

Click icon off add a layer style, then choose gradient overlay…

Setting angle into 0 (zero), then click on the sample gradient picture:

Choose the yellow gradient (sample only), and then the result will look like below;

Now, we do the slicing; choose Slice Tool (space + k)

Drop into the angles of the pictures you want to cut, click and hold, then drop into the area you want to cut. Stop holding it or releasing the hold on the pictures you want. Do the same things for the other picture area you want.

Click file, then Save for Web… to save your picture.

Choose tab 4-Up and choose the image picture and the quality you want. Then Save to end it.

Well, I guest that’s all about basic technique of slicing.

It seems that making this tutorial is not easy and tiring clip_image001

0 komentar:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

Contact info submission url: site_owner: address1:pepe rt 03 trirenggo address2: city: bantul state: yogyakarta country: indonesia postal_code: 55714 phone_number: +62817277309 display_email: site_name: oookezone site_description: javanese annuity
my blog about javanese annuity and tutorial all oookezone
Namablogkamu is proudly powered by | Template by