I created a simple site layout with navigation tabs on either side of the primary content area. Something along the lines of this:
Logo|||||||||||||||||
|nav| (content) |nav|
|nav| (content) |nav|
|nav| (content) |nav|
|nav| (content) |nav|
The site wasn't as hard to create as I first anticipated, however I ran into a problem.
The layout looks great as long as content in the primary table cell (inbetween my two nav bars, and below the site banner) remains within the guidelines of the layout.
If content is longer than the layout the entire table is stretched vertically so that there are gaps between each navigation button.
I know the basics of Photoshop so you can say I'm not a newbie but I find myself using it in ways I never have before. I'm in CS3 and I have to be able to slice up .psds for the web, I know about user slices, smart guides, naming slices, optimizing and saving for the web but the one thing I cannot figure out is the very beginning steps in doing this. For instance, let's say someone sends me an image of a webpage that is in any other format but a .psd. Reason I bring this up is tutorials always start with layered documents already in a .psd format and I need to know how to save the slices I make as layers from scratch. Now I'm looking at a (example) .tiff image of a doc I need to slice up so first thing I would do is to save as a .psd correct? or not? NOW here's where I'm missing information as I have tried to save the main image as a .psd file and when I go slice layers out of it and name the layers they do not show up in the palette, they are saved as part of the background.
i have made something in photoshop. i need to slice it, unaware of how to slice thigns in photoshop i did it in macromedia fireworks, the only problem is i used a photo in my design and its got sky in it the sky now has a few different blue shades rather than one smooth picture. fireworks saved them as gifs which is wat i would expect but not the quality has gone down quite alot with the photo!
how exactly do you slice and save the images for a webpage. I already made my template. A not so good one, but now that im done making it, how do i go about slicing it?
I have just made a header for a site with links and everything already on it. Now, what would be the easiest way to save the image in order to make those links? Do I slice up the header and save all the links seperately so that I just add HTML to them, do I take it to Image ready? What?
I am looking to slice a website up in Photoshop, I have created my design in photoshop for 800 x 600. I think this size is wrong as i haven't allowed for the scroll bar in the browser...
I notice i can use the slice tool, or slice from layers etc.
What about place holders i have left for "pure" text which of course i will enter in my html editor? But i should imagine i want it to export with the text place holder in the html file otherwise the html with the graphics are not going to line up?
Also i have created a box with rounded corners, i presume i should only be exporting the four corners and using some trickery to lower file size..
I want to select just two parts of this image to make clickable - in this case it would be the black part of the 'S' (the top part), and the white part of the 'S' (the bottom part).
Photoshop Image Ready only seems to let me create rectangular or square shaped slices - I have seen this done on other websites where differently proportioned shapes and slices have been created?
I have a psd file and there are a bunch of caption bubbles all on their own layer. How can I easily slice each bubble to their own new .png image file? All the bubbles are spaced nicely and they don't overlap.
Is there a way to auto slice an image in image ready when I have made the grid, so they save all the ares into different files instead that I have to save everyone indivitualy?
creating the slices (attaches is the design in photoshop). In particular I'd need some clues on correctly creating the rounded rectangle around the main content. (I'd like to use a fixed layout).
I've seen that there's a technique to define the four corners and repeat the main element so that the rectangle can be adapted to the dimension of the content.
how do you slice a circular object so that it can become a frame and that I can place a object inside it, I used the selection tool in image ready and created a slice from the selection but it slices a square that includes the circle.
I have created an image in Photoshop that I want to use as my website front end, but I have a few questions:
1. How do I go about putting the hyperlinks into my navigation menu?
2. I want to use the blank space I have left as a frame, what would be the best way to do this? I was thinking of creating the layout of frames in dreamweaver then slicing and inserting the slices into the individual frames? then filling the centre frame the same colour as the front end so it belnds in.
I am not sure if slicing is the correct word. Basically, I have a rectangular image and I would like to slice of the edges diagonally and turn the rectangular image into a parallelogram. Then I would like to put some stripes (possibly use the line tool) on the image.
slicing in photoshop? i've created a layout already i dont understand the slicing process. i looked at a few tutorials on it, still dont get the point and how it applies to dreamweaver...
also, can slicing be free-form (like slicing perfectly around a circular object)?
i have selected SAVE FOR WEB AND DEVICES and have then selected the slice tool. i click and drag to draw a slice but it does not create a slice. as i am clicking and dragging i see the marching ants showing the area i have selected. when i let the mouse button go it just dissappears and no slice.i am using ps cs4
So i have made a mockup of a forum skin i want to code in photoshop and later on im most likley going to slice it and code it in dreamweaver. I just wanted to know if you need to slice text or do you just slice the background that it goes on and write the text in the code itself.
I have four buttons that are oval shaped at a size of 100 pixels wide and about 25 pixels high.
In the future, I might want to change the text so instead of creating the button with text on it; I would like to use plain text.
I've tried slicing it and adding the text after making the middle section (text section) the background. Of course this messes up the tables and it becomes a mess. Can somebody tell me the best way to slice this?
slicing web images (navs, UIs, ect.) and exporting them to HTML files.
I know when you create slices in ImageReady and Save Optimized As..., they are exported in HTML and are put together with tables. Now, my question is:
Is there any way to export them as HTML, but then have them pieced together with "tableless", CSS design? For example, instead of aligning everything up by way of using tables, is there a way to align everything by way of using CSS?
in slicing using Image Ready, i cab get the optmization done perfectly, but when i open it using FrontPage and try to edit the " empty space " -which is in the middle - in my case, i got all the images on the sides falling apart !!
I recently redesigned my website using an image which was sliced using imageready and then put back together using tables.
I was told that tables were okay for this but I should have used css, surely I owuldn't have to do an absolute position for each small segment of the interface - can anyone describe how this technique may work and is it better than using tables?
Just made a very cool logo for mysite but the bad part is, it is 35.9KB. This is sort of too big and will take too long to load on dialup. I was wondering, If I sliced the image up in two, will it maybe speed up the load time? Or will the slices still both be 35.9KB?
Is is possible to have different layers for slices - i.e. each layer has a different slicing for the image. This is so that if I need to cut up the image another way all I have to do is change the "slice layer" instead of reverting to another copy of the psd file?
