Graphics question (Full Version)

All Forums >> [Web Development] >> General Web Development



Message

c1sissy -> Graphics question (4/22/2003 19:58:15)

I want to learn a bit about the graphics design part of web design.

I' d like to learn how to do the side borders in photo shop. If anyone could give me some guidance i would appreciate it. Or show me some tutorials for doing so.

Thanks.



Visualingo -> RE: Graphics question (4/22/2003 20:42:26)

Side borders? I really don' t know what you mean. Do you have a link to an example?



c1sissy -> RE: Graphics question (4/22/2003 20:55:29)

OK, maybe I sort of stated it incorrectly.

http://roserose.hypermart.net/bkg/lbkg.html

Here is sort of what I would like to learn how to do. I have tried in photoshop, roflol, however it didn' t turn out how I would have liked it to have.

I hope this link helps out with my not so good description of what I would like to do.



Visualingo -> RE: Graphics question (4/22/2003 21:35:11)

Well, I really can' t teach you how to design the side graphics, but the graphic itself is really easy.

1. First create a New File. I' d make it at least 80 pixels high and 1200-1600 pixels wide. The reason for the width is that if someone' s resolution is wider than 1000 (as your examples had), the image will start to tile towards the right hand side and will look odd. The extra width shouldn' t add too much to the filesize, especially if you are making a simple graphic.

2. Create your graphic that you want to repeat down the left side.

