[Newbie] Relationship of board and objects
Todd Cary
relationship between the "board" - that may be the wrong term - the
screen that comes up when you create a New Document - and the Objects
you put on it.
My goal is to create a GIF that is 790 X 450 pixels and to display that
image on a HTML page that has a black background.
So, I create a Rectangle object and then I create some other text and
graphic objects, but they all seem to be independent of each other and
have no relationship to my New Document. After doing the above, I save
to GIF and place it in an HTML, but I get a faint white line on the
right and on the bottom.
Needless to say, I am missing some basic concept here! Help..........
http://209.204.172.137/index4.html
Todd
steggy
The "artboard" fills your whole Illustrator window. Compare
it to your drawing table. The New Document you can compare
to a piece of drawing paper. After drawing and placing text
etcetera, you may save or export. But Illustrator only saves
the objects you made *on* the document, not the whole sheet
it self. If you would place an Illustrator EPS file in
XPress for instance you only get your drawings, not the
whole document, which is nice:))
If you want a full document to be placed in XPress, you need
to define that document by drawing a rectangle with the
desired size.
So if you want to make something in 790 x 450 pixels, just
make a new document that is larger than that and draw you
objects. Even if you make a logo of 1 inch x 1 inch on a
full letter-size or A4- document, only the logo will be saved.
Hope that clears it up a bit.
--
steg
Todd Cary
Great help! However, it brings up a few more questions:
1) What is the significance of the "rectange" with dotted lines around it on the left part of the New Document and the vertical line to the right of the rectangle?
2) I made a Document larger than the 790 X 450 and created a black 790 X 450 rectangle in the middle. Then I put some art work on top of it and saved it as a gif. When viewed, there is a faint white line around it (I have borders turned off - the red slash through borders). What creates that?
Look at http://209.204.172.137/index4.html.
Getting closer......
Todd
steggy
>
> Steggy -
>
> Great help! However, it brings up a few more questions:
>
> 1) What is the significance of the "rectange" with dotted
> lines around it on the left part of the New Document and
> the vertical line to the right of the rectangle?
The dotted line is the printing area, it depends on the
printer you use. You can move it with the little dotted
tool, down left under in the toolbox. Double clicking it
will position it right (I think, always have a hard time
explain when Illustrator is not open:)). Has no effect on
web design as far as I know.
>
> 2) I made a Document larger than the 790 X 450 and created
> a black 790 X 450 rectangle in the middle. Then I put
> some art work on top of it and saved it as a gif. When
> viewed, there is a faint white line around it (I have
> borders turned off - the red slash through borders). What
> creates that?
>
> Look at http://209.204.172.137/index4.html.
>
> Getting closer......
>
> Todd
I only see a not-faint light line on the bottom, nothing
else (Mac, Explorer).
For this screen (it looks good by the way) why would you
make that 790x450 rectangle in Illustrator? Why not make a
black background in your software which you use to create
the web page and just place your illustrator artwork?
steg
Todd Cary
I agree that I should just put the objects on a black background. However, due to my lack of experience, I get white coming through on the artwork *unless* I put it on top of a black object.
See http://209.204.172.137/index_test.html
What am I missing? What am I doing incorrectly?
Todd
steggy
Todd could you please describe exactly what you do to
Save/Export the artwork from Illustrator? I remember you
said as GIF. But which settings etcetera. Have to go now,
but will follow up soon.
steg
Paul Asente
Todd Cary <to...@aristesoftware.com> wrote:
> 2) I made a Document larger than the 790 X 450 and created a black 790 X
> 450 rectangle in the middle. Then I put some art work on top of it and
> saved it as a gif. When viewed, there is a faint white line around it
> (I have borders turned off - the red slash through borders). What
> creates that?
The faint white line is caused by antialiasing around the edge of your
rectangle. Its boundary doesn't fall directly on pixel boundaries, so
some of the edge is partially black. There are two ways to address this:
1) Turn on Pixel Preview and Snap to Pixels in the View menu when you
draw the rectangle. That should make it fall directly on the pixel
grid. Then lock it so that you don't accidentally move it.
2) Draw your background rectangle to be larger than the image you want.
Then draw another rectangle on top of it that is the size you want and
turn it into crop marks using Object->Crop Marks->Make. Only the area
within the crop marks will be exported when you Save for Web.
-- paul asente
To reply, make the host be the same as my last name
Todd Cary
Thank you for the help. This certainly helps me understand "antialiasing".
Is this what is creating the white speckles at
http://209.204.172.137/index_test.html
If it is, that certainly makes sense. Is it preferable to use a black object under artwork to avoid my problem or is there some setting that I can apply to the artwork/generation of the gif that will prevent this?
Todd
Bobocito
>Paul -
>
>Thank you for the help. This certainly helps me understand "antialiasing".
>
>Is this what is creating the white speckles at
>
>http://209.204.172.137/index_test.html
>
>If it is, that certainly makes sense. Is it preferable to use a black
>object under artwork to avoid my problem or is there some setting that I
>can apply to the artwork/generation of the gif that will prevent this?
>
>Todd
>
What white speckles? I don't see what you are talking about.
So I am not sure what your problem may be, but I have a hunch it is/was a
problem with antialiasing, which creates semi-transparent pixels at the image
edge. But .gif doesn't support semi-transparency -- a px. is either transparent
or it is opaque. The anti-aliased px get switched to opaque, and white is the
usual default. You need to change the default to one matching the background.
The basic lesson in making transparent .gifs is to designate a "matte" color in
the Save for Web dialogue, choosing a color that will match the background of
the web page. This will cause the ".gif halo" to blend in, and you will still
have transparency if the transparency box is checked.
Another point; your white type is somewhat hard to read. Not impossible, but
just make sure that is the effect you want.
And you certainly don't want to use a huge image for your page if you can avoid
it, although it's true that large areas of solid color don't increase file size
all that much.
--
Bobocito
Photoshop Links Page
http://freewebz.com/mastodon/ps_links.html
Todd Cary
Many thanks for the suggestions/help. My tip-toeing in this environment makes me feel like my first day with a computer (my 30 years as a developer seem irrelevant)!
<<<
What white speckles?>>>
Yes, I did use the "align pixel" setting on that page with a black rectangle object "behind" the graphic objects. Currently, the page has a different font for the "Software Development". The one you saw was an old version.
Trying........
If you have time, could you see my ImageReady message?
Todd