Graphics question

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Graphics question

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Design >> Web Graphics >> Graphics question

Page: [1]


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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? (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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. < Message edited by c1sissy -- 4/22/2003 8:58 PM > _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to c1sissy)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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! (in reply to c1sissy)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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. (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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. 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. Attachment (1) < Message edited by c1sissy -- 4/22/2003 10:02 PM > _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Visualingo)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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. Attachment (1) (in reply to c1sissy)


Nancy Posts: 3626 Joined: 11/9/1999 From: Nebraska Status: offline	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 Attachment (1) _____________________________ Easy Estimates -- is a simple to use tool to quickly build a Web site page enabling visitors to quickly and easily create an estimate of the cost of services that you provide. (in reply to c1sissy)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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. (in reply to c1sissy)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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. (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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]. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to c1sissy)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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! (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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! _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Visualingo)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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! Attachment (1) _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to c1sissy)


TJ Posts: 101 From: Parkstone Poole Dorset UK Status: offline	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 Attachment (1) _____________________________ " Everyone has a photographic memory. Some just don' t have film" (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to TJ)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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 Found a brief thing in there on gradients, and worked through it. If you could let me know what you think of this one? Now, Rounded Corners, here I come!!!! Attachment (1) < Message edited by c1sissy -- 4/23/2003 1:59 PM > _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to c1sissy)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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! Attachment (1) (in reply to c1sissy)


_gail Posts: 2876 From: So FL Status: offline	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. gail _____________________________ Digicamhelp - Easiest place on the web to learn about Digit@l Cameras & Photography (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	RE: Graphics question - 4/23/2003 15:04:01 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!! _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Visualingo)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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) (in reply to c1sissy)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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" . (in reply to c1sissy)


Visualingo Posts: 61 Joined: 4/22/2003 Status: offline	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. (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	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. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Visualingo)

Page: [1]

All Forums >> Web Design >> Web Graphics >> Graphics question

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts