Get the tool - Get images - Derivatives - Images Gallery - Creating header

MANIPULATING IMAGES - getting a suitable tool

A) GET THE TOOL

If you search internet Photoshop Adobe you'll be prompted of many links. Chosing http://www.adobe.com/products/photoshop.html you can download a trial version, install your software, and start your free trial.

Warning: remember that the trial duration is limited in time, then download and install only when you're ready to operate with your images. So if you can find -it's difficult - a tool that has similar features you should install an try it instead.

 

MANIPULATING IMAGES - finding - downloading - resizing - optimizing - thumbs

B) GETTING IMAGES

After that your Adobe Photoshop is installed and ready, you should just go in internet with your browser and do type one or more search keywords in the search field. If using google, for example, you can select 'image', which gives you all the available images referring to the pages found by your keywords. Or better, if you have some digital photos of yours, with a quite good quality, you can save it from your camera and use it instead.

DOWNLOAD AND RESIZING - training

Wow! There's a lot. But I would like to choose a good background for using it in my pages, and I select one free to use. Click there a thumb to select a full image that you prefer, and 'save image as' in your image's folder. The original photo hasn't a good quality but it's enough to our scope. Right click and save with name this image.


Image 1 - A view in Yellowstone park

With this technique you can search, find, dowload and resize as you need, all the images that you could need, including animations, and with their best possible weight .

MAKING THUMBS

Thumbs are resized images with minimum dimensions, like the large icons that you see in your windows explorer, such that you can put into a menu to call by a click and watch their originals. We give you an example of four thumbs. Heres is How:

here are shown results (click on images)

Sleeping Doggy, what happens? Cat and dog Runningdoggie

When could be necessary to have thumbs all with the same dimension, there' a dedicated funtion. Clicking <image> and then <image size> you can set the canvas size equal for all, with height equal to the maximum image height, an width to the maximum image width among all the images.

 

C ) DERIVATIVES - backgrounds - thumbs - images' gallery

CREATING A BACKGROUND IMAGE by the previous one.

We can use this image, as it has enough large dimensions to be used for an entire page, but you should decide now what kind of background must be. In fact I prefer always to make my backgrounds with fading images, light and soft colors. By this way one can overlay a semi-transparent image in the zones where one places text over it, making the text itself  more readable. Here is how:

  1. opening again the original in photoshop 
  2. clicking <images> then < adjustments> and then <curves>. Drag and drop a point of the curve which appears, towards left, until the image is clear enough.
  3. clicking again <images> then < exposure> and increasing 'offset' value until you thik enough.
  4. clicking <file> and then <save for web> giving another name with jpg extension and image quality 40
  5. warning: when you close the file in photoshop you'll be asked if changes must be saved. If you choose 'yes' the original image will be lost. Must chose 'no'


Image 1 - A view in Yellowstone park

This a result. Please click the image to see the backgroud full. When putting this image as a background you should put ot over a lightest blue background color. There's also the possibility to make the image borders fading, but is quite difficult, then let's supersede.

 

 

D ) CREATING AN IMAGES' GALLERY

There are many ways and shapes to create a gallery. One way is to get it in internet by people who offer javascripts to create amazing slide show. You've seen a simple one when having to chose an image for your background,

I suggest here another way without using javascript, as follows:

Number of thumbs in your menu. In this version you've to use a sequel of menus, because there are five thumbs each menu. You can connect menus giving to the arrows a link one to the other with target "_self" . To see this page click Photo Gallery sample

Another good possibility is the following, if you prefer:

Once you've prepared yours items detach E_img_menu.htm from template, save as E_img_menu1.htm and assign a lesser table width, then put all the wanted number of the images adding rows to the menu. In the mainpage of image show that you've duplicated and renamed as main_framepage_d1.htm assign the frame leftmenu property scrolling="yes"instead of "no". Click here to see how it gets out

 

 

 

E) CREATING A HEADER - strip - logo

These are quite simple things to do, if you've studied before how to download, crop and resize images. So I give you here only a suggestion suitable to a writer who wants to build his own site

CREATING YOUR OWN STRIP

 

This is a thumb 97 x 70px high, derived from libri.jpg, to be put instead of the existing image into the mainpages header, but I don't like it.
Find a more suitable image and do one better by yourself.
You should put it in the file pagprinc.css into #testata as background-image: url(../immagini/thumbs/Libri.jpg); instead of the existing background-image: url(../immagini/strisciatecno.png);

CREATING YOUR OWN LOGO

Your logo can be 700 wide x 70px high, to be set in place of the actual lino's page. If you want a personal logo you should have to: