Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Enthusiast Zone > Art & Graphic Design > Have you ever created a website in Photoshop? Please tell me how you did it?

Have you ever created a website in Photoshop? Please tell me how you did it?
Thread Tools
Veltliner
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 23, 2008, 01:00 PM
 
I got tired of the restrictions of iWeb (and that you can't encrypt your e-mail address against bots and spyders), and would like to do my next website in Photoshop.

You can do this using the slice tool.

Just what exactly is the process?

QUESTIONS:

1. How do you create an index, and the different page urls, so they are together in one site? iWeb does this for you.

2. How do you put in links like an e-mail link, and a link to other pages of your site?

3. What's the recommended document width? Even though Mac is 100% widescreen now, there are still plenty of monitors around that aren't, especially on the dark (PC) side. Is 1024 the best width?


I have been trying to get this info for some time, but couldn't get a decent document so far. I'd be grateful on detailed info on this matter.

Thanks!
     
Thorzdad
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
Jan 23, 2008, 02:48 PM
 
You use Photoshop to create the images and graphics for a website. You use other software to write the html (the index page and other internal pages.) I use GoLive or Dreamweaver (because I'm not enough of an html stud to use TextEdit, LOL)

Many people use Photoshop to design the entire web page. You can certainly do this, but I wouldn't use it to set blocks of text. I'd do that in the html.

Many people base a website on a 1024x768 layout, but there's no hard rule about that. Some still use the old 800x600 measure. Still others make it whatever size suits their fancy.
When I want your opinion,-
I'll read it in your entrails
     
peeb
Addicted to MacNN
Join Date: Mar 2006
Status: Offline
Reply With Quote
Jan 23, 2008, 03:04 PM
 
Decent websites should look ok on most common page sizes.
     
Macola
Mac Elite
Join Date: Mar 2001
Location: Madison, WI
Status: Offline
Reply With Quote
Jan 23, 2008, 03:04 PM
 
As Thorzdad said, you can use Photoshop for the graphics, but you can't really design a website in it. Well, you can, but it would be a disaster.

You have lots of web design software options, some of which are free like Nvu. Aside from that, I'd recommend learning HTML and CSS.
I do not like those green links and spam.
I do not like them, Sam I am.
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Jan 23, 2008, 04:14 PM
 
our recent statistics said 1024 was a good max width.
     
iranfromthezoo
Senior User
Join Date: Feb 2005
Location: Mississippi
Status: Offline
Reply With Quote
Jan 23, 2008, 06:02 PM
 
Originally Posted by andi*pandi View Post
our recent statistics said 1024 was a good max width.
really? we are still being told the 800 x 600 gig...although I don't follow that route a lot.
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 23, 2008, 08:53 PM
 
Originally Posted by Macola View Post
As Thorzdad said, you can use Photoshop for the graphics, but you can't really design a website in it. Well, you can, but it would be a disaster.

You have lots of web design software options, some of which are free like Nvu. Aside from that, I'd recommend learning HTML and CSS.
I know, but I don't have the time to do that.

What about the slice tool everybody is raving about to create a full website in Photoshop, using what was Imageready (which became Fireworks) in CS2?

What do you think about this article?

Design a Website In Photoshop [Software Tutorials]
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 23, 2008, 08:56 PM
 
Originally Posted by Thorzdad View Post
You use Photoshop to create the images and graphics for a website. You use other software to write the html (the index page and other internal pages.) I use GoLive or Dreamweaver (because I'm not enough of an html stud to use TextEdit, LOL)

Many people use Photoshop to design the entire web page. You can certainly do this, but I wouldn't use it to set blocks of text. I'd do that in the html.

Many people base a website on a 1024x768 layout, but there's no hard rule about that. Some still use the old 800x600 measure. Still others make it whatever size suits their fancy.
How do you get your Photoshop design into Dreamweaver? I thought you had to start your design from scratch there.
     
KeriVit
Professional Poster
Join Date: Mar 2003
Location: In the South
Status: Offline
Reply With Quote
Jan 23, 2008, 09:10 PM
 
Just export for web as a jpeg and it makes the html
     
hart
Senior User
Join Date: Sep 2002
Status: Offline
Reply With Quote
Jan 24, 2008, 05:56 PM
 
Originally Posted by KeriVit View Post
Just export for web as a jpeg and it makes the html
?? where is this option? I've done Save for Web which is for optimization but Export doesn't seem to have a "for web" option.
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Jan 24, 2008, 06:04 PM
 
(I think she was joking)

but really, if you slice up your image and then hit save for web, you will get a dialogue where you can select "images" or "images and html".
     
hart
Senior User
Join Date: Sep 2002
Status: Offline
Reply With Quote
Jan 24, 2008, 06:23 PM
 
oh, ah...I have about 10 tabs running so maybe I wasn't paying that close attention. I'll have to look at that slice/save for web window a bit closer though. I wasn't noticing any HTML things in there.

I've actually been trying to figure the optimal work path among the various components in CS3 and I'd be willing to believe there was some whole option I'd missed. I'm still stumped on how/why to use Fireworks even tho I tramped through the Help file rather extensively.

I'm trying to figure the easiest way to help a group of middle schoolers to create a web site and I was trying to go in the opposite direction, working backwards from Dreamweaver and coding to something closer to what I assume iWeb is like.
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 25, 2008, 01:30 AM
 
Originally Posted by KeriVit View Post
Just export for web as a jpeg and it makes the html
Could you provide a step by step-guide? That would be very helpful.
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 25, 2008, 01:31 AM
 
Generally, if anybody knows of any documents on the web, or books, downloadable articles (both free and for purchase), please post it here.
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 25, 2008, 03:04 PM
 
Nobody can give factual info on this theme?
     
KeriVit
Professional Poster
Join Date: Mar 2003
Location: In the South
Status: Offline
Reply With Quote
Jan 25, 2008, 04:03 PM
 
Originally Posted by andi*pandi View Post
(I think she was joking)

but really, if you slice up your image and then hit save for web, you will get a dialogue where you can select "images" or "images and html".
Well I was being a bit facetious, but yes- you described what I was talking about.

I'm a print person, taking my first web design course. Now that would be where my sarcasm comes from. Basically, we have been handed a book and told to read it.
     
KeriVit
Professional Poster
Join Date: Mar 2003
Location: In the South
Status: Offline
Reply With Quote
Jan 25, 2008, 04:12 PM
 
Originally Posted by Veltliner View Post
Could you provide a step by step-guide? That would be very helpful.
OK, here's what I was told, web people, feel free to dispute.

Let's say you have created the site- just the homepage for instance in Photoshop.

Put that file in a new folder. Make another folder within this folder named "Images"

Divide it with guide paying specific attention to where you might divide rollovers and/or tabs.

When you've got all the guides done, click on the slice tool- (the Xacto knife-looking button.)

At the top in the menu bar, choose "Slice From Guides"

Go to File> Save for Web and Devices

Choose JPEG (for mine anyway) and optimize and hit Save.

A dialog box comes up. It should be "HTML and Images" Save.

Now, there will be an html file in the folder.

Open this up in Dreamweaver an go from there to build your rollovers and such.

Is that what you want?
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jan 25, 2008, 04:12 PM
 
Originally Posted by Veltliner View Post
I know, but I don't have the time to do that.

What about the slice tool everybody is raving about to create a full website in Photoshop, using what was Imageready (which became Fireworks) in CS2?

What do you think about this article?

Design a Website In Photoshop [Software Tutorials]
To be blunt, Imageready/Photoshop slice generated websites are horrible... I've had to recode and decipher several. You'd honestly be just about as well off with iWeb.

Learn HTML and CSS. No point and click WYSIWYG shortcuts, just do it.
     
silver
Dedicated MacNNer
Join Date: Jul 2000
Location: Bunch Of Islands in The Pacific
Status: Offline
Reply With Quote
Jan 25, 2008, 06:08 PM
 
I agree with besson3c, there's no short cuts.
 MBP 17" 2.16ghz, ATI x1600 256, 100GBHD, 2GB ram, 23"AppleLCD
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 26, 2008, 02:23 AM
 
Originally Posted by KeriVit View Post
OK, here's what I was told, web people, feel free to dispute.

Let's say you have created the site- just the homepage for instance in Photoshop.

Put that file in a new folder. Make another folder within this folder named "Images"

Divide it with guide paying specific attention to where you might divide rollovers and/or tabs.

When you've got all the guides done, click on the slice tool- (the Xacto knife-looking button.)

At the top in the menu bar, choose "Slice From Guides"

Go to File> Save for Web and Devices

Choose JPEG (for mine anyway) and optimize and hit Save.

A dialog box comes up. It should be "HTML and Images" Save.

Now, there will be an html file in the folder.

Open this up in Dreamweaver an go from there to build your rollovers and such.

Is that what you want?
Thanks. Except that I won't buy Dreamweaver.
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Jan 26, 2008, 02:27 AM
 
Originally Posted by besson3c View Post
To be blunt, Imageready/Photoshop slice generated websites are horrible... I've had to recode and decipher several. You'd honestly be just about as well off with iWeb.

Learn HTML and CSS. No point and click WYSIWYG shortcuts, just do it.
Stubborn as hell I am, but I have the severe impression that you are right.

Today I'm going to do a first research on books on mark-up language on Amazon.

(By the way: if you can recommend one, please do so).

Wouldn't you rather recommend buying an XHTML book? My first researches lead me to a few statements, that HTML (even though the similarities are huge) is on the way to be replaced by XHTML?
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Jan 26, 2008, 08:50 AM
 
If you know HTML, you will be fine with HTML in XHTML documents. The X in XHTML stands for "XML" which this doctype also supports, but not many people are going with XML yet. The differences between HTML and HTML in XHTML documents is minor, like you said. The take home message is that I would probably go with XHTML, but all of your modern HTML books and resources are still very much applicable.
     
Thorzdad
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
Jan 26, 2008, 10:25 AM
 
Originally Posted by besson3c View Post
...Learn HTML and CSS. No point and click WYSIWYG shortcuts, just do it.
I agree with Besson that you really need to understand HTML (at the very least) to create a passable website.
Having said that, I really think that, for a beginner, using one of the WYSIWYG editors (Dreamweaver, GoLive, etc) can be a big help. I used them to download complete webpages. Then I could study the code in detail, dissect it, edit it, and see immediately what changes were made and how those changes affected the structure. It was a great learning tool that gave me immediate feedback and really helped me visualize internally, the structures of HTML and CSS. Today, I rarely leave the source-code panel, because I know what the changes I'm making will do.

Yes, if you let the programs write the code, they'll tend to muck it up with proprietary tags and whatnot. However, the more you learn, the easier it becomes to avoid these things and output good, clean, valid code with these programs.
When I want your opinion,-
I'll read it in your entrails
     
KeriVit
Professional Poster
Join Date: Mar 2003
Location: In the South
Status: Offline
Reply With Quote
Jan 26, 2008, 02:08 PM
 
It would be nice if my professor passed along even half as much info as you guys.
     
iRabbit
Fresh-Faced Recruit
Join Date: Jan 2008
Status: Offline
Reply With Quote
Feb 7, 2008, 06:51 PM
 
Originally Posted by iranfromthezoo View Post
really? we are still being told the 800 x 600 gig...although I don't follow that route a lot.
I just recently switched to doing all my site design at 960 max (1024 but allowing for browser screen real estate). Recent stats I follow were that only like 14% still view at 800x600 or less. If your audience is less technical you could air on the safe-side, but if your audience is the type to likely keep their computer up-to-date, go with 960.
www.ModBookArt.com - www.ModBookGallery.com - www.ModBookForum.com
iStuff: MacPro, MacBook, MacMini, G5, G3, iPhone, iPod Classic and a partridge in a pear tree
ModBook coming!
     
Veltliner  (op)
Mac Elite
Join Date: Nov 2006
Location: here
Status: Offline
Reply With Quote
Feb 8, 2008, 09:30 PM
 
Originally Posted by iRabbit View Post
I just recently switched to doing all my site design at 960 max (1024 but allowing for browser screen real estate). Recent stats I follow were that only like 14% still view at 800x600 or less. If your audience is less technical you could air on the safe-side, but if your audience is the type to likely keep their computer up-to-date, go with 960.
I've heard of 1024, but 960 width?
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Feb 8, 2008, 10:21 PM
 
Most people who can only go up to 1024 px will not have their browser open to its max width, therefore you knock some off the max to prevent from having to scroll. 960 px is a reasonable width for supporting a min width of 1024 px.
     
alex_kac
Grizzled Veteran
Join Date: Aug 2002
Location: Central Texas
Status: Offline
Reply With Quote
Feb 10, 2008, 10:44 PM
 
What about mobile browsers? This kills it. Its stupid to make a website conform to specific screen sizes. I don't care if I have a 1920x1280 screen - I don't want web pages to fill it. I hate that assumption.

Write your HTML with CSS properly and do it RIGHT.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Feb 11, 2008, 12:46 AM
 
Originally Posted by alex_kac View Post
What about mobile browsers? This kills it. Its stupid to make a website conform to specific screen sizes. I don't care if I have a 1920x1280 screen - I don't want web pages to fill it. I hate that assumption.

Write your HTML with CSS properly and do it RIGHT.
What is your point? What width should pages be developed at?
     
himself
Mac Elite
Join Date: Jan 2002
Location: Live at the BBQ
Status: Offline
Reply With Quote
Feb 11, 2008, 06:43 AM
 
Originally Posted by alex_kac View Post
What about mobile browsers? This kills it. Its stupid to make a website conform to specific screen sizes. I don't care if I have a 1920x1280 screen - I don't want web pages to fill it. I hate that assumption.

Write your HTML with CSS properly and do it RIGHT.
For mobile platforms, create a CSS file for that platform and assign to the proper profile, in this case "mobile." It is possible to design one page to support multiple platforms and profiles, you know.
"Bill Gates can't guarantee Windows... how can you guarantee my safety?"
-John Crichton
     
Oisín
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status: Offline
Reply With Quote
Feb 11, 2008, 10:28 PM
 
Originally Posted by alex_kac View Post
What about mobile browsers? This kills it. Its stupid to make a website conform to specific screen sizes. I don't care if I have a 1920x1280 screen - I don't want web pages to fill it. I hate that assumption.

Write your HTML with CSS properly and do it RIGHT.
If you “do it RIGHT”, the mobile phone will never see the same styles a monitor will. That’s why they invented the media attribute.

As for whether or not you want the page to “fill” the screen, that’s a matter of personal taste. Some people like fluid designs that fill the screen and float when windows are resized; others like fixed designs that remain the same absolute size regardless of window size or screen resolution. There is no perfect solution.
     
l008com
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status: Offline
Reply With Quote
Mar 7, 2008, 06:06 AM
 
I use tables.

... waits for the collective *gasp* to finish ...

Which means nearly all of my web pages are super flexible, down to is narrow as say 300 or 400 pixels, and virtually unlimited width. You can do this with CSS too but it will take you days to get the code working just right. Do it with a table and you'll be done in A minute. :-)
     
Oisín
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status: Offline
Reply With Quote
Mar 7, 2008, 07:18 AM
 
It’s a matter of what you’re used to. Takes me just as long (longer, actually) to get a table-based design to look properly as I want as it does for a CSS-based design.

And there’s the part about older browsers rendering many table constituents wildly differently.
     
l008com
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status: Offline
Reply With Quote
Mar 7, 2008, 07:37 AM
 
Tables are supported much further back than CSS.
     
andi*pandi
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Mar 7, 2008, 03:31 PM
 
how far back are you willing to go? do you have lots of clients using netscape 4?
     
l008com
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status: Offline
Reply With Quote
Mar 7, 2008, 03:33 PM
 
My point was that netscape 4 has very little CSS support but fine table support.
     
l008com
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status: Offline
Reply With Quote
Mar 7, 2008, 03:34 PM
 
It drove me nuts when versiontracker went to a CSS layout because I used to be working on OS 9 machines, and the only browser was Netscape 4, and trying to get to version tracker to download something different was a real pain in the ass.
     
Thorzdad
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status: Offline
Reply With Quote
Mar 7, 2008, 04:45 PM
 
Originally Posted by Oisín View Post
...And there’s the part about older browsers rendering many table constituents wildly differently.
Let's be fair, though. If you are dealing with a browser that is so old that it can't handle tables correctly, it's highly doubtful that they'll be able to handle CSS any better...if at all.

There's no shame in using tables. I use 'em. They're simple and reliable.
When I want your opinion,-
I'll read it in your entrails
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 03:31 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,