Making of the Background, Part III

Part 3!!


PART   I - In the beginning.
PART  II - Masks!
PART III - Stripe on strip action.
PART IV - Putting it to work.


I'm going to be honest here, you did not really need the mask in part 2. But I did it anyway, it was good practice for whats to come!!

We have a nice fade to black, but lets add some spiffy web 2.0 stripey things on top of the stripes!!!

Make a new canvas by going File > New (Ctrl+N). Make it 8 by 8 pixels.

We made a new small canvas. Why, you ask? We are going to deffine a pattern so we can fill an entire space with just once click instead of having to draw a whole crapload if lines!

You can zoom in with the Zoon Tool (Z) or you can use the scroll wheel when holding Alt.

Press and hold the Brush Tool (Ctrl+B) and select the Pencil tool. Now draw a diagonal line over the canvas. When happy, go to Edit > Define Pattern, give it a name and hit OK.

  

We have now made a pattern that will show diagonal lines when repeated. You can add a shadow or other fancy stuff, but be sure to remember that you need to draw the line in the blank corners too when making a line more than 1 pixel thick!

Go to your background file. Layer > New > Layer (Shift+Ctrl+N) and use the Paintbucket Tool (G) to fill the layer with the pattern you just made. Also set the overloay mode to Multiply.

  

If you cant find the Paintbucket Tool, click and hold the Gradient Tool to see it.

Now, repeat the layer process you did in Part 2. Click the Add Layer Mask button, fill it with either black or white using the Foreground and Background Fill Tools and make it fade to transparent with the Gradient Tool.

  

It's done!! You can spice it up if you want, but I'm going to leave it here. I wanted something simple yet different and not too hard on the eyes.

Lets save it propery!! We only need one slice of this image.

Go to  Image > Canvas Size. Make the image 8 pixels wide, the same width as our pattern. Now save it as an PNG in order to prevent JPEG compression artifacts that would fudge up the effect.

 You are basicly done now. However, join me in the fourth and last part of this tutorial where we will look at some places to use this image!!

Take care. 

Making of the Background, Part II

 Allright, lets get this going!


PART   I - In the beginning.
PART  II - Masks!
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. 

Make sure you have set it from the Foreground Color to Transparent, instead of Foreground to Background. You can change that in the top left, as seen in the screenshot.

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!!!

300

As I type this right now I have 300 followers!!

Seriously guys, what the fudge?
I dearly love every single one of you!! The second part of the tutorial is coming up, still working on that!!
You should check out part 1 here! 

In the meantime, have a cookie!!

Hmmh, that was good, right?

Many many love to all of you, I will keep the good stuff comin!

Making of the Background, Part I

Al lot of you guys have reacted on my request for feedback on my new design. First, thank you so much!!! Really appreciate it, even the negative feedback. It's still usefull.

PART   I - In the beginning.
PART  II - Masks!
PART III - Stripe on strip action.
PART IV - Putting it to work.

I decided te make a tutorial about how to make a background. It will be based on the current one, but feel free to modify it how you see fit.
Also please note that this tutorial will be catered to beginners. Advanced Photoshop users will still be able to learn something from this however!

First, we need a general idea of what to do. I wanted a stripy background that fades to black with a possible cross hatch like pattern on it.

First thing I did was google some reference.

I Googled colorfull.

The second image suited my needs perfectly

I did not make this image!!!

Now we got some reference, lets op up Phtotoshop!!!

First of, lets make a new document!

Got to: File - new (ctrl-O), and make it 3000 pixels long, and around 200 wide. 

This will be the background. The idea is to have it tiles across the entire width of the screen, and have it fade to back, or the colour that you want.

Now import the colorfull picture to your canvas.

You can just drag it on Photoshop, and then drag the picture's layer onto your background canvas, or you can copy it from your browser, and then simply paste it onto your canvas in photoshop.
Now that we have that setup, lets get going with the cool stuff!

 Select the Rectengular Marquee Tool (M) and drag a narrow strip over an area you like. Then hit Layer - New - Layer via Copy (Ctrl-J) in order to copy your selection to a new layer.

 If you dragged it horizontal, just use Free Transform (Ctrl-T) to rotate it vertically. If you hold  shift while you rotate it will snap at 45 degree angles, making sure you dont skew it. (Or just go Edit - Transform - Rotate 90°.)

Now use the Free Transform (Ctrl-t) to stretch the new layer waaaaaaay out. Make sure you at least cover the entire width of you canvas. 

 This will give you a lot of stripes!! repeat the proces a couple of times to get more variety. Import some more pictures and get samples from them.

Fill the entire height of the canvas with stripes. When satisfied, select all the layers that make up the stripes and click Layer - Merge Down (Ctrl-E).

This will merge all the loose layers to one. Now we will change the colours up a bit.

Copy (Ctrl-J) the stripes layer, and flip it. Either with the Free Transform tool, or by going to Edit - Transform - Flip Vertical. Now set the layer blending options to Multiply.

Feel free to change it up here. If you want to modify some stuff or don't be afraid to experiment around!!


That was all for now, join me again next time for Part 2 of this tutorial where we will make the background fade and add a nifty pattern to it!!

See you next time, and as always, leave your comment, feedback and critics in the comments.

Love you guys!!!!!

MUSIC!!!

This song I heard what seems like a long time ago. It haunted me untill I had all the music that this duo had ever made. And still it left me wanting.
Here`s hoping it'll do the same to you! ;)

YES I CAN

I changed the design!!!

The standard template was getting really irritating and jarring on my eyes, so I sat down with photoshop in order to make it pretty!!!!!

I made the background myself, and used 2 shades of blue also apparent in the background in the rest of the design.

Short post, but a feedback driven one, let me know what you think!!!

Like it? Don't like it? Love the font? Hate the blue lines? Let me know and how to change it.

Cheers

- Weirdwhirl -

NEW II

Last week I posted a song I made.
No I'm posting a making off-ish kind of thing, yay!!

I used Abletone Live 8.1.1.

Mainly because I had to, but also because it is awesome, looks neat and works pretty darn good once you get how it works. I still donnt really get how it works, but I understand the basics.

The funny thing is, it is a mixture between a live dj program and, a midi-style sampler, a recording program and a mixdown mastering program.

I had mingled with some other music making programs (FL Studio, Nanostudio, etc)  and some concepts where the same.

Fun to see how some programs say fuck you to conventions and do their own thing, not allways with succes, but ableton did it really good.

So, this is ableton:

For the bass of the song I used an Operator, with 2 harmonic channels.

Funny thing, when I let a friend listen to the song, her crappy laptop speakers didn't produce a trace of the bass, thats how low it is ;) I keep forgetting that a big ass sub woofer at your feet isn't that common.

The lead was fun. I used a simple chord scheme,  and just threw notes octaves around. I was honestly surprised at how well it sounded!

So, do you guys wanna hear more about the song or should I move on to other things?