|
| |
|
|
_gail
Posts: 2874
From: So FL
Status: offline
 |
Photoshop/ImageReady slices - 10/24/2002 7:42:14
I' m trying to get a handle on slicing graphics. I' ve read a little here and there, and am following a very, very basic tutorial but get stuck now and then. I know little about slicing but it is a technique I really want to dig my teeth into. I have two initial questions.
I know how to create very simple slices in Photoshop 7. When they are " saved" a web page is created. To insert the image in an existing web page, here' s what I' ve been doing:
1- place slices in the webs images folder
2- cut and paste the code into the web page where I want the image.
3- make any additional changes in graphic placement, add text, etc. in normal FrontPage view.
QUESTION: Is this the correct method, or is there a better way?
I' ve noticed that complex sliced images are often placed as background images in web pages. I haven' t been able to figure out how to do this.
QUESTION: How do you place a mutli-sliced image in the background of a web page?
thanks so much, gail
|
|
|
|
Thomas Brunt
Posts: 6106
Joined: 6/6/1998
From: St. Matthews SC USA
Status: offline
|
RE: Photoshop/ImageReady slices - 10/25/2002 13:58:50
I do ImageReady slicing for every OutFront Web template. I don' t let ImageReady create the html because it' s not smart enough to know where I want the design to stretch. I find the code it generates to be pretty useless, not because it does a poor job of writing the code, but because I want more from the design than it can reasonably give me.
I make sure slices over photo like images are jpgs and slices over line art are gifs. I try to give each slice a name that will remind me where it' s going to fit into the puzzle.
I create the slices the way I see them fitting together and do File > Save Optimized > Images Only > direct them into my images folder in my new web.
Then I put them together like a puzzle. Sometimes I see that I didn' t plan the slices out corretly. No problem. I just go back to imageready > modify the slices to suit and Save Optimized again.
The more recent OutFront Web Template are sold with or without the Pshop source file. The source file is set with imageready slices ready to go. You change colors or images in Photoshop > switch to imageready > save optimized. You' re done.
| |
|
|
|
Thomas Brunt
Posts: 6106
Joined: 6/6/1998
From: St. Matthews SC USA
Status: offline
|
RE: Photoshop/ImageReady slices - 10/25/2002 14:02:56
Also, I don' t know what a multi sliced background image would be. A page can have a single bg image. A table cell an have a single bg image.
You can cut up your image so that one piece of the puzzle is a table cell with a bg image so that you can place live text over it.
In that case, you need to be sure to set the height as well as the width of the cell using the bg image.
t
| |
|
|
|
_gail
Posts: 2874
From: So FL
Status: offline
|
RE: Photoshop/ImageReady slices - 10/25/2002 14:13:48
quote:
ORIGINAL: Thomas Brunt
The more recent OutFront Web Template are sold with or without the Pshop source file. The source file is set with imageready slices ready to go. You change colors or images in Photoshop > switch to imageready > save optimized. You' re done.
Thanks, Tom, for the info.
You' ve given some very practical insights that aren' t mentioned in the PS manual.
Yes, I know about your templates. And I' ve been looking at them for some time. I' ve just never used an entire template for a website designed entirely by another and so I haven' t jumped in.
Question: my goal is to learn how to make, use and insert slices, including but not limited to incorporating rollover effects within images. As a teaching tool, would one of your templates help me in this regard? (Need a break from markup languages, css, validation, and the like for a while  ).
I think I understand you correctly that I can use the source files associated with your PS templates and alter the graphics and design, correct? I' m not sure how limiting, if at all, your licensing agreement may be.
gail
< Message edited by _gail -- 10/25/2002 2:17:14 PM >
| |
|
|
|
Thomas Brunt
Posts: 6106
Joined: 6/6/1998
From: St. Matthews SC USA
Status: offline
|
RE: Photoshop/ImageReady slices - 10/25/2002 15:06:15
One of the puposes of an OutFront template is to help a beginner see from the inside how I build site. The license is not limiting. You cannot resell the template as a template, but you can use it to create as many finished sites as you like. You can sell the finished sites for any price you wish. You can modify anything within the project however you wish.
They' re not the right choice for all OutFronters. I' m fine with that. I only mentioned them in this case because of how I use slices in those projects.
t
| |
|
|
|
_gail
Posts: 2874
From: So FL
Status: offline
|
RE: Photoshop/ImageReady slices - 10/26/2002 9:53:16
quote:
ORIGINAL: Thomas Brunt
I do ImageReady slicing for every OutFront Web template. I don' t let ImageReady create the html because it' s not smart enough to know where I want the design to stretch. I find the code it generates to be pretty useless, not because it does a poor job of writing the code, but because I want more from the design than it can reasonably give me.
I assume when you say the code is useless it is because your want to design something more complex than the code can handle. Am I correct? Is the code ImageReady generates smart enough for a person who does simple designs and/or wants to make simple rollovers?
I' m a designer, not a coder or programmer and primarily rely on software programs to get a job done. A person with a background in graphics can face several challenges when moving from page layout to web design programs.
I' ve purchased FrontPage and Photoshop to design webs. Someone typically points out problems with the code these types of programs generate. I always get a little nervous when this occurs.
gail
| |
|
|
|
abbeyvet
Posts: 5095
From: Kilkenny Ireland
Status: offline
|
RE: Photoshop/ImageReady slices - 10/26/2002 10:34:35
I think, and I am not putting words into his mouth, that waht Thomas means is that the code generated is a little restricive and/or depending on the situation unnecessarily bloated.
What image ready does, essentially, is chop up your image and place it in a table with cells and so on created to fit all the bits of the image together again on the page. Which is fine, as far as it goes.
If the image is, say, the full width of the top of a page designed to be a fixed width, then this table could simply become the top table on the page. However if your page has a fluid design the table will have to be integrated into that degisn somehow, probably as a nested table, and made to fit with the design as it expands and contracts. Trickier. It may well be that placing the bits of the image into cells and tables you make yourself will give you less code, less need to nest and so on.
One thing that all these slicers do is slice in regular paralel lines, so that if the image is sliced first into three parts one on top of the other then these parts will be sliced into parts in the same way as each other, eg is the top one needed to be sliced into tree images side by side then the other two images would be sliced along the same lines. This is not always necessarily what you need or want.
I tend to slice myself a lot of the time without using anything much to do it for me, and then reassemble in a table made for the purpose. There are a couple of reasons for this. One is that there are often parts of an image that might be better as a gif and other parts best as a jpg and I want to extract the various parts as efficiently as I can to save in the relevant format. I can easily do this if I slice manually and create the table manually.
It is tricky to get things so that everything lines up and sits properly on a background. Also you may want to have part of an image in an include page and the rest of it on the main page.
This is HORRIBLY difficult to explain and would probably be really quick if someone was sitting beside you watching you do it. An example may help.
I am not intending to set this as any kind of a model to follow but this site illustrates what I mean.
The image on the top right is sitting on a background image (the squares) and is sliced so that part is saved as gif and part as jpeg. Also some of it is in a header file and included, some is in the right column of the final pages.
This is the site http://www.intentsystems.com/ and this is the heaer include page: http://www.intentsystems.com/includes/header2.htm
If this had just been sliced in Image Ready it would be difficult, or impossible really, to arrange things like this.
_____________________________
Katherine
:: InKK Design :: InKK Domains
| |
|
|
|
Thomas Brunt
Posts: 6106
Joined: 6/6/1998
From: St. Matthews SC USA
Status: offline
|
RE: Photoshop/ImageReady slices - 10/28/2002 8:42:48
Code bloat is an overblown issue unless your site is so popular that you have bandwidth issues. A lot of code can downlaod in a little time. I do think more elegant is better than less elegant assuming everything else is equal, but development time is THE expense.
For simple pages, I think it makes perfect sense to allow ImageReady to write the code. It' s fast, and it works.
That approach falls down, however, when you' re building a page where certain elements of the page stretch either with the browser window or with the amount of content. I' ve seen folks try to start with the ImageReady code and modify it to do the things they want. I' ve tried that too.
But, in my mind, it' s a lot faster to just start from scratch than to try to modify the tables ImageReady creates.
Tom
< Message edited by Thomas Brunt -- 10/28/2002 4:02:52 PM >
| |
|
|
|
_gail
Posts: 2874
From: So FL
Status: offline
|
RE: Photoshop/ImageReady slices - 11/1/2002 14:05:46
http://www.trainingtools.com/
Someone mentioned this in another thread. Really great. Check out the photoshop link.
gail
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: Photoshop/ImageReady slices - 11/5/2002 22:35:14
ImageReady is an excellent tool! Don' t let Thomas scare you! ;)
I' ve been using IR for a couple of years now and you have many options on how the code is generated. For the past 18 months we' ve been exporting everything as css, no more tables for the design elements. Its much easier to work with than all the tables, spacer gifs, etc. And, its about half the html, or code bloat. I' m a devout supporter of minimized code when possible. Back off all you bloaters! ;)
Thomas, try experimenting with your export features and you might find some time saving stuff in there. Like, you can have the generated code use spacer gifs, or you can use empty <td>' s with non breaking spaces instead of the spacer gifs. I prefer the empty <td>' s as they give you much more control for after the fact adjustments.
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
Thomas Brunt
Posts: 6106
Joined: 6/6/1998
From: St. Matthews SC USA
Status: offline
|
RE: Photoshop/ImageReady slices - 11/6/2002 9:27:14
empty td' s have created issues with older versions of NN for me in the past. I try to avoid that.
t
| |
|
|
|
Thomas Brunt
Posts: 6106
Joined: 6/6/1998
From: St. Matthews SC USA
Status: offline
|
RE: Photoshop/ImageReady slices - 11/6/2002 13:52:15
not table cell bg' s or bg images display in unpopulted td' s in older versions on NN.
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: Photoshop/ImageReady slices - 11/6/2002 13:52:16
I' ll agree with you Thomas, but, only if the td is empty. If it contains an & n b s p ;, the issues become null and void.
Don' t you just wish NN4.x would just self destruct on a specified date or something? ;)
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
Thomas Brunt
Posts: 6106
Joined: 6/6/1998
From: St. Matthews SC USA
Status: offline
|
RE: Photoshop/ImageReady slices - 11/6/2002 13:53:55
The problem wiht is that sometimes it' s either too tall or too wide for the call. I use cleardot gifs instead.
1
| |
|
|
|
Ralph Westby
Posts: 41
From: Chinnor, Oxon, UK
Status: offline
|
RE: Photoshop/ImageReady slices - 11/30/2002 16:53:48
I just came across this thread as I was starting to despair over a PS source file, so here' s hoping you guys can help me ....
I bought the Outfront template called ' work' and, not being familiar with PS, asked around regarding editing the source file.
When I had finally changed the colour of some elements, I tried to adopt the images in my website. No use.
Thomas told me about ImageReady and I did what he said. Then I tried to adopt the saved image slices. Oh, Oh! some parts of the elements were not on my web page.
Question: How do I ensure that the modified elements are retained in the page I produce? Is there a switch somewhere or a check routine I should follow before saving the optimized slices?
Any help gratefully accepted.
Ralph
| |
|
|
|
Thomas Brunt
Posts: 6106
Joined: 6/6/1998
From: St. Matthews SC USA
Status: offline
|
RE: Photoshop/ImageReady slices - 12/2/2002 8:43:44
Some of the elements will be part of your them. Some of the elements will be cell bg colors. You chave to change those elements in other ways.
For a theme button or bullet, do Format > Theme > Modify > Graphics > ...
For bg colors, locate the hex value in the source code > Edit > Replace > in source > All pages > put the new hex (you an get that with the eyedropper on Photoshop or ImageRead > OK.
t
| |
|
|
|
Ralph Westby
Posts: 41
From: Chinnor, Oxon, UK
Status: offline
|
RE: Photoshop/ImageReady slices - 12/4/2002 17:07:59
Thomas,
Thanks for the reply.
I have had some success at last. Not too bad do far, I think.
Now I want to replace the existing photos in the ' work' header with my clients' own photos. I guess I can investigate how to do that in PS and hopefully will be successful. My question refers to file naming because I don' t know how PS and ImageReady handle the contents of a source file (I' m very much a ' newbie' with PS):
If I replace the photos in the existing slices with my client' s but keep the same slice names, will my client' s photos appear in the website header or is there another trick of which I should be aware?
Regards,
Ralph
| |
|
|
|
Thomas Brunt
Posts: 6106
Joined: 6/6/1998
From: St. Matthews SC USA
Status: offline
|
RE: Photoshop/ImageReady slices - 12/5/2002 9:16:03
The slices are all properly named and optimized in ImageReady already. You just make your change in Photoshop > Switch to ImageReady > File > Save Optimized As > All Slices > Images Only > Direct the Output into the images folder of your web > Click yes when asked to overwite the existing graphics.
When that' s done, you will need to change some table cell bg colors and probably the theme buttons and bullets. You change the theme elements in Format > Theme > Modify...
t
| |
|
|
|
pooky
Posts: 2
Joined: 12/30/2007
Status: offline
|
RE: Photoshop/ImageReady slices - 12/30/2007 17:18:01
No, it's not the right way: slicing programs create very messy, unsemantic code - you should hand code it.
Things such as Dreamweaver will generate your code for you, but it will be unsemantic - it won't mean anything if a visitor visits your website and use a screenreader - tables are for data, not to help lay your website out. Is you're serious about it, pay someone to help you create a CSS/XHTML template - it's worth the money, and places such as psd2html.com are reasonably priced.
<edit>
Please note the post you replied to is like 5 years old - what was relevant then may not be relevant now
Spooky
< Message edited by Spooky -- 12/30/2007 17:36:45 >
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
[:p]
