Getting started with web-graphic design

H
Posted By
Hallvard
May 6, 2005
Views
232
Replies
6
Status
Closed
Is anyone here using Photoshop elements to design web-graphics?

I’m a newbie to Photoshop elements (2.0) and I’ve been looking around everywhere on the web for tutorials on how to design web-buttons, logos, illustrations and other cool things for websites, but only very rarely find the occasional "how to". Most of the time I don’t even understand it because it’s for Photoshop (and not Photoshop elements), or it assumes the person knows the basics of the program.
I’ve also looked around in bookstores for guides on this subject, but just about all Photoshop Elements books discuss photo retouching/editing.

I’d like to learn how to make things from scratch, and right now that would be stuff for my website.

Any good pointers out there?

Hallvard
Related Tags
design graphics start

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

PA
Patti Anderson
May 6, 2005
First, I think you do need to take time to learn the basics of the software…it’s going to take more than a day at the computer. PE2 can do many of the same things as its big brother Photoshop, but you have to know the basics to be able to know what will work and what needs a workaround. 🙂 This forum is a great place to get workarounds!!

Basic Web page templates can be created by starting with a new document that 800 x 600 pixels, with a resolution of 72ppi. There are some common screen sizes choices in the New document dialog.

Custom Shapes + Layer Styles with added Text will give you great web buttons.

A lot of Photoshop web page tutorials use paths to create web layout shapes and menus. Paths are something you cannot do in PSE, but you can create a lot of cool designs by using Custom Shapes in an additive or subtractive mode. For example you can make a pill shape by combining a rectangle and two circles.

Here’s a site you might like to take a look at. Try a few and if you get stuck on a step, give a holler and we can probably come up with at least 10 workarounds, 🙂

< http://pegaweb.com/tutorials/web-design-and-adobe-photoshop- tutorials.htm>

One other thing PSE cannot do is slicing. If you need to slice up a web layout design so that it will load faster, you will need some other software to do this.

Patti
H
Hallvard
May 9, 2005
Good to hear that PSE actually can be used as a tool for this sort of thing 🙂

I’m going to get hold of that user-manual that came with the program and try to learn some basics. I hope PSE isn’t one of those programs that take 4 months to learn the basic stuff: I’m hoping that I can have some fun along the way and get started with simple stuff right away.

As for the URL you gave me… It doesn’t work. The domain name isn’t found 🙁
PA
Patti Anderson
May 9, 2005
If you are a quick learner and determined you might learn the basics in less than 4 months. XD Elements was created for the home digital photographer, so figuring out how to use it for web design is not something you will see on the surface or specifically find in the manual.

You might do a google.com search for "page layout Photoshop Elements" or something similar. Don’t know what happened to pegaweb.com….it was there the day when I copied the link. I hope it comes back, it had lots of great tutorials for making web page layouts in Photoshop.

In the mean time you might find this sight helpful. It has helped many of us learn Elements:

<http://www.arraich.com/elements/psE_intro.htm>

Patti
H
Hallvard
May 10, 2005
Looks like a great CD-ROM book, though I find the price a bit steep (US$ 45 for the "Elementary school" book) when there’s np printing or paper involved. Still, it looks like a thorough guide, but it’s for version 3, and I only have version 2, so it might be confusing for a newbie when he refers to menus etc. I don’t have here. I’m also going to use it on a Mac (the website notes that the guide is only for the Windows version of PSE, but I assume the difference is minor, such as key commands using the "Command" key instead of the CTRL key).

By the way, is it worth upgrading to version 3 of PSE? I haven’t even started really using version 2, and I would usually say that it’s pointless to upgrade something that you haven’t fully exploited, but then again I might be missing out on easier ways to do the things I want to do. Any views on this, for those of you who have used both versions?

I’ll follow your suggestion for the web-search. Perhaps I’ll find something. Actually, I did find something yesterday, related to web-images, right here (in case others reading are looking for guides on how to do web images with PSE as well): <http://www.good-tutorials.com/> (take a look at the left side of the page where you can choose different tutorials).
I’ve already found several useful ones for me, so that site is definitely bookmarked!
O
o3v3tz
May 10, 2005
Scroll further down on the arraich.com web site page from the link posted and there are free tutorials. I think that the free tutorials are Elements 2.

Barb O
PA
Patti Anderson
May 10, 2005
As far as Arraich’s web site goes, I was referring more to the tutorials present on his site, not the CD. The majority of the tutorials on the link I gave are still for PSE2 and most have a pdf file with them you can download.

I’m not one to tell you whether to upgrade to PSE3 or not, ’cause I don’t have it. 🙂 I have PSE2 and Photoshop CS. I don’t think you will find any more tools for designing web pages in PSE3, but if you’re into digital photography it might be worth a second look.

If there’s something specific you are trying to create in Elements for a web page and you need help, just give a holler in here. Might be a good idea to start a new topic if it needs attention.

Patti

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Related Discussion Topics

Nice and short text about related topics in discussion sections