changing size, add a picture
| Images Main page | How To! Main page | other Exercises |
Read these pages through first before attempting the exercises
|Changing a frame or button size|
Once bitmap image objects like the free samples are created, the best way to adjust their size is to use the cut and paste options. This will maintain pixel integrity whereas resizing will incorporate interpolation that will antialias and soften the image. However most cut and paste operations of this nature can be performed with simple mouse and key combinations instead of menu choices.
Start your painting program and 'open' the required image that you have saved from the sample pages. These images are all .GIF files with a low number of colours. There is no need to change the mode to RGB unless adding another image and we will do that in the next section.
Using the Rectangular Selection Tool make a full width selection as shown below. Check that there is no Feathering or Antialiasing selected in the Tool Option box. All we need to do is cut and move this selection area, with its contents, upwards to the desired new frame height.
For Photoshop, hold down the Control or Option (Mac) key plus the Shift key (combination for cut and move vertically or horizontally) and mouse drag the selection upwards. For Paint Shop Pro, Left Mouse button down and drag (there is no locking I am aware of in PSP). The result is shown below on the right. REPEAT this for reducing the frames width only this time select an area at the side and move it to the left.
Once you have achieved the first steps the frame size will have changed similar to the result below (without the dotted line). If you have big problems and need to start again, both programs have a "REVERT" option in the "File" menu. Use this to reload the image in the "saved" state.
If you are NOT going to try placing another image into the new frame choose the Magic Wand Tool, check that Feathering or Antialiasing is set to 0 or Off and the Tolerance is set to 0, plus for PSPro, Match Mode equals RGB - Tool Options.
Click in the area that needs to be trimmed off (there is a sample pic at the bottom of the next section). Once selected, choose "Invert" from the Selections Menu. The selected area will be reversed, go to the Image Menu and choose "Crop"..... Bingo - all done.
Finally save the image with the SAVE AS option in the File Menu and give the file a different name as the original, but still with a .gif extension, so the original can be used again.
If you ARE going to try placing another image into the new frame choose the Magic Wand, check that Feathering or Antialiasing is set to 0 or Off and the Tolerance is set to 0, plus for PSPro, Match Mode equals RGB - Tool Options. Click in the centre area of the image as shown on the left.
prepare the image for the inclusion of another picture.
Save the image with the SAVE AS option in the File Menu
and give the file a different name as the original, but
still with a .gif extension, so the
original can be used again.
With one or two further practice runs you should have a go at using the same methods on one of the buttons which are a little more difficult. Vertically you would mouse drag "cut and paste" just one pixel at a time making sure that no sudden changes are detectable in the simple 3D appearance while lengthwise the task would be as simple as the frame above.
When ready, try it on one of the rectangular buttons. The curved end buttons would be the most difficult. If a simple Resize/Resample option was used to change the image size instead of the method covered here, the edges would be softened (antialiased) requiring more complex additions of the required background colour underlying the button. This is an important issue when creating transparent areas around your .GIF images.
the image bigger
use the 'Canvas Size' option in the Image Menu and add
enough pixels both horizontally and vertically to cover
the new required size. Secondly, for Photoshop use the Control (Option)
plus the Shift keys as above PLUS the Alt (Command) key
to "Copy and Paste" rather than Cut. For
PSPro choose 'Float' from
the Selections Menu and then move the floating image.
|Adding a picture to a frame|
Here is the final result we are after although I suspect you have another picture in mind besides one of my daughter Cristi. Open your new picture in your painting program along with the desired frame. If you are resizing the frame then it should already be there after the resizing steps above. There are explanations and comments below so be patient and learn some of the technical reasons for doing things a certain way right from the start.
is plenty to learn here, things that the experienced take
not try to mix palettes downwards!
Now the fun bit if you have not done it before. Unless you are born lucky, the new picture will be too big or too small. If it is quite a lot smaller than the area selected in the frame, get another picture as the image will be ugly and pixelised when enlarged. BUT WAIT! are both images, the frame and the new picture, the same resolution?
With both images now displayed at the same 1:1 window resolution you can see exactly how they compare in size. Sometimes only a portion of an image will display when viewed at 1:1 but do not worry as nothing is lost. In this case select the Hand Tool and mouse drag (pan) the image within the window to view what you can not see.
Getting this info is not as easy in PSPro. Choose 'Copy' from the Edit Menu, then choose 'Paste - as new image' also from the Edit Menu. Place the cursor over this temporary image and the size will be displayed at the bottom right hand corner of the program window. This is the same size of the selection area made with the Magic Wand AND the size that your other picture has to be reduced to - make a note of the width and height for the next step. Delete the temporary cut and paste image you just made from the selection.
Also for PSPro when viewing the frame image, choose 'Save' from the Selections Menu. Find and remember a folder for the file, name it and save. This copies the Magic Wand selection shape for later use, something you can do with Photoshop but will not have to.
(remember the 'Edit - Undo' or 'File - Revert' options for when things go really wrong)
You can try to sharpen the reduced image with the Photoshop 'Filters - Sharpen - Sharpen' Menu option, or for PSPro try the 'Image - Normal Filters - Sharpen' Menu option. Do not use the 'Sharpen More' option for it will be too much for these low resolution images.
for a break
Photoshop. With the Rectangular Selection Tool chosen, mouse drag the frame selection across the work window and drop it onto the new reduced picture. Drag it around the new image to cover the wanted area of the image or use your arrow keys to nudge it into place - shown on the left.
PSPro. Activate the new picture
and choose 'Load' in the Selections Menu and from the
folder window that appears, load the previously saved
selection onto the new image. Now drag the selection
around until it covers the wanted area - shown on the
In both programs, choose 'Copy' from the Edit Menu, then activate the frame image again and for Photoshop choose 'Paste Into' via the Edit Menu, and for PSPro choose 'Paste - Paste Into' via the Edit Menu. The images should now be combined and looking good.
Choose the Magic Wand Tool, check that Feathering or Antialiasing is set to 0 or Off and the Tolerance is set to 0, plus for PSPro, Match Mode equals RGB - Tool Options.
Click in the area that needs to be trimmed off (shown here on the left). Once selected, choose "Invert" from the Selections Menu. The selected area will be reversed, go to the Image Menu and choose "Crop"..... Bingo (or ..oops! redo it).
back to 256 (or less) colours
PSPro. Choose 'Decrease Colour Depth - 256 colours' from the Colours Menu. Go to the File Menu and choose 'Save As" and give the file a new name in the desired folder. From the drop down list of file types, select GIF. Click "Save".....
top of page
| Images Main page | How To! Main page |
|Over 120 pages: All major topics divided into Classrooms|
|Free Backgrounds & Buttons!||DTP and HTML||"My First Page" HTML lessons|
|Tutorial Text Search||Perl CGI Scripts||Typography & Layout|
|4 pages of Links||Visitors Book||Perl Scripts Forum n/a|
|Free Links page||Feedback Form||Q/A contact Forum|
|pages Designed & Published - Ron F Woolley|
|©1997 '98. Last Revised: Friday, 31 October 2003 22:04|