Invisible <voi### [at] devnull> wrote:
> Warp wrote:

> >   There's this thing called learning and...

> Out of curiosity, how does one "learn" Photoshop anyway?

  You use it. You read tutorials on the internet (do you really think there
aren't any?) You read books. You ask colleagues.

-- 
                                                          - Warp

Post a reply to this message

TC wrote:
>> Last time I checked, there are two ways to put an image into a web page. 
>> You can use the IMG tag, which inserts an image in amoungst the text.
> 
> You have to use CSS.

Yeah, one way is to use IMG tags in the HTML, the other way is the 
background property in CSS.

Besides, ideally your HTML should contain *only* the text you're trying 
to display, and CSS should do all the styling. A while back I found this:

http://www.csszengarden.com/

Just by changing the CSS, it completely rearranges the entire contents 
of the page. And I thought CSS was just for changing colours...

> There is a css-property called z-index, allowing you to 
> stack elements that have this property.

Yeah, I remember reading about that. I didn't think any known browser 
supported it though?

Oh, mind you, I guess that was a while ago...

> There are "left", "right", "top", 
> "bottom" properties, allowing you to position elements with pixel-precision.

Yeah, I've played with them, but I could never think of any useful 
purpose for them.

> Note the "position" properties. They are important - read up on them.

Yeah, you can set the position relative to the rest of the flow, or 
absolute relative to the page, or relative to the browser frame, or...

> Then you have a several css-properties for background: you can layer 
> div-elements one upon the other, and overlap them using "left", "top", 
> etc. - and each div-element can have a seperate background. The background 
> for each and every element can be aligned ("background-align" property) and 
> you can decide whether you want to repeat it or not. So you can position an 
> image within a div-element and have a backgound for this element. If the 
> background is a transparent image, the images and text below will show 
> through.

Now, see, I was under the impression that setting a background 
completely overrides any previous setting. And yet here we have a page 
with a stipey background, and then a glow background on top of that. Or 
DIV boxes with a transparent background so what's below shows through 
(rather than being replaced).

> There are pitfalls, though. Not every browser supports css properly and you 
> have to make sure the browser is in the right mode.

Sure, you need to avoid quirks mode and stuff, and as soon as you use 
CSS it's 100% guaranteed that it will only ever work in the one version 
of the one browser you tested with. I get that.

> It can be very hard to debug a style.

Hell yeah. Almost as hard as trying to debug JavaScript...

> If you really want to dig into this, you have to learn how css works.

I already know how CSS works. What I seem to be missing is that since I 
last looked at it, they've added some new features.

> For a background that goes from one colour to another you can use your 
> paint-program, create a line with fill-properties starting at blue and 
> ending at white. Then put this 1-pixel line in the background property of 
> your [whatever div or document part you want it to be].

Sure. I get that. (Although I don't possess a "paint program" to create 
this image with in the first place... I'd have to write a custom program 
to generate the pixels and write them to file, which is a little tedious.)

Post a reply to this message

>> Out of curiosity, how does one "learn" Photoshop anyway?
> 
>   You use it. You read tutorials on the internet (do you really think there
> aren't any?) You read books. You ask colleagues.

In my experience, most Internet tutorials aren't very useful. (Although 
there are always exceptions.) And since povray.off-topic is the only 
"colleagues" I have, asking here is only going to give me "dude, GIYF!" 
Books are similarly hit-and-miss, but I'm sure there's some good ones 
out there. The tricky part is finding them. ;-)

Post a reply to this message

Invisible <voi### [at] devnull> wrote:
> >> Out of curiosity, how does one "learn" Photoshop anyway?
> > 
> >   You use it. You read tutorials on the internet (do you really think there
> > aren't any?) You read books. You ask colleagues.

> In my experience, most Internet tutorials aren't very useful.

  That's because you don't try them. When you read a tutorial you have to
actually *do* what the tutorial is saying, step by step. Just reading it
is not enough. You learn by doing.

-- 
                                                          - Warp

Post a reply to this message

>> In my experience, most Internet tutorials aren't very useful.
> 
>   That's because you don't try them. When you read a tutorial you have to
> actually *do* what the tutorial is saying, step by step. Just reading it
> is not enough. You learn by doing.

If the tutorial doesn't make sense, it's not a good tutorial.

If the tutorial doesn't explain the part I'm trying to learn, it's not a 
good tutorial.

Most tutorials I've seen fall into one or other of these categories. (As 
I say, there are always exceptions...)

Post a reply to this message

3 hours and 190 lines of source code later and I have... well, this.

Ugly, isn't it?

Let's face it, I'm no graphic designer, and I never will be. :-(

Post a reply to this message

Attachments:
Download 'website11.png' (22 KB)

Preview of image 'website11.png'

Invisible wrote:
> Yes, that's right. Somehow they put text ON TOP OF an image. Not only
> that, but somehow they put one image ON TOP OF another image, WITH
> TRANSPARENCY. I have no idea how that's possible.

That has been possible since forever. Except in IE which didn't support 
alpha channel on PNGs.
http://www-archive.mozilla.org/start/1.0/demos/eagle-sun.html

> Last time I checked, there are two ways to put an image into a web page.
> You can use the IMG tag, which inserts an image in amoungst the text.
> (But you cannot put anything over the top of this image.) Alternatively,
> you can set the page background image, which is obviously behind
> *everything*. That means you can put things over the top of it.

You can put an image as a background on ANY element.

<div style="background-image: url(foo.png)">hello <img src="bar.png"></div>

Post a reply to this message

> Sure. I get that. (Although I don't possess a "paint program" to create 
> this image with in the first place... I'd have to write a custom program 
> to generate the pixels and write them to file, which is a little tedious.)

If you don't use any paint program yet, try the GIMP. It is free, can do 
much, and is available for almost any OS I know.

www.gimp.org

It is not my first choice because I do not like the interface. Since you 
don't use a paint program yet, this will be no problem. The GIMP should come 
in handy when post-processing povray images, too. ;-)

With the right plugins GIMP can do many interesting things to a picture... 
so sometimes I use it in spite of the interface. ;-)

If you want vector-images then inkscape looks promising. Not yet commercial 
grade stuff, mainly because it has not many export formats, but it is free 
and it imports PDF nicely. I think this is a program to watch.

BTW: if you want a >really< interesting background, then use an animated gif 
(but keep down the loops to a few, else the text becomes unreadable)

Post a reply to this message

TC <do-not-reply@i-do get-enough-spam-already-2498.com> wrote:
> www.gimp.org

> It is not my first choice because I do not like the interface. Since you 
> don't use a paint program yet, this will be no problem. The GIMP should come 
> in handy when post-processing povray images, too. ;-)

  If he is unwilling to learn to use a program like Photoshop, I doubt he
will be willing to learn to use the Gimp.

> BTW: if you want a >really< interesting background, then use an animated gif 

  Uh, what?

-- 
                                                          - Warp

Post a reply to this message

Invisible wrote:
> The tricky part is finding them. ;-)

You go to Amazon and read which books sell best, and look at the reviews. 
When you get stuck, you ask someone you know who is already experienced with 
photoshop.

 > Just reading it is not enough.

Seconded. The game programming tutorials I was reading often had bugs in 
them - stuff that basically wouldn't compile, due to sloppily changing one 
part but not the other, for example.  Figuring out what was broken was very 
informative.

-- 
Darren New, San Diego CA, USA (PST)
   Linux: Now bringing the quality and usability of
   open source desktop apps to your personal electronics.

Post a reply to this message