Web Design How to work with PSD files.

Hello, i'm new here, i get a site with a css, and images, and psd files.

I open the psd file, and i edit the photos like i want to, and click on save, and i go to the index.html, and i open the file, and nothing happend.

I know there pictures in the root image folder, all the pictures are in the psd file. how i change all the photos in the psd files, instend edit one by one in the image folder ?

 

Hi there
Follow these steps:
After you customize your template into Photoshop,
Choose "File/Save For Web..." from the top menu or use "Ctrl+Alt+Shift+S" hotkey. Save for web window will appear.
In this window you can change optimization options of images. Actually our designer already set optimization options for best quality/size balance. But if you want your site to load faster you can decrease image quality. Select slice using select slice tool. At the right you'll see panel with image options. You can change value of quality input box for jpeg image or colors for gif and pngimages.
Now select slice that you want to update by clicking on it with Select Slice Tool. If you want to update several slices at once you should select them holding "Shift" button.
When you have selected all slices you want to update click Save button at the right top corner of save for web window. Save Optimized As window will appear.
Browse to the HTML folder of your web design template. Change File Type option to Images Only and Slices option to Selected Slices. Other options may damage original HTML structure.
If everything goes in right way you'll see pop-up window asking for image replacement confirmation. Confirm that request.
If such window doesn't appear make sure that you're saving images to appropriate folder. Also check slice name by double clicking on it. Name and image type must be same as image in HTML have.
Now it's time to check modifications you've made. Go to the HTML folder of your web design template and launch HTML file to see changes.

Good Luck

 

It's don't work...

I go to "save for web", i click on the clice button, but it's sho me one big frame, for whole page.

It's seems to be one big slice on the wall page.

 

You need to use the slice tool first. Click on the slice tool, slice out the images you need to save, then go to save for web...

 

but...

To slice, i need to know the size of the pictures like in the "image foldr" no ?

Is there no auto slices pictures view ? where i can see the slices pictures made by the designer ?

 

Hi there
no to slice you do not need to know any image seize. slicing should be after you finish the whole layout (template) using the slicing tool below:




If you can't see slices for any reasons you should choose "View/Show/Slices... "

Good Luck

 

Well, if you want to use the template in it entirety including CSS and html, then actually you do need to know the exact sizes because you would have to save over the original image with your own to make sure the html and css worked properly. Especially if you are not familiar with CSS!

You would have to open the existing image, then up on the menu (file, edit, image etc...) click on the Image drop-down, then scroll down to the image size and it will open a little window giving you the exact specs. However, if you are pretty good at Photoshop you could always modify the jpegs. There are many ways to do it, personally, I would open each jpg, modify the ones I could and the ones I couldn't I would create new images using my own images and save over them.