Welcome Guest ( Log In | Register )



2 Pages V   1 2 >  
Reply to this topicStart new topic
> Short "slicing" Tutorial, if you have photoshop...
finaldesign
post Apr 22 2005, 08:19 AM
Post #1


[+] Graphic Designer [+]
Group Icon

Group: Members
Posts: 614
Joined: 6-April 05
From: Croatia
Member No.: 3,666



Ok if you have Photoshop and Dreamweaver and you have no idea how to slice images in photoshop and how to export it to dreamweaver here is a short picture-guided tutorial...

NOTICE: This tutorial will show you only how to slice FLATERNED photoshop image and export it to html and open in Dreamweaver...

Ok here we go...
user posted image

I hope this was understandable... rolleyes.gif cool.gif
Go to the top of the page
 
+Quote Post
nakulgupta
post Apr 22 2005, 09:53 AM
Post #2


Advanced Member
Group Icon

Group: Members
Posts: 173
Joined: 22-March 05
From: Hyderabad,India
Member No.: 3,155



Hey finaldesign...real cool stuff. I always wondered how to do that...Thanks..And the wallpapers on your site are awesome too!!
Go to the top of the page
 
+Quote Post
Maybe Skate Team
post Apr 22 2005, 10:24 AM
Post #3


Member [ Level 2 ]
Group Icon

Group: Members
Posts: 65
Joined: 19-April 05
From: Dirty Jersey Shore
Member No.: 4,152



The last part of the tutorial with the Dreamweaver helped me a lot because I just got it and I am really lost in it. I have to spend some time looking over the features and reading the help file. Anyways this tutorial is great, and it is pretty easy to fallow. Awesome job!
Go to the top of the page
 
+Quote Post
miCRoSCoPiC^eaRt...
post Apr 22 2005, 10:58 AM
Post #4


PsYcheDeLiC dR3aMeR
Group Icon

Group: Admin
Posts: 2,242
Joined: 29-January 05
From: Nakorn Chaisri, Thailand
Member No.: 2,411



great tutorial finaldesign - but it'd be better if you didn't post the whole instruction set as ONE GIANT Image... this post wouldn't have fetched you more than 1 credit - so this goes out as an advice to all of you.

If you're posting a graphics intensive tutorial, make sure you break up your graphics into small blocks - preferably according to each step, and put in a couple of lines of text explanation and then the graphics... step-by-step.. One Giant Image like this wouldn't fetch you even 1 credit... You only get credit if images are used alternately in conjunction with text.
So there... smile.gif
Go to the top of the page
 
+Quote Post
finaldesign
post Apr 22 2005, 10:53 PM
Post #5


[+] Graphic Designer [+]
Group Icon

Group: Members
Posts: 614
Joined: 6-April 05
From: Croatia
Member No.: 3,666



QUOTE(microscopic^earthling @ Apr 22 2005, 12:58 PM)
great tutorial finaldesign - but it'd be better if you didn't post the whole instruction set as ONE GIANT Image... this post wouldn't have fetched you more than 1 credit - so this goes out as an advice to all of you.

If you're posting a graphics intensive tutorial, make sure you break up your graphics into small blocks - preferably according to each step, and put in a couple of lines of text explanation and then the graphics... step-by-step.. One Giant Image like this wouldn't fetch you even 1 credit... You only get credit if images are used alternately in conjunction with text.
So there... smile.gif
*


Ok, I really didn't try to get credits this way, I just wanted to assemble this tut on a fast track, because many people asked me before how I did stuff on my webpage so this is a kind of "fast reply" in form of a tut. Anyway, I'll try to post more smaller images in tutorials later, thanks for the tip. smile.gif
Go to the top of the page
 
+Quote Post
m3ch4
post May 2 2005, 01:22 AM
Post #6


Advanced Member
Group Icon

Group: Members
Posts: 112
Joined: 29-April 05
Member No.: 4,527



Newb question here again -_-'''

But for your table as image that you've created (specifically cells 4, 5 and 6) will text (that you add later within the html code) appear on top of that image? as in...the image is the table's "back drop"?

Also, if the above question proves true, what happens if the amount of text entered with the html becomes too great for the cell? does the cell expand or remain constant? does that screw up the image if it expands? (I'm going to guess that, because you have specific sizes, the cell does nto expand?)
Go to the top of the page
 
+Quote Post
jet
post May 2 2005, 02:47 AM
Post #7


Advanced Member
Group Icon

Group: Members
Posts: 140
Joined: 24-April 05
From: Australia
Member No.: 4,289



There are a few ways you can make text appear on top of the images. The easiest and probably most common way is to use a div with absolute positioning, if you're not sure what i'm talking about, go to http://www.yourhtmlsource.com/stylesheets/...#csspositioning. The other easy way is to make the bit you want your text on one slice, and then in the table instead of <td><img src .. ..></td> put in <td background=... ..>insert the text you want on the image here</td>.

About slicing, there's another way I use which I find easier. I don't like dragging the shapes straight out with the slice tool, because more often than not I get the size wrong. In Photoshop, when your rulers (View => Rulers [i think]) are on, click on the ruler and drag down to create a guide. When you have guides everywhere you want a slice, click the export to Imageready button. In Imageready, there's a menu item called Slices, and under that you should find something called Create Slices From Guides. Of course, you'll probably end with slices you don't want, so with the slice select tool select the ones you want to be one slice only (shift + click), then right click and choose "Combine Slices".
Go to the top of the page
 
+Quote Post
finaldesign
post May 2 2005, 08:29 AM
Post #8


[+] Graphic Designer [+]
Group Icon

Group: Members
Posts: 614
Joined: 6-April 05
From: Croatia
Member No.: 3,666



QUOTE(jet @ May 2 2005, 04:47 AM)
About slicing, there's another way I use which I find easier. I don't like dragging the shapes straight out with the slice tool, because more often than not I get the size wrong. In Photoshop, when your rulers (View => Rulers [i think]) are on, click on the ruler and drag down to create a guide. When you have guides everywhere you want a slice, click the export to Imageready button. In Imageready, there's a menu item called Slices, and under that you should find something called Create Slices From Guides. Of course, you'll probably end with slices you don't want, so with the slice select tool select the ones you want to be one slice only (shift + click), then right click and choose "Combine Slices".
*


This is also another usefull technique... Well done.
Go to the top of the page
 
+Quote Post
kraizii88z
post May 5 2005, 05:18 AM
Post #9


Advanced Member
Group Icon

Group: Members
Posts: 143
Joined: 17-September 04
From: Seattle::WA
Member No.: 670



...Great tutorial. I like the use of images in every step--very good.
Go to the top of the page
 
+Quote Post
kevinparsons
post Jun 14 2005, 08:03 AM
Post #10


Newbie [ Level 2 ]
Group Icon

Group: Members
Posts: 20
Joined: 14-June 05
Member No.: 6,206



Is it better to edit flash templates with photoshop or with flash mx? If anyone knows how to make drop down flash menus I could sure use some help. I have been looking for days. I still cant quite figure everything out about it.
Go to the top of the page
 
+Quote Post

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Creating A Webpage Using Photoshop(0)


 



- Lo-Fi Version Time is now: 14th October 2008 - 04:57 AM