|
|
Have you ever created a website in Photoshop? Please tell me how you did it?
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
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!
|
|
|
|
|
|
|
|
|
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Mar 2006
Status:
Offline
|
|
Decent websites should look ok on most common page sizes.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2001
Location: Madison, WI
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status:
Offline
|
|
our recent statistics said 1024 was a good max width.
|
|
|
|
|
|
|
|
|
Senior User
Join Date: Feb 2005
Location: Mississippi
Status:
Offline
|
|
Originally Posted by andi*pandi
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Originally Posted by Macola
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]
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Originally Posted by Thorzdad
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.
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Mar 2003
Location: In the South
Status:
Offline
|
|
Just export for web as a jpeg and it makes the html
|
|
|
|
|
|
|
|
|
Senior User
Join Date: Sep 2002
Status:
Offline
|
|
Originally Posted by KeriVit
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.
|
|
|
|
|
|
|
|
|
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status:
Offline
|
|
(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".
|
|
|
|
|
|
|
|
|
Senior User
Join Date: Sep 2002
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Originally Posted by KeriVit
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Generally, if anybody knows of any documents on the web, or books, downloadable articles (both free and for purchase), please post it here.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Nobody can give factual info on this theme?
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Mar 2003
Location: In the South
Status:
Offline
|
|
Originally Posted by andi*pandi
(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.
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Mar 2003
Location: In the South
Status:
Offline
|
|
Originally Posted by Veltliner
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?
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Originally Posted by Veltliner
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.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Jul 2000
Location: Bunch Of Islands in The Pacific
Status:
Offline
|
|
I agree with besson3c, there's no short cuts.
|
MBP 17" 2.16ghz, ATI x1600 256, 100GBHD, 2GB ram, 23"AppleLCD
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Originally Posted by KeriVit
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Originally Posted by besson3c
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?
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status:
Offline
|
|
Originally Posted by besson3c
...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.
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Mar 2003
Location: In the South
Status:
Offline
|
|
It would be nice if my professor passed along even half as much info as you guys.
|
|
|
|
|
|
|
|
|
Fresh-Faced Recruit
Join Date: Jan 2008
Status:
Offline
|
|
Originally Posted by iranfromthezoo
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.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Nov 2006
Location: here
Status:
Offline
|
|
Originally Posted by iRabbit
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?
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Aug 2002
Location: Central Texas
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Originally Posted by alex_kac
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?
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Jan 2002
Location: Live at the BBQ
Status:
Offline
|
|
Originally Posted by alex_kac
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
|
|
|
|
|
|
|
|
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status:
Offline
|
|
Originally Posted by alex_kac
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.
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status:
Offline
|
|
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. :-)
|
|
|
|
|
|
|
|
|
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status:
Offline
|
|
Tables are supported much further back than CSS.
|
|
|
|
|
|
|
|
|
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status:
Offline
|
|
how far back are you willing to go? do you have lots of clients using netscape 4?
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status:
Offline
|
|
My point was that netscape 4 has very little CSS support but fine table support.
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Jan 2000
Location: Stoneham, MA, USA
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Moderator
Join Date: Aug 2001
Location: Nobletucky
Status:
Offline
|
|
Originally Posted by Oisín
...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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|