Short "slicing" Tutorial - if you have photoshop...

Pages: 1, 2
free web hosting

Read Latest Entries..: (Post #12) by iGuest on Jun 21 2008, 11:23 PM. (Line Breaks Removed)
Replying to finaldesignBrilliant! thank you so much for this tutorial, very appreicated from this end - BTW Greetings from New Zealand :0)-reply by firstlove
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Free Web Hosting > Computers & Tech > How-To's and Tutorials > Websites and Web Designing

Short "slicing" Tutorial - if you have photoshop...

finaldesign
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

Reply

nakulgupta
Hey finaldesign...real cool stuff. I always wondered how to do that...Thanks..And the wallpapers on your site are awesome too!!

Reply

Maybe Skate Team
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!

Reply

miCRoSCoPiC^eaRthLinG
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

Reply

finaldesign
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

 

 

 


Reply

m3ch4
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?)

Reply

jet
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".

Reply

finaldesign
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.

Reply

kraizii88z
...Great tutorial. I like the use of images in every step--very good.

Reply

kevinparsons
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.

Reply

Latest Entries

iGuest
Replying to finaldesign

Brilliant! thank you so much for this tutorial, very appreicated from this end - BTW Greetings from New Zealand :0)

-reply by firstlove

Reply

iGuest
Great tutorial. I tried it and when I link it to other html page, it creates white thin lines between the slices. Is there anyway to avoid this or get rid of it? thanks.

-prana

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Pages: 1, 2
Recent Queries:-
  1. dreamweaver slicing tutorial - 6.31 hr back. (1)
  2. slicing with imageready tutorial - 6.74 hr back. (1)
  3. easy way to slice in photoshop for dreamweaver - 7.16 hr back. (1)
  4. how to export as div photoshop - 9.86 hr back. (1)
  5. photoshop slices into dreamweaver tutorial delete image - 16.46 hr back. (1)
  6. imageready slices tutorial - 19.18 hr back. (1)
  7. tutorial, exporting photoshop webpage to dreamweaver - 20.80 hr back. (1)
  8. html slicing tutorials - 46.25 hr back. (1)
  9. how to get rid of slice lines photoshop - 46.42 hr back. (1)
  10. 10499034 - 57.49 hr back. (1)
  11. photoshop slice dreamweaver div - 67.50 hr back. (1)
  12. photoshop slicing tutorial - 87.90 hr back. (1)
  13. after slicing template making link in dreamweaver i got white lines - 116.23 hr back. (1)
  14. div slice tutorial - 142.73 hr back. (1)
Similar Topics

Keywords : short, slicing, tutorial, photoshop

  1. Creating A Webpage Using Photoshop
    (0)


      Looking for short, slicing, tutorial, photoshop

Searching Video's for short, slicing, tutorial, photoshop
advertisement




Short "slicing" Tutorial - if you have photoshop...



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE