Topic: designing images for web

Hi to all,
          I am new in designing and I have a new project and I want to design web images myself. can anybody tell me how can I design web images. Please suggest me any tools for designing purpose.

Re: designing images for web

Photoshop? Illustrator?

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: designing images for web

If you dont already know about Image compression techniques, and why its so important it si really worth reading this (even though ti may look a bit long its worth reading).

Heres why its important

image 01
http://www.webreference.com/dev/graphics/art/artnew/balloon.jpcd.80.off.sh20.jpg

image 02
http://www.webreference.com/dev/graphics/art/artnew/balloon.ir2.80.b0.opt.jpg

the two images above are the same image with differenct type of compression. One is 8.6kb in size 22.5kb. Although you may be able to see the difference side by side if we just put the lower quality image on its own, the compression is disguised. Using smaller size images, will decrease load time of a page, be more friendly to those still on dial up, and if your on a server where bandwith is limited, it could help to reduce your bandwidth usage dramatically.

Re: designing images for web

I recommend Photoshop for designing graphics although it could be out of your price range. So you might have to settle for something like the Gimp (http://www.gimp.org/).

When we design websites, we usually design the entire website as a photoshop image and then can extract the required graphics from that using the crop or slice tools in Photoshop.

Re: designing images for web

I do exactly the same as shadow. But i have use Adobe Fireworks, though i would probably choose Adobe Photoshop over fireworks if i could afford it. GIMP is worth looking at, its released under GNU so its free, but if you seriously looking at editing photos and can afford it get Adobe Photoshop.

Last edited by jonhurlock (2007-08-25 14:09:53)

Re: designing images for web

Which kind of Photoshop do you like best? 7.0? CS2? CS3?

Re: designing images for web

CS3

=====================
Sam G.

Re: designing images for web

Although CS3 is the latest release, it does not necessarily mean it is the best. Many of the core features have stayed the same through out the releases. The difference between CS and CS3 is not that great, there may some very specialist changes, but it seems for your usage (it seems you dont know much about web images) any version of Adobe Photo Shop from round about CS will be appropriat for you.

At work I have the option of using Dreamweaver CS3 / MX2004/ MX (CS3 is the latest release, followed by MX2004, then MX) and to be honest i dont mind which i use. Although CS3 May have Adobe's Spry assets, I would prefer to use other things. Also note that Adobe acquired Macromedia some years back, so if you are looking for a cheap version of fireworks it might be worth looking for macromedia fireworks, even though i doubt you will find anything but the most recent releases of PhotoShop and Fireworks.

Try reading this : http://www.betanews.com/article/Review_ … 84702679/1

Last edited by jonhurlock (2007-08-28 21:06:41)

Re: designing images for web

If you're looking for old software, try eBay. Here is a quick search for Fireworks. They have Fireworks 8 listed for $10. Pretty affordable.

Re: designing images for web

John gives good advice. The updates and changes in Photoshop CS/CS2/CS3 really apply more to photographers and professional designers doing complex things than they do to your average Joe wanting to make images for the web. Using Photoshop every day professional for design and photography, personally I much prefer the newer versions, but for your needs, it sounds like anything from v7 and up would be fine.

Of course, if you think you're going to outgrow it and will be upgrading to something better later, keep in mind that Adobe will only allow you (I think) to "upgrades" versions that are no more than 2 major releases below the version you're upgrading to, i.e. you could upgrade CS to CS3, but you couldn't upgrade Photoshop 6 to CS3. You'd have to buy a full version of the software at that point, instead.

As for web authoring, there are a lot of great tools out there for that, but I'm still a firm believer that your best bet is to just learn HTML and CSS. It's much quicker and less hassle, once you learn it. I haven't used Dreamweaver or Fireworks in years, so I can't really comment on any of those. I personally just use a text editor.

Re: designing images for web

Howdy!  You ask a deep question here so I'll hit some of the high points to help you get started.

Before we talk about software, let's talk design in general.  What's the POINT of design?  The way I see it, good artwork is needed to help convey information in a simple, easy-to-read/consume format that also elicits an emotional response, though slight, in the beholder.

It's a way of "spinning" the mood of your information to help you more accurately convey it.

Now think for a minute about two examples.  Let's say I have a Church website preaching the "Good News" to visitors.  However, the site's background colors are black, the text a dark grey, we see images of dripping blood, dark/evil looking crucifixes, etc.  Not exactly so welcoming, right?  Their intentions may be all well and good, but the design conveys a meaning of "evil", which gives some one a confused impression, which I (personally) would interpret as sarcasm.

Take the same site, same copy [jargon: copy = words used in an advertising piece, verbiage, text], etc.  Instead we see a white background with clear oceans and water, gold crosses, sandy beaches, photos of smiling, laughing happy families.  Totally different feel that's consistent with the message this time, right?

So first, understand that DESIGN IS A WAY TO CONVEY MEANING.  It adds credibility when done right, and can destroy credibility when done wrong.

Next, types of design.  There are two basic schools of thought from my experience: detailed and simple.  Detailed design is the kind where you have lots of high-quality images, lots of glitz, glamour and graphics that really "razzle dazzle" your site visitors.  Simple design is more like this forum - very clean, clear, crisp graphics and color use, high contrast, etc.  Neither is better than the other, they're simply different.

Another thing you need to understand before I talk software is what "raster" and "vector" images are.  A raster image is like a photo on your computer.  It's a big "blob" of data that the computer remembers the exact color of each and every pixel and it has a set number of pixels and colors.  If you enlarge the image, it gets "pixelated" or fuzzy looking because the computer can only do so much to "guess" what color should go in the new pixel slots that open up as the picture is enlarged.  With raster images, the bigger it gets, the more distorted it gets.  This is why if you're working with photos, INSIST on the largest possible.

Vector images are the opposite.  They're very simple shapes, lines and colors - that's it.  A vector image is represented in a computer by a mathematic formula.  Remember X+3 = 9 back in school?  This gets infinitely more complicated, but to the computer, it's just math.  So if you want to change the size of a simple vector image, it just crunches new numbers and all of a sudden, PERFECT reproduction.  This is limited though because you can't get too complex with vector images, or you won't be able to save it as a pure vector.

Now, software:  As already stated, Photoshop is your best bet.  If you're in college, most universities have a college bookstore and they usually carry photoshop - try to get a cheap copy of it.  EBay is another very good option, even cheaper.  If push comes to shove, you can also use GIMP as mentioned earlier.  It's not as "pro" as Photoshop, but it'll get you started.

You could also use Illustrator if you want to do vector artwork.  In fact, most of my brand-new projects start off with some logo and concept work on layout in Illustrator, then I jump over to Photoshop to put some finer points on things, then use the crop tools and save for web export features.

FInally, file size.  This is a big one.  Back in the day when most people were still on dial-up, designers had to degrade the quality of their images somewhat (sometimes extremely) to make sure they'd download fast.  All kinds of interesting techniques came of this - preloading, etc.  Now that about 50% of the US is on Broadband connections, it's not as bad, but now we have a new kind of issue to worry about: bandwidth costs.

You see, every time you access an image, somebody pays for the bandwidth it takes to send that image (or video, audio, text document, html file, etc.) to that person's computer.  So let's say we have a 50k image.  Let's also say that bandwidth is at $1.00 per gigabyte (for the sake of round numbers here - I've seen non-cogent more expensive and I've seen oversold much cheaper).  That image could be used thousands of times before it costs you a dollar.  But how much MORE could it be used if you could squeeze it down to say, 30k?  You could get the image shown 40% more of the time (if my math checks out) than if you left it at 50k, meaning you'd save 40% off the cost of your bandwidth as it pertains to that image.  When you're dealing with large sites, that extra bit of efficiency translates into thousands of dollars in savings.

So, to recap:
- Get it clear why you're designing.  Pretty pictures are great, but meaning is king.
- Learn some basic industry jargon, and make sure your design compliments, not contradicts, the meaning
- Grab Photoshop and Illustrator if you can, otherwise GIMP is decent.
- Optimize as best you can without degrading image quality.  Experience is the best teacher of this balance.

Good luck!

Re: designing images for web

With our vast experience in web design and programming, we can confidently recommend the use of Adobe Dreamweaver, Adobe Fireworks, Adobe Flash, Adobe Contribute, Adobe Photoshop and Adobe Creative Suite. They are so easy to use, beware you can get hooked on to them :-)

