Log in

No account? Create an account
13 December 2005 @ 07:55 am
HTML, CSS editor, & Photoshop help needed  
Okay, so I need to create a website for someone, and am looking for free HTML & CSS editor suggestions. Apparently my old old version of HomeSite doesn't like XP. Also, my designing & coding experience is from pre-CSS days, so tips and tricks would be appreciated. I used t just hardcode everything, so this newfangled stuff is a little different. I'm having fun looking at the template sites. Oh, and I want do do drop-down menus. And frames too - is that still done the same way?

I got about 2 days to get this figured out and finish this up.

-the redhead-

PS - in Photoshop, how do I copy a chunk of an image, widen the image with blank space, then stick the copied chunk back in (effectively widening the image by sticking another piece of the middle in it)? Do I need to do this with a .pst file as opposed to a GIF? I messed around with that slice thing, but it sure didn't do what I wanted it to.
Brown Eyed Girlbrowneyedgirl65 on December 13th, 2005 03:47 pm (UTC)
OK, answering backwards: In photoshop, just go to Image->Canvas and widen it directly that way. No need to copy/paste back to widen it.

Drop down menus are great, you can find all kinds of tutorials on that and css by googling around a bit.

Frames? Agh. Too 1995. All the effects of frames you can do, and do better, with css. Css isn't that bad to do, especially if you're already used to hand coding html, that gives you a big jump up in the first place. Just google around for css tutorials and/or the effect you want to do and someone out there will have the instructions for doing it.

Have fun :)
-the redhead-theredhead on December 13th, 2005 04:13 pm (UTC)
Just widening the canvas using Image->Canvas Size adds extra space to the sides of the image, but doesn't widen the image. Using Image->Image Size makes the entire image larger, which ends up distorting some of the gradient stuff. So what I really want to do is add a chunk of the part of the image into the middle to make it wider.

Image hosted by Photobucket.com

In this case I want to make the white part wider.

Image hosted by Photobucket.com

Here I want to make the lighter grey & taupe bar at the bottom part wider.

I have these as .pst files, but the whole layer thing is new to me, and I cannot figure out how to make those parts (layers?) wider.

-the redhead-
-the redhead-
Brown Eyed Girlbrowneyedgirl65 on December 13th, 2005 04:40 pm (UTC)
Yeah, I realize I had not worked my way thru fully on your photoshop question afterwards. Let me see if I understand this -- looking at the second pic above, what you esentially want to do is narrow (vertically) the black part on the left?

What about copying a section of the gray/taupe and dropping it on top of the black part?

Layers aren't actually that tricky...but they're almost impossible to show how to use unless you're sitting there in person. Think of layers as literally that; you might have one layer wiht just the black and the gradient on the left, and a layer with just the steel gray, and then a layer with just the taupe bar. So if you look at each of them individually they're all just parts of the image. You then combine them, with different relationships (over, under, merged) for different vidual effects. In particular, you might do this with the gray layer as actually filling then entire space, so that when you put the black on top of it, the black part itself could be different sizes, and any would work because the gray really covers everything underneath.

Did that make sense? But if all you have is an unlayered image with what you showed me above, then it seems to me the easiest way to change it would be to select an area on the gray/taupe part abuot equal to the amount of black you want to take out (assuming I understood correctly wat you want to do, and put that on top of the black (which would then create a layer there, incidentally). Or just select the approrpriate areas in the black, copy the gray or taupe areas with the eye dropper and fill your selected areas...

Brown Eyed Girlbrowneyedgirl65 on December 13th, 2005 04:44 pm (UTC)
Agh, reading this over...
What I meant to say is this: If all you have is an unlayered image, a flat one, like the second one you describe, then there are two quick ways I can think of for adjusting it.

1) Select an area of the gray/taupe about the size of the black part you want to reduce. Copy this selection. Now paste that copied section on top of hte black part to reduce its size.

2) Or, use the eyedropper to cpy the gray, select the part of the black to gray out, and fill it with the eyedropper color. Then use the eyedropper to get the taupe color, select the taupe bar part on the former black and fill that.

1) seems easier...

I think either of these would work since you don't seem to have a gradient right there (and you want to keep the existing ones on the right/left edges intact)...
Brown Eyed Girlbrowneyedgirl65 on December 13th, 2005 04:53 pm (UTC)
I apologize, I'm being really obtuse today for some reason. The whole image should wind up wider...

