Photoshop page template

Ok, two ways to get them out, either make selecting using the marquee, top of the tools box, the icon is a box with a dash edge, marquee around the select you want to save as an image, CTRL-C (CTRL-SHIFT-C if there are multiple layers) to copy and then CTRL-N to create a new document, it will automatically size the size of what is on the clipboard, press enter to create the new document, CTRL-V to paste and the CTRL-ALT-SHIFT-S to 'Save for Web'. Choose the most appropiate settings for the image type, normally either GIF 128 No Differ for solid solid image or JPEG-High for more photo like images and Save. Repeat this for all the images you would like to create.

The second option is to use the 'Slice Tool' and create all the slices in photoshop and then do 'Save for web' again and it will save all the slices as images and create the HTML for you. Personally I don't like this option as it can create messy code, but it is very quick. Look at the help for more about using this tool.

I always make a point of looking at the keyboard shortcuts list when I start using a piece of software or there is an upgrade, always find something useful... normally not much else useful in the F1 help files!!!

I tried the suggestions, but as usual, could do anything with it in Photoshop.

John

It took me sometime to get into Photoshop when I started using it about 6 years, but if you just play around with it for a while and play with all the tools and see what they do it all become quiet obvious after while, don't give up and don't let it beat you as it is well worth it in the end... Remember Photoshop is a professional product, so it is going to take sometime to understand it as it is extremely powerful and complex. Good luck. If you have any specific questions please ask and I will do my best to help.

This is a suggestion, why not load the photoshop template of the page, do a screenshot of each area, then save it as basic jpeg or gif, after that code a css site with backgrounds or images set to those you took as screenshots from the PS template...

Say WHAT? I aint graduated from kindergarden yet. That is advanced college level.

John

I was going to respond to this earlier but it's hard to write clear instructions from the begining on this. Really, the site you got the template from should be have some instructions.

The file should already be sliced. If it isn't we'll need to explain that too but I'll go ahead assuming that it is. Slicing means that it has already been cut up into sections that will become separate images on the new page. To turn on slicing in photoshop (which version are you using BTW??) go view > show > slices. Some lines and boxes should show up on the image when "show slices" is checked. If nothing happens when you do that let us know and we'll tell you how to slice it up.

Now, if the slices are already there you should be able to just export the images with an HTML file. So choose file > save for web. You'll need to decide what to save the files as here. Play around with the options until you find something that looks best. This is a little tricky because you can set preferences for each slice individually. There is a tool on the left side that lets you select slices (it looks like a little knife). For simplicty's sake, for right now, just accept the default settings. You should learn about the difference between GIF and JPEG and what types of images they work best for. Depending on the design of the tempalte you may need a mix of both types.

When you click OK to your settings Photoshop will ask you to name the file and if you want to save images and HTML, images only, or just HTML. Choose images and HTML (this is a drop-down at the bottom of that dialog box). Photoshop wil generate an HTML file for you with all the images in it. This will be a table with all the slices in it. It's not great HTML but it might have to do for right now. You will need to import this into an HTML editor and move some of the images to backgrounds. How to do this depends on what HTML editor you are using. In areas where you want to put text on top of the image, make it a background instead by deleting the image and putting a background="image.gif" attribute into the td tag (using the proper name for the image you just deleted).

If you can link to the template somehow it would be helpful. That way we can figure out how to tell you what to make an image and how to code it. What you should be attempting to do here is to make only certain portions of the page images and the rest plain HTML, possibly with a background colour. If any images come out as a solid colour you can delete them altogether and use a bgcolor attribute instead.

(Of course, ideally you wouldn't be using photoshop's HTML or tables for layout at all but that's way beyond you at this point. One step at a time!)

Hi Megan, I got it. It is all images but I think I might be able to work with it.

I checked your link, so I can't say U Da Man, maybe You Go Girlfriend.

Oh BTW, I have access to and am trying to use 7.0

thanks

John

LOL, thanks!

Let me know if you have any questions. You could try googling around for help in converting a template. I'm sure there are others who have had this same problem.

Megan, How Do you like Wordpress for your blog. I am thinking of adding one to our political site, and saw it recommended. I know I have mySQL available and think that means PHP is available too.

Thanks

John

I just checked the control panel on the site and it reads at the db.

Welcome to phpMyAdim 2.7.0-p12

John

Sorry I wasnt elaborate enough, its good that megan covered all the stuff for photoshop, What I was suggesting is that if you intend to use the template to recode it, meaning just use the images for your site, you can actually get a screensshot(its like taking a snapshot of a webpage)... then cut the whole site image to pieces, so you wont have to use layers for the parts. Use these images on your html via css styling as background or images, you can decide to use pure css or table at this point...

This instruction is manual but you are in control of where every styling goes, if you prefer to use the template as it is, then megans instructions will do.

My .2 cents for wordpress? Its really good...

Everyone is entitled to free speech, although you are in control, meaning you can delete a post if you like, the point is you judge the flaming if its valid and doesnt go against the interest of your blog or makes a personal attack, In my case a personal attack in my blog would get instantly deleted and I will try to contact the poster about the post... You can also post ground rules not to flame, so its better judgement of the postings that goes into this...

Why not ask them if they can provide you with a list of blogs that could work for their settings, or if you can ask for an upgrade of your hosting to support wordpress...