|
| |
|
|
pacific77
Posts: 34
Joined: 11/30/2002
From: Coos Bay , Oregon
Status: offline
 |
RE: Designing website as a graphic - any hints? - 12/9/2002 7:09:00
yes , these posts would make a great article , I would like to read it easier , could any of this (even basics) be done in photoshop elements . I should have upgraded to photoshop 6. for 340$ when I bought my computer it had elements for free already installed
_____________________________
if you choose not to decide you still have made a choice
|
|
|
|
maduko
Posts: 168
From: Tulsa OK USA
Status: offline
|
RE: Designing website as a graphic - any hints? - 1/13/2003 17:29:58
A size of 800 x 600 is pretty universal. Foreground or background doesn' t really matter in Photoshop. You can do it all in Photoshop if it' s a recent version. Make your text for headings and menus in Photoshop, allot larger areas for HTML text.
Image Ready is bundled with Photoshop beginning around v5. It makes it super easy to do rollovers because it generates the HTML and Javascript in operation.
Lots of designer types make web sites this way because they freak out when the text wraps in a different place. Printed pages are always the same size.
One advantage to the approach is making initial designs. You can very quickly put together a couple of different ideas to show a client. Upload one single JPEG image of each idea and send them links. You' re not out the time to build actual web pages if they don' t like it. If they do- jump in and start slicing.
HTH
| |
|
|
|
rumblepup
Posts: 116
Joined: 1/29/2003
Status: offline
|
RE: Designing website as a graphic - any hints? - 1/30/2003 10:30:49
800 X 600 is beyond the viewable area of most, if not all, web browsers. I found this out the hard way after making websites with Photoshop and the layout would go way out past the left border, creating a bottom scroll bar. For 800 X 600 screen resolutions, this is a problem. Obviously not for larger resolutions, but as designers, we' re trying to desing viewability and function for cross media.
SSSOOOOO, I found that the viewable screen size in IE is 783px X 438px at 800 X 600 resolution. I forgot exactly what is is in Netscape, Opera and Mozilla, but it is very similar. If I' m creating a left aligned or center aligned website, and I' m starting in Photoshop, I go for 760 X 430.
As for ImageReady, I have found that FP can' t (or won' t, it' s so picky) handle the complex rollovers of ImageReady. Either that or I haven' t figured it out yet. But it DOES make cool animated gif' s that are really small, so your animated effect has to be introduced into Frontpage as a mouse over. Other than that, it takes some scripting, but you can use " on, over, off, on-click" with the ImageReady gif, just be ready to type.
_____________________________
Outdoor Furniture Cushions
| |
|
|
|
cemooreart
Posts: 42
Joined: 12/21/2001
From: Memphis TN USA
Status: offline
|
RE: Designing website as a graphic - any hints? - 3/6/2003 1:28:53
I think someone has problelly helped you with this problem but if you have any questions please feel free to ask, I taught myself with a few hints and mastered it to a degree.
Take Care
| |
|
|
|
HomerBohn
Posts: 101
From: Montgomery Village, MD, USA
Status: offline
|
RE: Designing website as a graphic - any hints? - 3/12/2003 12:55:14
i' ve started to learn the concepts of this type of approach...
i did one site entirely in PhotoShop, diced it up and put into FrontPage.
http://www.lssi.com/pirnie
i took the primative approach to those mouseovers...cut those out individually, did layers and saved them.
take a peek at the source code and you' ll see that i just took a large image and sliced it up with the crop tool and saved the images.
_____________________________
Bohnzie
Making easy HTML tasks seem impossible since 1979
| |
|
|
|
rumblepup
Posts: 116
Joined: 1/29/2003
Status: offline
|
RE: Designing website as a graphic - any hints? - 3/13/2003 0:55:28
quote:
i' ve started to learn the concepts of this type of approach...
i did one site entirely in PhotoShop, diced it up and put into FrontPage.
http://www.lssi.com/pirnie
i took the primative approach to those mouseovers...cut those out individually, did layers and saved them.
take a peek at the source code and you' ll see that i just took a large image and sliced it up with the crop tool and saved the images.
HomerBohn
Or is it Mr. Bohn? James HomerBohn.
Sorry, couldn' t resist.
I saw the site.
Very Cool.
One question though. Why did you make the text images instead of HTML text. It' s not loading very slow now, in fact it' s pretty fast at 56k, but imagine how much faster it would be in straight up HTML text.
I' m a big supporter of maintaining a consistent look, especially when we' re dealing with corporate image. If you gotta, ...you gotta. What can we do? But usability has got to come into play. And if someone can' t read your text because they are images, and they can' t resize the text in their browser, what happens next?
Anarchy! I say.
The following is a quickie site I designed using Photoshop and ImageReady
http://www.amtextinc.com
AND I finished it off, HTML Text, image effects, and FLASH in FrontPage.
Other that, your site LOOKED GREAT when it was all loaded, just the rollover effects take a second or two to load in at 56k.
_____________________________
Outdoor Furniture Cushions
| |
|
|
|
HomerBohn
Posts: 101
From: Montgomery Village, MD, USA
Status: offline
|
RE: Designing website as a graphic - any hints? - 3/13/2003 11:36:40
quote:
I' m a big supporter of maintaining a consistent look, especially when we' re dealing with corporate image. If you gotta, ...you gotta. What can we do? But usability has got to come into play. And if someone can' t read your text because they are images, and they can' t resize the text in their browser, what happens next?
It' s funny you mention this...because I was given the project to take an image (that the company purchased before talking to me or the other web savvy guy in the office) and make it into a complete site. At first, I was doing all text and imagery in PhotoShop...then hit the brakes and said this is crazy...so I did HTML text instead of photoshop text...had to break up the images a bit more, but in the end, I think it looks fine.
Once I get it public, I' ll leave the link in the Site Critique...
btw, I' ll probably be redoing that site with HTML text soon...just haven' t had the time to do it yet...
_____________________________
Bohnzie
Making easy HTML tasks seem impossible since 1979
| |
|
|
|
CopterDoc
Posts: 48
Joined: 4/17/2003
Status: offline
|
RE: Designing website as a graphic - any hints? - 9/4/2003 17:20:10
An alternative that is both affordable and easy to use/learn is Uleads Smart Saver Pro.
http://www.ulead.com/ssp/runme.htm
They provide tutorials also.
I've used it textensively and creating rolovers is a snap.
_____________________________
The difference between ignorance and apathy? I don' t know and I don' t care.
I appreciate a no-spin zone but I need spin to fly... (;->)
| |
|
|
|
vision2000
Posts: 530
From: USA
Status: offline
|
RE: Designing website as a graphic - any hints? - 9/12/2003 14:09:43
Any of you designed a site in Fireworks?
I use it extensively with it's integration with DW
Question:
When you have designed your whole page what do you do to add text? - (do it within FW or PS) or cut out the images and add text in your fav editor?
How do you add nav buttons within the image created - use hotspots on the image? Can you create rollovers on the image?
Won't the page be slow loading when creating it in FW - how do you avoid this?
Thanks,
Herman
| |
|
|
|
adacas
Posts: 13
Joined: 9/23/2003
Status: offline
|
RE: Designing website as a graphic - any hints? - 9/29/2003 23:11:40
I have a question. How do you get your web page off of imageready and on to frontpage? I have yet to figure this out. I have tried to just paste the background as a background and sticking the buttons on top but that didn't work too well. Did you just use html or something else and if you did how did you write it.
| |
|
|
|
GoDario27
Posts: 232
Joined: 12/26/2001
From: Barberton OH USA
Status: offline
|
RE: Designing website as a graphic - any hints? - 10/29/2003 11:27:22
I use MM Fireworks to build my sites (example = www.bfis.com).
In the example linked above, the whole page is not a graphic, but rather just the top of the main frame. However, it could be done for the whole page easy enough.....
- I design the graphic in FW, and use the "slice tool" to slice it up into sections.
- Then, I can create mouse-overs by creating another layer (I usually copy my initial layer and then change the copied layer to the mouse-over look I want.
- I can then double-click on a slice and it will bring up the "object (slice)" toolbox, where I can make it a hotspot (add a link, target frame, alt text, etc.) Note, if you add a link - you'll want to make it "relative" to where the html page containing this graphic will "live" in your website.
- I can also turn on the "behaviors" toolbox and assign behaviors, such as mouse-over and mouse-out, etc.
- I then select all my slices and do "file/export special/selected slice"....
- From there, I can (under html) choose either FP or DW
This will export each individual slice (from each layer) and also create the html file that contains all the code to piece them all back together seamlessly with links, mouse-overs, etc. Of course, you could do it all manually once you get to FP or DW, but why when FW does it for you?
FW has a *great* tutorial on how to do this under the Help menu.
If anyone has any questions, I'd be glad to assist...
_____________________________
"Thousands of years ago, cats were worshipped as gods. Cats have never forgotten this." -- Anonymous
| |
|
|
|
GoDario27
Posts: 232
Joined: 12/26/2001
From: Barberton OH USA
Status: offline
|
RE: Designing website as a graphic - any hints? - 10/29/2003 11:35:28
quote:
Question:
When you have designed your whole page what do you do to add text? - (do it within FW or PS) or cut out the images and add text in your fav editor?
This is what I do...I set the slice, that is now one cell in a table (in the html file), to be the "background of the cell". I can then type in the cell as need be and it still stays seemless with the other slices that are just a graphic in a cell.
See the Computer Services and IT page for (sort of) an example....I put "Check your project status!" in the background of the cell and "User Name, PW, the boxes and Go" directly in the cell.
~~Yeah, and it can get rather slow loading, you have to keep an eye out and use the lowest rez you can get away with.
| |
|
|
|
Flex
Posts: 28
Joined: 9/11/2003
From: Fraser, MI
Status: offline
|
RE: Designing website as a graphic - any hints? - 11/17/2003 1:46:39
Gail:
I haven't learned how to do "slicing" as of yet, but there is a tutorial at www.templatemonster.com .
Go under their tutorials and you may have to download a template and then follow along step by step. I hope this helps some and when I run across more suggestions/answers I'll send them your way.
Flex
| |
|
|
|
jenjen1018
Posts: 34
Joined: 12/11/2003
Status: offline
|
RE: Designing website as a graphic - any hints? - 12/12/2003 15:59:55
i just asked a question before reading yours and realized you worded yours a whole lot better!heh, thats exactly what i was wondering.
| |
|
|
|
Nigel
Posts: 377
Joined: 7/24/2002
From: Wirral - UK
Status: offline
|
RE: Designing website as a graphic - any hints? - 10/13/2004 11:49:33
Great tutorial on this for fireworks at:
www.entheosweb.com
Nigel
_____________________________
Innerview
Web Design - Virtual Tours - 360 Panoramas - Shopping carts
| |
|
|
|
nutty
Posts: 3
Joined: 11/3/2004
Status: offline
|
RE: Designing website as a graphic - any hints? - 11/3/2004 14:32:02
The Standard size is 800x600, unless the mojorityof your users use some thing different.
I use a number of programs. I do my background and initial design in Photoshop/ImageReady. I change things in Fireworks and sometimes make my nav there also (with rollovers).
Then combined everything on the page using different attibutes, depending on how you are going to layout the page. (tables, css, ect..)
| |
|
|
|
rumblepup
Posts: 116
Joined: 1/29/2003
Status: offline
|
RE: Designing website as a graphic - any hints? - 11/3/2004 15:52:45
quote:
ORIGINAL: nutty
The Standard size is 800x600, unless the majority of your users use some thing different.
I use a number of programs. I do my background and initial design in Photoshop/ImageReady. I change things in Fireworks and sometimes make my nav there also (with rollovers).
Then combined everything on the page using different attributes, depending on how you are going to layout the page. (tables, css, ect..)
Solly Cholly, your "standard size" is correct for MONITOR RESOLUTION, but completely incorrect for Browser Viewable Area.
Now, in my previous post, made centuries ago, I mentioned an absolute size, 783 X 430. Guess what? I should have never mentioned the height because people add toolbars, remove toolbars, or use funky settings for the tools header in their browser, IE, Mozilla, Opera or Netscape. In all honesty, I've found that most people don't mind a little scroll downwards at all. Left and Right scroll makes them feel all goofy and leave your website, so that's a no-no, BUT, I was right about the WIDTH.
In IE+, it's pretty easy to figure out.
If your MONITOR RESOLUTION is 800 Wide, and your scrollbar takes up 18 pixels of width, hmmmmm, quick math, that's 782 px of VIEWABLE AREA. Aha!
So, back to my first post. When I start a design in photoshop, I start with 780 X 600, just to make sure. Now, some browsers have slightly smaller or slightly larger viewable areas, but never 800 px width, so I accommodate to make sure everybody gets into the club by reducing 10 px on each side, with a guide, so now my design is really 760 px wide. 10px gifs on each side for spacing to tick off the css nazi's, and I'm off to the races.
_____________________________
Outdoor Furniture Cushions
| |
|
|
|
GoDario27
Posts: 232
Joined: 12/26/2001
From: Barberton OH USA
Status: offline
|
RE: Designing website as a graphic - any hints? - 11/3/2004 16:09:20
I do believe it depends on the monitor resolution of whoever is viewing your site. I usually design with a 680 pixel width so no matter who looks at it, there is no left/right scrolling. May be overkill, tho...does anyone use that small of a screen rez anymore?
< Message edited by GoDario27 -- 11/3/2004 16:27:24 >
_____________________________
"Thousands of years ago, cats were worshipped as gods. Cats have never forgotten this." -- Anonymous
| |
|
|
|
fullestop
Posts: 8
Joined: 2/21/2004
From: India
Status: offline
|
RE: Designing website as a graphic - any hints? - 12/19/2004 7:34:03
may be if u need additional help.. mail ankit@fullestop.com.. he is our designer par excellence..
cheers
Rahul
| |
|
|
|
chikala1
Posts: 1
Joined: 12/23/2005
Status: offline
|
RE: Designing website as a graphic - any hints? - 12/23/2005 8:51:37
i want to make my web site pictures to Animated so how can i do that,
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
) 