3. If you got kinda tricky with the graphics, go to Filter --> Other --> Offset... Use half of your height for the Vertical pixels down, in this case, 40 pixels. What this does is shows you what the image will look like when it tiles (repeats) downwards (when it stacks on itself). Fix the edge to make it line-up right, be careful not to touch the top or bottom of this image, (or you' ll have to fix it again) then run the filter again to set it back straight. (another 40 pixels)

Export as jpeg or gif (gif, if it is simple) and set it as your background image in Frontpage. The image shouldn' t be much more than 5k, anything else might bog the page down a little much.

Hope that helps!



Visualingo -> RE: Graphics question (4/22/2003 21:37:23)

quote:

Well, I really can' t teach you how to design the side graphics, but the graphic itself is really easy.


What I meant was, only you know what you want the side to look like, I can only help with the technical parts.


[8|]



c1sissy -> RE: Graphics question (4/22/2003 21:53:49)

Hi Visualingo, Welcome to the family at Outfront!

Ok, now i did go into photoshop and did try this out.

I guess what I want is a color that sort of fades. Maybe like a light blue or something in that area that fades away.

I' m sort of playing right now. Oh, and i wasn' t going to use this in frontpage as of yet. I have a page that I have been forever working on in html. I don' t like how I have it and want to do soemthing a bit different with it.

I read somewhere that you use the gradient tool, however, I can' t seem to get it to do what I want it to do. I have uploaded what I had played with. I' d like it a bit darker then this, and to fade from the left towards the right, until it is white. Also, tried to get it to save as a .gif but it didn' t look right. As a jpeg it will take up too much room, wouldn' t it?

thanks in advance.

[image]http://www.frontpagewebmaster.com/upfiles/5813/Ki18460.jpg[/image]

I have been looking at a few books on bookpool.com

1. Designing Web Graphics .4: The Definitive Guide to Web Design & Development

2.Photoshop 6 for Windows and Macintosh: visual quickstart guide

3.Learning web design a beginners guide to html, web graphics and beyond.

there were seveal more that I had looked at but cant remember them at this moment.



Visualingo -> RE: Graphics question (4/22/2003 22:55:42)

Thanks for the welcome.

There are two ways to get what it sounds like you want. First it sounded like you just wanted a blue fade. I would create the same size file as above (maybe even 10 pixels high if it is a straight fade with no kind of graphical elements). Create your gradient (blue and white), drag the gradient tool starting where you want the blue to be 100%, using SHIFT to contrain the angle and let go of it wherever you want the white to be 100%. It will fade everything in between.

As for the image you uploaded, that image looks marbleized or cloudy. If you want that to fade from left to right, try this:

1. Select your layer

2. At the bottom of the Layer palette there is a button that says " Add a mask" . Press it.

3. Select the mask (it is the white box to the right of the thumbnail on your layer palette).

4. Select the gradient tool (it will be black to white). Anything pure white on this quick mask will be shown 100%. Everything pure black will be hidden. Greys will show whatever percentage of white they are.

5. If the gradient is black to white (left to right), click where you want the image to be pure white and while holding shift to constrain, drag to the left and let go where you want the image to appear 100%. It will mask the image with a nice smooth fade.

Does this make sense? Here is my version I quickly made for you.

I increased the contrast and lowered the brigtness to darken the image you posted. Hope it helps.



Nancy -> RE: Graphics question (4/22/2003 22:59:54)

If you are careful you can make and use a gradient as you are wanting. I' ll see if I can explain the steps I used in Photoshop to make one like you described, with a small file size.

1. New Image - 1600px wide by 5px high
2. since the image is difficult to see and work with at 100%, I blow it up to 300%.
3. Set you foreground and background colors to what you want. In the sample I made I used a light blue and white as background.
4. Gradient tool using the foreground/background choice - and I just use the tool for only as much as I want the gradient to be - for example only about the first 100 pixels. The balance of the image - the 1500 pixels left over of the width - will become solid for the background color you chose. In my sample this was white.
5. Save for web - I can then optimize - my sample used about 64 colors, and is less than 1 k.

By making the width very wide, it should fill the screen for most all people out there, and only tile down the left side. By having a very small height, the file size can be kept very low.

Here' s a screenshot from Photoshop v.6, and the blank line you see is only how far I used the gradient tool. Actually for this quick sample I didn' t go quite as far as 100 pixels, but I think you' ll see what I mean.

Hope this helps.

Nancy



[image]http://www.frontpagewebmaster.com/upfiles/7/Nl30168.gif[/image]



Visualingo -> RE: Graphics question (4/22/2003 23:11:17)

Or it can be as easy as Nancy made it!

As for the file format, try using the 4-up function when Saving for Web. This way you can select a few different types of formats, and see which one looks best and the filesize it creates. If you notice with Nancy' s example, since it is a .gif, you can see the gradient steps. Jpeg should look a lot smoother and with such a small image, the filesize shouldn' t be that bad. Just set the compression at 60% or so.



Visualingo -> RE: Graphics question (4/22/2003 23:12:45)

quote:

5. Save for web - I can then optimize - my sample used about 64 colors, and is less than 1 k.


Or use more colors in the gif. Is still shouldn' t be that big.



c1sissy -> RE: Graphics question (4/22/2003 23:14:08)

Visualingo:
You have it pretty good as to what I want, and lol, yes I did use a bit of the cloud feature since it wasn' t doing what I wanted. Your color spreads a bit more towards the right then I am trying to get it to go.

Nancy, that is exactly how I would like to do it. Now I did get something like that, lol, forget what I did, I think my brain is a bit on the numb side right about now. What I did notice was that the fade wasn' t exactly a fade. It sort of stepped down in color. There were lines in it as it faded out. I tried to blur it a bit, and a bit more,but it didn' t fade it away. I' m not sure if you know what I am talking about. Its sort of hard to explain it.

Thanks guys for your help. I think I' m going to try that tomorrow and see what I come up with. Photoshop can be a bit intimidating with all the tools and things in it,[:p].



Visualingo -> RE: Graphics question (4/22/2003 23:22:57)

quote:

Your color spreads a bit more towards the right then I am trying to get it to go.


That all depends on where you end the gradient. Just play around with it until you get it how you want it. Good luck!



c1sissy -> RE: Graphics question (4/22/2003 23:39:31)

quote:

As for the file format, try using the 4-up function when Saving for Web.


Visualingo:
I did use the 4 up when saving it for web. However, for some reason it didn' t show up so great in there. It actually got white! I guess I could have saved it and checked it to see what it did.[;)]

Thanks for all your help!



c1sissy -> RE: Graphics question (4/23/2003 8:56:58)

This is what I came up with. I can' t seem to get this to be a smaller amount of blue. According to the grid that Nancy is using, I think I would like the blue to start fading at about 2-3 This is what I would love to achieve, however,no matter how much I play with it, I can' t get it to do this![:@]

[image]http://www.frontpagewebmaster.com/upfiles/5813/Us54819.jpg[/image]



TJ -> RE: Graphics question (4/23/2003 9:24:51)

C1sissy

Sorry but i have only got PSP here so this might not help. In the flood tool I select the gradient and then have slider options as to where the colours should start and fade. For example this is a black/blue fade with different levels set for the black



HTH

TJ

[image]http://www.frontpagewebmaster.com/upfiles/718/Hf99898.jpg[/image]



c1sissy -> RE: Graphics question (4/23/2003 9:42:23)

TJ:
I have an older version of psp. I think it is 3 or 4. Trial download. Maybe I should try it in there to see what I get?

I tried yesterday but didn' t see gradient in the tools.



c1sissy -> RE: Graphics question (4/23/2003 13:57:56)

Well I finally figured it out, sort of. I dug out my uh hem photo shop for dummies [:D] Found a brief thing in there on gradients, and worked through it.

[image]http://www.frontpagewebmaster.com/upfiles/5813/Yw66653.jpg[/image]

If you could let me know what you think of this one?

Now, Rounded Corners, here I come!!!!



Visualingo -> RE: Graphics question (4/23/2003 14:36:32)

quote:

Rounded Corners, here I come!!!!


Don' t get ahead of yourself now. j/k [;)]

Just let us know when you want to do those!



[image]http://www.frontpagewebmaster.com/upfiles/7594/Ec88429.jpg[/image]



_gail -> RE: Graphics question (4/23/2003 14:56:00)

Ooooh wow! Good meaty questions and scads of useful info in the replies. I must study this thread and will have related questions myself. But first:

Deb, this isn' t a direct answer to your question, just some info about using PS which may help a tiny bit.

I often find PS' s default settings work best. Sometimes I tweak styles and play with sliders and gizmos so much that settings gets whacked out. Each time you exit the program it saves your most recent settings and, speaking for myself, they are often not worth saving.

Every now and then I reset PS preferences to their original (default) settings. Here' s how for the Windows OS, per Adobe.


To restore all preferences to their default settings:

Press and hold Alt+Control+Shift immediately after launching Photoshop or ImageReady. You will be prompted to delete the current settings.

New Preferences files will be created the next time you start Photoshop or ImageReady.



Now just start all over from scratch. [:D]

gail



c1sissy -> RE: Graphics question (4/23/2003 15:04:01)

[:D][:D][:D]

Visualingo:
lol!!!

If I can accomplish that little ole line that was giving me such a hard time, I can do anything!!!!![:)]

