Umm, so far I’ve managed to only be able to desing a website layout in Photoshop. I think I’ll be able to figure out how to make each area into an area where you can click as a link to some other webpage.
One thing I don’t understand is how can text be put inside the boxes for where text should go into. (Just a huge white box that would display text). First I’ll have it as a seperate picture file, but in the HTML code do I convert change the img src into a img background?
Can someone point me in the direction towards any tutorials that specifically tells me how to place text inside web layouts made in photoshop? Thanks.
Umm, yeah it’s just an image. Don’t know the proper terms to describe it. It’s a whole image that you create in photoshop. In photoshop you can also cut it so that it’s saved as a webpage with different slices of the whole image. I’ll be able to create links to the menu bars, but there’s only one thing I’m totally clueless about. Guess I got to read more on HTML.
I have a white box that’ll serve as a background for the text to go inside of. Photoshop automatically pieces together all those images that I slice up into webpage format. Problem is I don’t see any code that places it into position. It’s probably just converted to HTML in an order that keeps the original full webpage layout. So when I change the img src into a img background, the white box for text (that was on middle left) shifts right and leaves a gaping rectangular hole. Just wondering how I can write text on top of it.
Is it possible to have the text as a separate html file or javascript file and call it to be loaded by the main web layout. That way I can easily change the content without having to have multiple copies of the layout throughout the site. If there is a way, how?
Hey there. Photoshop comes with a sister program called Imageready. The purpose of this program is to take Photoshop layouts and slice them up for the web. It also generates the HTML code for the table which will contain the image slices.
When you are in Photoshop, the bottom of the toolbar has a graphic button at the bottom whose function is “Pass image to Imageready”.
When you are in Imageready, the easiest way to create a webpage is to set up guides where you want the slices to occur. Don’t worry if it looks like you are going to make a million slices after you have put in the guides, because you can merge slices that don’t need to be separate.
Then you use the command “Create slices from guides”.
Now, you can select compression options for the slices, create rollovers, etc.
One thing that is very cool is that you can choose whether or not an image is created for a given slice or whether that cell in the table will be left blank.
Ultimately, after you export the webpage from Imageready, you will have to still edit any cells you want to have editable text in, but using Imageready gives you an excellent base to begin with.
I know this is only a very brief explanation - I hope it helps. The help in Imageready is good, and you should really read through it to get any more detail.
BTW, Fireworks from Macromedia does the same things.
Sounds like you are trying to create a webpage that really is one huge image map. Doesn’t sound like a good approach to me. If you have a large white area somewhere why would you want it to be an image? Just make it a table with white background, put your text in it and then add some smaller graphics where you need them.
Just look at this forum here. There are some graphics at the top of the page and the rest is pretty much a table with different colored cells and borders. Of course you could use images as backgrounds instead of plain colors but that doesn’t mean you should start with an image that is the size of your whole page. Also if you do that it will not be the same size on everyone’s computer. People run different resolutions or make their browser windows different sizes. You want a layout that adjusts to everyone’s viewing needs.
I suggest you read up on HTML first, then decide on a page layout, get your other content ready and worry about the graphics last. There are many beginner’s guides you can find online for example this one: http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
Graphics are an important element of every webpage but first you need to decide what you want to present on you page, who it is for, etc. Graphics should serve a purpose, organize the content, make navigation logical, make buttons and links obvious, in general make the page easy to view and use for as many people as possible.
Anyway, I’m talking too much. Good luck with your page, do some reading and post what you come up with later.
Eva I did do basic html tutorials and stuff awhile back. Lol, to count about 3 years ago. I’m a bit rusty now. No the whole webpage is not just a white box. It’s a page layout created in photoshop. Essentially before I split it up using the slice tool it is a big image (Right now it’s W:800 by H:700 pixels). Instead of using imageready I found out how to slice it up in photoshop and create links for the menus that I had created earlier on the full web layout.
What I want to know is how I can stick text inside areas of boxes. Basically those white boxes are just background of the area where the text would be. :-? I would use regular boxes from HTML, but they look bad. I create boxes in photoshop that has a look that’s a bit different. Just wanted to know if there was a way to keep the main page layout while text could be changed effortlessly, say if it was loaded from a different webpage. Hmm, or there could be a way to load the layout into every one of the different subsections of the webpage without having long code that’s the same in every webpage to just create the layout in HTML. To make it more simple, you know elysiun’s layout. Those menu bars are always there on the webpage. Let’s say they were actually images, is there a way to make it so that different pages just reference to them with minimal code instead of just repeating img src in whatever pixel position.
I’ve also been looking at other people’s webpages and when I do a save to see what kind of backgrounds they have, none of those pictures are large whole picutures except for the ocassionaly banner. In most webpages layouts have some kind of repetitive pattern. All they have is an image slice of a particular pattern and it’s placed repeatedly on the webpage to create a whole layout. Is this done through javascript?
nharron Fireworks does the same thing as ImageReady? Can it do all those things that I described up there?
Ok, let me refine what I was talking about. I’ve played around with it and I think I can get all the basic stuff now.
What I still can’t seem to figure out is how to have small slices made into a full image. I could easily just have a whole image map loaded in. However, a great bulk of it, has the same pattern and can be minimized to about 2 pixels in width and to a certain height. Take my top header for example. A pattern with 2 pixels wide and about 12 pixels in height is just repeated 400 times to get a 800 pixel width. If it’s sliced in photoshop, it’ll literally have a whole image of the repeating pattern. This takes longer to load of course. I want to know how I can just have the smaller 2 pixel wide and 12 pixel height image load and have it looped in code so that the pattern will be repeated 400 times with just that one image. I want to also do that with the other images that are made up of a pattern of small images. How can I do that with dreamweaver or fireworks? Or any other program (lol, maybe in text editor)?