OK. What I would do is this. Open up a new file, and specify the new dimensions you want. Copy the portions over from the original file (selec, copy, and paste) that will remain about the same. For the parts that should go wider than in the original, you should just be able to drop multiple copies of the particular selection down to make up the gap. You may want to flatten the image when you are done, the layers created with the multiple pastes are probably not useful (as I described somewhere else, ideally the bottom layer would be a full gray, then with a taupe bar layered on top, and a black section dropped, etc; the sections would not be as useful).

Where's that paper bag to put over my head?
-the redhead-theredhead on December 13th, 2005 05:01 pm (UTC)
oooh - okay, I'll give this a try. I'll post back if it worked in a few minutes.

No bag for head required - we all have days like this, and with the holidays coming up it just gets worse. I'm trying to make this website as a holiday gift for someone, so I know I've goofed up one thing becuase the pressure is on.

-the redhead-
-the redhead-theredhead on December 13th, 2005 06:17 pm (UTC)
Okay, so I'm having a really basic problem - how do I copy a layer and put it into a new image? I've done the things that 'make sense', but it's not happening.

-the redhead-
-the redhead-theredhead on December 13th, 2005 06:25 pm (UTC)
Right, so I just figured out how to copy from old layer and put in new image, but end up being the same size as the original and I'm not having any luck making it wider in the middle. So I'm back to wanting to cut it up and stick extra in the middle.

-the redhead-
Brown Eyed Girlbrowneyedgirl65 on December 13th, 2005 06:59 pm (UTC)

Looking at it now, I need to clean up the bottom part. Sometimes the hard part is aligning the pastes...
Brown Eyed Girlbrowneyedgirl65 on December 13th, 2005 07:05 pm (UTC)
Wait that seems really small...?? ^$%#^&$
-the redhead-theredhead on December 13th, 2005 07:09 pm (UTC)
Thank you thank you!

It is the right size, it just displays it as smaller.

So, how did you do that? The Photoshop is now showing me any love.

-the redhead-
Brown Eyed Girlbrowneyedgirl65 on December 13th, 2005 07:20 pm (UTC)
Oh, okay, i got the right size up at http://www.flickr.com/photo_zoom.gne?id=73254799&size=o


Oh well.

This is where it's helpful to sit down and demonstrate...I did what I described...I opened a new file, with 1000x120 pixel dimensions.
I also opened up the original file, so I had both.

Using the rectangle tool, I copied the black portion on the left and pasted it to the new file, and moved it over where I wanted (pasting just drops it on). Ditto the gradient on the right: select, edit/copy on old, edit/paste on new. Back ot the old, and this time I selected a portion in the middle about two inches wide and from top to bottom. Edit/copy. New file, edit paste...move over next to black section. Paste again, move again...repeated until enough covered it. Then I flattened the image (because each paste makes a new layer. No biggie, if you forget to flatten but want to save as a gif PS will advise you to flatten. (Layers->flatten layers).

You can also use Gimp, which is free, open source, and at this point IMO better than photoshop and more intuitive...

-the redhead-theredhead on December 13th, 2005 07:41 pm (UTC)
Your explanation was right on - thank you! The *rectangle* tool and then you have to use the menu for copy/paste. That's the ticket. This makes so much more sense now.

-the redhead-
-the redhead-theredhead on December 13th, 2005 07:19 pm (UTC)
ahhhh - now that I look at it in the browser instead of the $!%*ing graphics program I'm thinking it needs to be maybe 30- 40 pixels narrower? That's a good point to remember - look at things in browser.

So the whole point of this is that these 2 images are supposed to be the background and header images for a website. Since they aren't adjustable in size, one should allow for a little room on the side in case people view their websites a little narrower, yes?

-the redhead-
Brown Eyed Girlbrowneyedgirl65 on December 13th, 2005 07:23 pm (UTC)
Yup. Background images always have that problem, athough there are no doubt some high tech asp or java type solutions to those...not worth the effort.
-the redhead-theredhead on December 13th, 2005 07:43 pm (UTC)
well, now I just have to futz with it a bit to get everything the right sizes.

Thank you so much *smile*

You'll undoubtedly get to see what I come up with. Once I get the images right I can work on the code.

-the redhead-
-the redhead-theredhead on December 13th, 2005 04:52 pm (UTC)
First off, thanks again for all of your help *smile*

What I want to do is make both of the images 320 pixels wider (ex. 680 -> 1000 pixels) by enlarging just the middle parts (white area & medium grey area) & leaving the border/gradient areas they way they are now.

I have each of these files as both flat GIFs and .pst files. I've tried copying bits of the layers into a new file, but still cannot figure out how to make the parts I want wider. It still just ends up with extra canvas on the side. I look at the help stuff and think it was written for people who already have a clue about Photoshop. I'm just trying to intuit all of this...

-the redhead-