RE: Designing website as a graphic - any hints? (Full Version)

All Forums >> [Web Design] >> Web Graphics



Message

_gail -> RE: Designing website as a graphic - any hints? (12/4/2002 19:52:20)


quote:

ORIGINAL: abbeyvet

ie making threads FAQs. Perhaps we should do it more? Would it be helpful?



You bet your bottom dollar it is! [:)]


thanks, gail



PBailey -> RE: Designing website as a graphic - any hints? (12/5/2002 0:01:56)

Katherine,
Great idea! This thread is definitely a keeper.

I think making really helpful threads FAQs is a good idea but we might have to be somewhat discerning because there are so many good threads at OutFront we could end up with two pages of FAQs. [:)]



pacific77 -> 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



bobby -> RE: Designing website as a graphic - any hints? (12/9/2002 16:57:02)

Check out www.photowebber.com

$200 for the download version... free trial available.

If you find that a majority of your work is transferring from PS to your html editor, this tool might come in handy. Could pay for itself the first time you use it...

I have the trial, but haven' t justified the cost of purchasing (yet [;)])





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



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



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







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



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



saakea -> RE: Designing website as a graphic - any hints? (9/8/2003 9:04:48)

Try these for tips using photoshop and image ready for web design

http://www.cyesis.org/workshops/photoshop_websites.htm

Webmonkey (http://www.webmonkey.com)

But the BEST EVER (that I've found) is www.planetphotoshop.com

Go here: http://www.planetphotoshop.com/tutorials_web.html

Keith



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



GoDario27 -> 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 -> 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 -> 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 -> 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



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




GoDario27 -> 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?



fullestop -> 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



Rocket Boy -> RE: Designing website as a graphic - any hints? (12/10/2005 9:36:20)

quote:

ORIGINAL: PBailey

Katherine,
Great idea! This thread is definitely a keeper.

I think making really helpful threads FAQs is a good idea but we might have to be somewhat discerning because there are so many good threads at OutFront we could end up with two pages of FAQs. [:)]


Instead of 'Sticking' FAQ threads permanantly at the top of current forum sections... Maybe a completely new section for FAQ's would work?

Just to add my two cents to the backgrounds thing... I usually make a 1024x768 design knowing that my tables will be 750px wide. This allows me to incorporate a table background design in the middle of my 1024x768 (eliminiating the need to use the table background option in FrontPage).

If there is not too much detail on the image then it should only be about 25k, especially with a bit of compression. This is good for me as a page background which will just have the table layout (in FrontPage) designed around it.

If the file size is too big I usually just crop it manually into 3 or 4 sections and use the table/cell background options.

Not sure if this is usefull but I hope so.



chikala1 -> 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,



d a v e -> RE: Designing website as a graphic - any hints? (8/6/2008 1:27:04)

aaronexodus - why don't you stick your spam where the sun don't shine [:@]



Page: <<   < prev  1 [2]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375