Question ! ! ! ! Image Issue....

[MartyBoi]

I have been having a Graphic's Issue, one that has been causing me to roll up into a little ball in a corner and calling for my dear old mommy....

I guess it would be safe to say, I am the Graphic Issue. Yes folks you herd it from me. I am the one and only Graphic Issue in my dwelling....

Anyways, as it goes I am trying to master HTML5 and CSS3. Well as most if not all of you know, IE 9, 8 ,7 is Microsoft's Terror threat to HTML5 And CSS3, that and a knuckle head such as myself....

As I wipe this lingering tear from my right eye, I ask, is their anyone out there that can help this poor helpless sad eyes of a Student with some Photoshop Advice? And please don't hold the idea I am using Photoshop to create the same visual effect that I got using CSS3 against me. I do have Illustrator, but really, I kinda suck at that as well.

Here is the HTML Mark-UP and CSS3:

body {
    background: #040404;
    background-image: -webkit-gradient(linear, left center, right center, color-stop(.4, rgba(32, 32, 32, .40)), color-stop(.4, transparent), to(transparent));
    background-image: -moz-linear-gradient( left, rgba(32, 32, 32, .40) 50%, transparent 50%, transparent);
    background-image: -ms-linear-gradient( left, rgba(32, 32, 32, .40) 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient( left, rgba(32, 32, 32, .40) 50%, transparent 50%, transparent);
    background-image: linear-gradient( left, rgba(32, 32, 32, .40) 50%, transparent 50%, transparent);        
    -webkit-background-size: 4px 4px;
    -moz-background-size: 4px 4px;
    background-size: 4px 4px;    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    margin: 15px 4px;

As you can see, I am a somewhat of an amateur, but at least I tried....

The attached image is what I get using the CSS3, I was hope to get the same using Photoshop, but I don't know how. Can someone help me out, Please?

With all silliness aside, I sure can really use some help....

bg-img.png

[ralph.m]

So do you want help with doing this in Photoshop, or in CSS, or both? Perhaps just describe the image you want: e.g. do you want a gradient going from once color to another, in which direction etc...

It's easy to do a gradient in Photoshop, and, at this point, more reliable that trying to use CSS3.

[MartyBoi]

So do you want help with doing this in Photoshop, or in CSS, or both? Perhaps just describe the image you want: e.g. do you want a gradient going from once color to another, in which direction etc...

It's easy to do a gradient in Photoshop, and, at this point, more reliable that trying to use CSS3.

ralph.m>>> I thank you for your response Sir, and perhaps your right. I understand using Photoshop would be easy indeed, but I have my heart set on trying to use CSS3, even more so that IE10 supports CSS3 Gradients now.

ralph.m, can you help me out on how to get Photoshop to create such an image using a Background Color and using Vertical Gradient Lines? Not do it for me, but give me an idea on how it's done.

Thank you.....

[dresden_phoenix]

Easiest 'cheat" is to build a pattern ( plus this way you can eve use it inside PS cheats), as long as we are cheating.. lets cheat some more.

For what I see what you want is a pattern consisting of alternating 2px stripes ( 2px #000 and 2px RGBA(32,32,32,.40)+#000 underneath)

So we open up PS and do just that!
1) Make a new 4px X 1px PS file
2) define your foreground color ( double click on the color selector at the bottom of the toolbar) to be #000 ( black)
3) select all -> OPTION(ALT on PC) DELETE ( this should give you a pure black image)
4) new layer
5) define your foreground color to be RGB (note there is no A but we'll get to that in a sec) to R:32, G:32, B:32!!!
6) select HALF of the area (2px), then do OPTION(ALT on PC) DELETE
7) go to the layer pallete, change the opacity to 40%
8) Flatten.. and there you go.

OPTIONAL
9) Select all --> EDIT>define pattern ( this way PS will save this as a pattern to fill any sections or vector shapes)
AND/OR
save for web ... as GIF.. PINSTRIPE.GIF ( or whatever)

if you bring that into your CSS you'll will see you get the same BG as the one you created with pure CSS.

Hope that helps