Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
PSD and HTML
- Thread starter GUJUm0deL
- Start date
Hi,
Can you explain more what you want. Do you want to make a template of pictures and backgrounds similar to ones found at using PSD then slice it up and fit it all together in your HTML page? Is that what you mean?
Hope this helps! NATE
design@spyderix-designz.com
Can you explain more what you want. Do you want to make a template of pictures and backgrounds similar to ones found at using PSD then slice it up and fit it all together in your HTML page? Is that what you mean?
Hope this helps! NATE
design@spyderix-designz.com
- Thread starter
- #3
Hi, ok not really...my website has one big interface, which I wanna cut up and export (to cut back on the download time), I wanted to know how to do that...
Alot of sites I design I create the interface in Photoshop, then save as a GIF or JPEG, but these images take a long time to load... I have not failed; I merely found 100,000 different ways of not succeding...
Alot of sites I design I create the interface in Photoshop, then save as a GIF or JPEG, but these images take a long time to load... I have not failed; I merely found 100,000 different ways of not succeding...
Hi,
Simply make the whole interface using PS. Then by knowing your layout and where things will go you must decide on where to make your slices (conditional per site). I just use the guides instead of the slice tool, then I jump to ImageReady and optimize the file sizes of each piece.
Is that more what you are looking for?
Hope this helps! NATE
design@spyderix-designz.com
Simply make the whole interface using PS. Then by knowing your layout and where things will go you must decide on where to make your slices (conditional per site). I just use the guides instead of the slice tool, then I jump to ImageReady and optimize the file sizes of each piece.
Is that more what you are looking for?
Hope this helps! NATE
design@spyderix-designz.com
- Thread starter
- #5
Hi,
Here is something for you to try. This is not hard and is quite basic and I haven't seen any tutorials on this.
- Find any picture from the net and make sure it is a good size
- put a vertical guide half way
- put a horizontal guide half way
- use the marquee tool and select the first box from top-left to the center.
- copy it put it into a new document and note the size in pixels
- do that to each of the squares that the guides make
- then when you have all 4 seperate squares
- either jump to ImageReady (Ctrl+Shift+M) and optimise them, or just save them. This is only a trial so it doesn't matter.
- then in your HTML page put this:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="ENTIRE PICTURE WIDTH" HEIGHT="ENTIRE PICTURE HEIGHT">
<TR>
<TD WIDTH="FIRST SQUARE WIDTH" HEIGHT="FIRST SQUARE HEIGHT"><IMG SRC="slice1.jpg" WIDTH="FIRST SQUARE WIDTH" HEIGHT="FIRST SQUARE HEIGHT"></TD>
<TD WIDTH="SECOND SQUARE WIDTH" HEIGHT="SECOND SQUARE HEIGHT"><IMG SRC="slice2.jpg" WIDTH="SECOND SQUARE WIDTH" HEIGHT="SECOND SQUARE HEIGHT"></TD>
</TR>
<TR>
<TD WIDTH="THIRD SQUARE WIDTH" HEIGHT="THIRD SQUARE HEIGHT"><IMG SRC="slice3.jpg" WIDTH="THIRD SQUARE WIDTH" HEIGHT="THIRD SQUARE HEIGHT"></TD>
<TD WIDTH="FOURTH SQUARE WIDTH" HEIGHT="FOURTH SQUARE HEIGHT"><IMG SRC="slice4.jpg" WIDTH="FOURTH SQUARE WIDTH" HEIGHT="FOURTH SQUARE HEIGHT"></TD>
</TR>
</TABLE>
The slice numbers I used correspond to this:
-------
|1|2|
|3|4|
-------
Hope this helps! NATE
design@spyderix-designz.com
Here is something for you to try. This is not hard and is quite basic and I haven't seen any tutorials on this.
- Find any picture from the net and make sure it is a good size
- put a vertical guide half way
- put a horizontal guide half way
- use the marquee tool and select the first box from top-left to the center.
- copy it put it into a new document and note the size in pixels
- do that to each of the squares that the guides make
- then when you have all 4 seperate squares
- either jump to ImageReady (Ctrl+Shift+M) and optimise them, or just save them. This is only a trial so it doesn't matter.
- then in your HTML page put this:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="ENTIRE PICTURE WIDTH" HEIGHT="ENTIRE PICTURE HEIGHT">
<TR>
<TD WIDTH="FIRST SQUARE WIDTH" HEIGHT="FIRST SQUARE HEIGHT"><IMG SRC="slice1.jpg" WIDTH="FIRST SQUARE WIDTH" HEIGHT="FIRST SQUARE HEIGHT"></TD>
<TD WIDTH="SECOND SQUARE WIDTH" HEIGHT="SECOND SQUARE HEIGHT"><IMG SRC="slice2.jpg" WIDTH="SECOND SQUARE WIDTH" HEIGHT="SECOND SQUARE HEIGHT"></TD>
</TR>
<TR>
<TD WIDTH="THIRD SQUARE WIDTH" HEIGHT="THIRD SQUARE HEIGHT"><IMG SRC="slice3.jpg" WIDTH="THIRD SQUARE WIDTH" HEIGHT="THIRD SQUARE HEIGHT"></TD>
<TD WIDTH="FOURTH SQUARE WIDTH" HEIGHT="FOURTH SQUARE HEIGHT"><IMG SRC="slice4.jpg" WIDTH="FOURTH SQUARE WIDTH" HEIGHT="FOURTH SQUARE HEIGHT"></TD>
</TR>
</TABLE>
The slice numbers I used correspond to this:
-------
|1|2|
|3|4|
-------
Hope this helps! NATE
design@spyderix-designz.com
There's a few tutorials here:
You'll need to register first time, but it's free and doesn't take long.
You'll need to register first time, but it's free and doesn't take long.
- Status
Similar threads
- Locked
- Question
- Locked
- Question