Your graphic looks easy.

Problem was that I didn' t have the options panel open. So the way that I was going about it was most likely the wrong way. Also, couldn' t find the gradient button, until I started to open some of the little arrows on the tool bar!

Once I got the options bar going, it was a breeze, well sort of! lol, I can see that there is much to learn yet with this photoshop!! grin.

Gail
quote:

Every now and then I reset PS preferences to their original (default) settings

I did come across this method as I was trying to figure out what I was doing! And I figured that If I did this, I would get rid of some of the blunders that I had accomplished! lol!!!!!

Thanks for all the help everyone. Visualingo, when you get time, lol, you can give me a bit of an explaination on what you did with that really sharp looking thingie! roflol!!



Visualingo -> RE: Graphics question (4/23/2003 15:08:47)

That' s a good one to know. I know that PS6 has a way to reset everything through preferences, but it looks like this option is not as readily available in PS7.

There are times when my cursor decides to change for no apparent reason. Also, a certain font at my work makes every other font italicized and the only way to fix it is my resetting.


Back to the rounded corners, there are other programs out there that will do them automatically for you. e-Picture Pro and Adobe Illustrator come to mind. ($129 and $399, respectively)



Visualingo -> RE: Graphics question (4/23/2003 15:21:45)

quote:

Also, couldn' t find the gradient button


Yeah, the later versions of Photoshop hid the button behind the fill tool! It took me forever to find it!!

Actually, I just noticed that Photoshop 6+ has a rounded rectangle tool, so I' ve been doing it the hard way for these past few years!

The rounded rectangle tool is hidden with the line tool, just hold the button down until the other options appear. In the options panel, set the radius. This determines how round the corners appear. Then, just click drag and draw your rounded rectangle!

You will notice a slight black line around it. This is just a guide. If you go to View, you can turn off Extras. Then the line will disappear! Or you can right-click on the layer itself and " Rasterize Vector Mask" .



Visualingo -> RE: Graphics question (4/23/2003 15:23:11)

Now if you are using less that PS6, let me know and I will try to make a short tutorial for you. [&:]



c1sissy -> RE: Graphics question (4/23/2003 15:50:45)

HI Visualingo:
I have photoshop6.

I ran across a tutorial for paintshop pro while looking for tutorials for photoshop, that had sort of the design that you have above. I saved it in word so that I could go back and look at it.

I have a tutorial marked for rounded corners, They however, suggest that you have your page planned out with your tables and colors so that you get your corners the exact color of the page. So, that will be a bit in the upcoming days, lol.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
7.910156E-02