Last edited by sarahxbox2009 (2009-11-09 06:39:35)

Re: designing images for web

Use this http://www.w3schools.com/ for reference it will surely help.

Re: designing images for web

If you want to learn about Web Design. You should know about designing softwares.  Adobe Photoshop, Adobe Flash, Case Cading Style sheet ,Adobe Creative Suite these are all the basic softwares for designing any web page.

Re: designing images for web

I just using dreamweaver and bluefish software for Image designing , I have been using this software last two years . Its having very nice feature for web designing.

Re: designing images for web

'Hello im a newbie hope to become valuable member'
WP Themes

Re: designing images for web

Images are very important in web site design. If you are creating images to be used on a website, then Adobe Photoshop is a must have. It's the premier program for manipulating and creating website images. The creators of Photoshop realize that many web designers use the program, and they've made it easy to create and save web images.


church websites
christian website design

Re: designing images for web

there are lots of software available in market. If you are beginner so you can use photoshop or corel draw. Both this software is good fro you. Through the software you can make good image fro your websites.

Re: designing images for web

As per my opinion Photoshop is one of the best software to design website and website images. There are many different tools and features in it to design website images easily. To  design web site attractive than image design is important for the website.

Last edited by gedgravedean (2012-08-29 05:24:47)

Re: designing images for web

First you have to decide what kind of design you are going to do?As you are new here you can start with photoshop. And the basic photoshop tool is pen tool that will be always required for clipping path that means removing background from any image. Wish good luck.