PART I - In the beginning.
PART III - Stripe on strip action.
PART IV - Putting it to work.
We now have a nice stripy colorful background. We want to make it fade into black, and make it a little less jarring to the eyes, as to improve readability and usability, for as far that is applicable in such a random design ;)
In short, what we are going to do is fill a new layer, add a mask with a gradient and then spice it up with some web 2.0-style diagonal lines.
Lets get crackin!!
First, make a new layer. You can do this by going Layer -> New -> Layer, using the hotkey (Shift+Ctrl+n) or by using the icon on the lower right of your screen.
Now, if you have modified your Foreground and Background colors, reset them to black and white by by using the Default Foreground/Background Colors shortcut (D). After you do that use the Fill Foreground Color shortcut (Alt+Backspace) to fill the entire layer with the foreground color.
Your entire canvas is now black!!! No worries, that what we want. Now lets do something with it!
Under your Layers panel, there is a little icon, looks like this:
This is the New Layer Mask button. Click it now, with the black filled layer still selected.
Nothing apparent will have changed, except there is a weird rectangle next to the layer thumbnail in the Layers panel.
That is your mask. As the name implies this will mask parts of your layer. Where that picture will be black, it will make the layer 100% transparent, where it is white the layer will be opaque.
Now Foreground Fill the mask layer (Ctrl+Backspace) and there are your stripes again! Select the Gradient Tool (G) and drag it from the bottom of the image to the top.
Blammo!! We have a gradient!! If you are not happy with it, feel free to add to it. You can drag the gradient bigger that the picture, smaller, make it transparent, etc. If you hit Switch Foreground/Background Colors (X) and you drag from top to bottom, you can remove some black where wanted.
That was is for now, please join me later for the last 2 parts!!!
Tutorials make the world go round.
BeantwoordenVerwijderenAnd you're doing this with photoshop?
+
Nice idea. Really liking the design of your site now.
BeantwoordenVerwijderenNice tutorial, thanks man
BeantwoordenVerwijderenwaiting for last parts :)
BeantwoordenVerwijderenAwesome background, and really good tutorial. Nice work.
BeantwoordenVerwijderenIt's always fun to watch a professional or skilled person to do his or her thing. Keep up the good work, I'm sure people can learn a thing or two by reading your blog.
BeantwoordenVerwijderenVery easy to follow indeed. I think even I would be able to create a cool background now :P
BeantwoordenVerwijderencool tutorial, thanks!
BeantwoordenVerwijderendude keep the tutorials coming. love it
BeantwoordenVerwijderenWell thanks !
BeantwoordenVerwijderenI may try this :D
BeantwoordenVerwijderenquite useful, thanks!
BeantwoordenVerwijderenPretty useful stuff, I like the fading for sure
BeantwoordenVerwijderenthis totally blew my mind, sick backround
BeantwoordenVerwijderenHow to Hack Life.
Cool, looking forward to more
BeantwoordenVerwijderenI'm new to photoshop, but this a pretty cool tutorial, I will definitly start watching your blog for more tips
BeantwoordenVerwijderenThanks man!
thanks man, great blog!
BeantwoordenVerwijderencool tutorial, thanks
BeantwoordenVerwijderen