Views
608
Replies
1
Status
Closed
I am trying to create two simple rounded corner gif banners for a web page, but can’t seem to get the corners "un-jagged". I am by no means an experienced PS user but here is how I go about it: (PS 7.0 btw)
I create a new image 800X40 pixels to fit my web page, fill it with a gradient fill to match the web page colors and then create another image at 50X50 pixels with 72 ppi resolution. On the latter image I draw an circle on the canvas with the elliptical marquee tool with anti-aliasing checked off and feathering set to 0 and fill it with the foreground color, then I draw a square on 1/4 of the circle with the rectangle marquee tool, copy that and paste it into the 800X40 image as a new layer and move it to its corresponding end. Then I erase just enough of the first layer to get my rounded corner. The process is repeated for the other end switching to background color to match the other end. I then choose "save for web" with all layers visible, and save it as a gif file called "topbanner.gif" with the transparency button checked and no transparancy dither. I then flip the whole canvas and save it again as "bottombanner.gif" with the same settings.
The problem is it looks ok in PS, but when I view the page there is still somewhat jagged edges. (My monitor is set at 1280X960 32 bit color) I have played with the dithering options when saving as a gif, but to no avail. I have also used higher resolutions (eg. 100 ppi) for the circle image but that doesnt seem to help either.
What am I doing wrong?
Should I be using image ready to do this? (which I know even less about)
I can email a copy of the gif file or post it on a temp site if anyone wants to check it out.
thanks in advance!!
I create a new image 800X40 pixels to fit my web page, fill it with a gradient fill to match the web page colors and then create another image at 50X50 pixels with 72 ppi resolution. On the latter image I draw an circle on the canvas with the elliptical marquee tool with anti-aliasing checked off and feathering set to 0 and fill it with the foreground color, then I draw a square on 1/4 of the circle with the rectangle marquee tool, copy that and paste it into the 800X40 image as a new layer and move it to its corresponding end. Then I erase just enough of the first layer to get my rounded corner. The process is repeated for the other end switching to background color to match the other end. I then choose "save for web" with all layers visible, and save it as a gif file called "topbanner.gif" with the transparency button checked and no transparancy dither. I then flip the whole canvas and save it again as "bottombanner.gif" with the same settings.
The problem is it looks ok in PS, but when I view the page there is still somewhat jagged edges. (My monitor is set at 1280X960 32 bit color) I have played with the dithering options when saving as a gif, but to no avail. I have also used higher resolutions (eg. 100 ppi) for the circle image but that doesnt seem to help either.
What am I doing wrong?
Should I be using image ready to do this? (which I know even less about)
I can email a copy of the gif file or post it on a temp site if anyone wants to check it out.
thanks in advance!!
Must-have mockup pack for every graphic designer 🔥🔥🔥
Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.