HighDots Forums  

making a web page out of a photoshop image

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)


Discuss making a web page out of a photoshop image in the Macromedia Dreamweaver forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Navek2000
 
Posts: n/a

Default making a web page out of a photoshop image - 11-23-2004 , 08:22 PM






I'm new to DW, and i can't figure out how to take a page that i've made in
Photoshop and then add links to it in DW. I've made the table on the page but i
don't know what i'm supposed to do next. How do you add the image??? please
help!!! thank you.

Navek


Reply With Quote
  #2  
Old   
dillon000
 
Posts: n/a

Default Re: making a web page out of a photoshop image - 11-23-2004 , 08:25 PM






just click the little button with the tree on it on the insert window...

dillon

Reply With Quote
  #3  
Old   
Tim Gallant
 
Posts: n/a

Default Re: making a web page out of a photoshop image - 11-23-2004 , 08:35 PM




"dillon000" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:
just click the little button with the tree on it on the insert window...
Yeah, but surely you don't want to create a whole page out of a Photoshop
image. That would be one big file.

Unless I'm misunderstanding the intention here.

tim




Reply With Quote
  #4  
Old   
Casey007
 
Posts: n/a

Default Re: making a web page out of a photoshop image - 11-23-2004 , 09:06 PM



Hmmmm, I don't use Photo Shop to make a web page. I use it to create photo
elements, which I then place on a html web page in Dreamweaver. Best to use
your photo shop to use the function 'save for web' . This will save your art
image as a gif which you should put in your site 'images' file.

Then once in Dreamweaver, you can add links to individual elements. Or you can
go further and create hot spots within the image for linking.


Reply With Quote
  #5  
Old   
Peadge
 
Posts: n/a

Default Re: making a web page out of a photoshop image - 11-23-2004 , 09:19 PM



What you want to do in Photoshop is to slice your image into smaller pieces.
If your main navigation links are graphics, you will want these to be
separate "buttons". What I do is drag out guides in Photoshop to define
where I want the slices to be made. I usually have some graphic links for
the main navigation, a main graphic header and an area for the content. The
header may change slightly with each page so I slice it accordingly so the
parts that are the same can be used on each page. Once I have my guides set
up, I grab the slice tool and click on the Slices from Guides button in the
tool bar across the top. Then I change to the Slice Select tool and double
click on each slice to name it. If needed, I will drag a slice to make it
larger, overlapping several other slices. This is usually done with the
content slice, since it often is made up of several smaller slices. I then
delete these smaller slices with a right-click and choice. I usually have
two layers in my Photoshop file, the second one is for the rollovers.

I then "save for web", saving as both an HTML file and images. I then make
visible the rollover layer and rename the slices with _over added to the end
of each name. I save again and this adds the rollovers to the image folder.
I then open the HTML file in Dreamweaver, delete the main content graphic
and change the background color to the same color as the slice just deleted.
I select a Nav link, delete it and instead insert the rollovers. From here
on, it's basic Dreamweaver stuff. However, I do save the Photoshop files in
case further modification is needed in the future. Usually, my Photoshop
files are layered and created at a higher resolution. I save as a PNG, open,
change to web resolution which, through planning, also makes it the desired
dimensions. A tiny bit of Sharpen >Unsharp Mask is usually prudent when
changing sizes. I do this with two copies, one for the main look and one for
the rollovers. These two PNGs end up as separate layers in the same sliced
file.

Peadge :-)


"Navek2000" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:
I'm new to DW, and i can't figure out how to take a page that i've made in
Photoshop and then add links to it in DW. I've made the table on the page
but i
don't know what i'm supposed to do next. How do you add the image???
please
help!!! thank you.

Navek




Reply With Quote
  #6  
Old   
Nadia *TMM*
 
Posts: n/a

Default Re: making a web page out of a photoshop image - 11-23-2004 , 09:19 PM



You need to slice up your PS image and export the gifs or jpgs to a folder
in your defined DW site.

You would then use these images (placed into table cells or laryers (divs)
if you are familiar with the way they work) to create your web page. Also
make sure you are working in design/code view not layout mode!
Do not use the exported html feature from your graphics program to write
your page for you - you will end up with a lot more headaches.

Once your page is laid out you then add your links as needed.

--
Nadia
TMM Volunteer for Dreamweaver
---------------
http://www.DreamweaverResources.com
Free Templates | Free Nav Bar Sets
Dropdown Menu Designs | CSS Layouts
Tutorials | Ecommerce - YVStore | SEO Articles|
------------------------------------------------
http://macromedia.com/devnet/mx/dreamweaver/
http://www.macromedia.com/support/dreamweaver/technotes.html
-----------------

"Navek2000" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:
I'm new to DW, and i can't figure out how to take a page that i've made in
Photoshop and then add links to it in DW. I've made the table on the page
but i
don't know what i'm supposed to do next. How do you add the image???
please
help!!! thank you.

Navek




Reply With Quote
  #7  
Old   
Navek2000
 
Posts: n/a

Default Re: making a web page out of a photoshop image - 11-24-2004 , 04:16 PM



ok, sorry i'm new to this, so i go into Photoshop and save the different
elements of the page as different documents, and then when i get back into DW,
i open those up and use different layers, and then put my specific links on
those layers? Now is that way better then using hotspots? or should i use both?

Navek


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.