Log In Sign Up

Blinkie School - Photoshop


Welcome to the JustMommies Message Boards.

We pride ourselves on having the friendliest and most welcoming forums for moms and moms to be! Please take a moment and register for free so you can be a part of our growing community of mothers. If you have any problems registering please drop an email to boards@justmommies.com.

Our community is moderated by our moderation team so you won't see spam or offensive messages posted on our forums. Each of our message boards is hosted by JustMommies hosts, whose names are listed at the top each board. We hope you find our message boards friendly, helpful, and fun to be on!

Reply Post New Topic
  Subscribe To Blinkie Tutorials LinkBack Topic Tools Search this Topic Display Modes
  #1  
February 19th, 2007, 07:04 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
ETA: Newer and older versions of photoshop vary on a few of these steps. If you are having problems...read through the replies on this tread and you should find your answer.

Lesson 1 -

We will build off this lesson, so make sure you are comfortable with it before you move on. If you have questions please don't hesitate to respond in this thread. Download the free trial of photoshop here.

For first timers or those unfamiliar with photoshop, I suggest you download this TEMPLATE I made and skip to step 5. That way you don't get frustrated right off the bat. Once you are familiar with making blinkies with this template, start this tutorial from the beginning to learn how I made the template.

This tutorial will probably take you a while first time around or so. Don't get frustrated. Once you figure it out, it will take you under 10 minutes to make a blinkie. It seems like a lot of steps, but I am breaking them down pretty far to make sure you understand what we are doing.

Below is the photoshop toolbar. I have picked out the tools I use most frequently for you to reference with the tutorial. I use the others occasionally as well, but not as often in the blinkie making process.


One of the most important things in photoshop are called "LAYERS". They are your friends. On almost everthing you do, you will create a new layer before you start the next step. Here is what the layer box looks like and I have pointed out two of the tools that I will refer to. Also, the "eyeball" is very important too. Remember the eyeball.


Let's get on with it. And if you mess up, it is OKAY...there is always EDIT > UNDO or STEP BACKWARD.

STEP 1
The typical blinkie size it 150 x 20 pixels. Go to FILE > NEW. Make your width 150 pixels, height 20 pixels and resolution 72 pixels/inch. If it is showing something other than pixels to the side, you can click the drop down box and choose pixels instead of inches, etc. Make sure your color mode is set to RGB and I usually start out with transparent instead of white or color background. Click OK and you should have an image that looks like this:

STEP 2
Add a background color. Go to the top menu bar and choose WINDOW > SWATCHES. Just make sure that option has a check mark next to it. You should have a little box that looks like this on your screen:

Click on the color of your choice, I'm going to choose green. Next on your toolbar, choose the paint bucket tool, go to your image and click to fill it with the color you choose. It should look like this:

Now just to keep us organized. You will see in your layer box that your little box is green. Double click where it says "Layer 1" and rename it "Background". Now click the new layer icon at the bottom of the layer pallete (refer to pic above). A new layer should be above your background layer now.

STEP 3
Now, go to your toolbar and select the paint brush tool. It may be showing a pencil or something like that, if so, right click and choose paint brush. Now we need to select the size 2 square brush. Follow the picture below.

After you have the brush selected, go to WINDOW > BRUSHES to make your brush toolbar visable. Click on brush tip shape and change the spacing to 201% as the picture below shows:

Now I usually go to VIEW > ZOOM a couple times, so I can see better. Select a new color. I am going to just go with pink. On your new layer start at the very top left of your image. Hold the shift button down and drag all the way to the right side of your image. Should look like this. Some of your dots might look a little fuzzy. But that is okay!

Next, this is very important. Click a new layer and repeat the same process down the right side of your image, then the bottom and last the left side. Each time you start down a new side with your "dots" you need to start them on a new layer. So you will have a total of four "dot layers" and your background layer before we start the next step. It will look like this. I renamed them to dots 1 - 4.


STEP 4
We are going to make our 2nd set of dots, but a little differently. First, right click on your Dots 1 layer and choose Duplicate Layer. Do this with each one of your original dot layers until you have a total of 8 layers (4 originals and 4 copies). Now, click on your "Dot 4 Copy" and then click in the empty square next to Dot 2 Copy and a little chain link icon should appear in that box. This will link the two layers together for our next step. These two layers should be a copy of our side dots.

Click on your move tool and then hit your down arrow key on your keyboard two times. It should now look like almost a solid line up and down. Now on your top menu bar go to LAYERS > MERGE LINKED. That will merge those two layers together, so they are one, probably called just Dot 4 Copy. Now do the same thing with Dot 3 Copy and Dot 1 Copy, except instead of moving them down, you will move them right 2 spaces and merge those two layers. Should look like this now.

Next, lets merge the two merged copy layers together. Just like you did before. Click on one of the layers that says copy and in the other one, click in the blank box to the right until the chain link shows up. Now go to LAYERS > MERGE LINKED. You should have 1 copy layer now. Rename it "Dots Layer 2". Now your orignal dots. We need to merge them together. So, click on one of the original ones and link the other 3 originals to it and LAYERS > MERGE LINKED. Rename it "Dots Layer 1". Now you have two layers of dots in slighty different positions. This is what creates the "chasing" effect in the animation process.


Step 5
This is where those who decided to start with the template will join us. The template is black and white. There is a way to change the colors, but let's just keep it black and white and I will show you how to change colors later. Since I made my background green and my dots are pink, I need to select a color that I am going to be able to read better, so I am going to make my active color black. Click on the text tool. Start at the top left of your image and drag to make a text box the size of your blinkie. This should create a new layer in your layer menu. At the top of the screen there should be a toolbar similar to what it looks like in Microsoft Word, where you can change the font, size, position, etc. I am going with Arial, size 14, centered. Make sure that little box with the two "a"s is set to "smooth". Okay, type whatever you want, as long as it stays inside your box. For instance, "Making a Blinkie". Now, click your move tool and hit the arrow keys on your keyboard to move the text around to position you want. It will probably be a little too high up at first. In your layers menu, make sure the text layer is at the top of the layers. If it is not, click and drag it to the top. Another thing with layers is when you add a new one on top of another, it covers up the layer below it. We will just stick with one text layer for this tutorial. Will add more in future tutorials.


Step 6
Now we are ready to animate. Hit the Image Ready button at the bottom of your toolbar. It will open up Image Ready in another window. Click on your background layer. That will just remove the blue lines around your text if that is the layer you are currently on. At the top of the screen go to WINDOW > ANIMATION. Make sure animation is checked. You should have a screen that looks something like this. You may have more toolbars open than me and that is okay.


Step 7
Layer visibility. Here is where our little eyeballs come into play. In your animation toolbar, you should have one "frame". Now go over to your layer toolbar and click on one of the eyeballs of your dot layers 2. You will notice on your image, dot layer 2 is no longer visable. Now, in your animation toolbar, there should be a new frame button just like in the layers toolbar. Click that and it will duplicate your first frame. Now, go over to your layers toolbar and click the eyeball back on the dots layer 2 and then click on the eyeball on dot layer 1 to make it invisable.


Step 8
We are just seconds away now! In the animation menu where it shows 0 seconds at the bottom of each frame. I usually change that to .1 seconds. Do that on both frames. Now, press the play button in the animation menu. Your dots should be chasing each other now!! Final step is to go to FILE > SAVE OPTIMIZED AS and give it a name.


Can't see the dots very well, because of the pink, but you get the idea.

Congrats you made your first blinkie! Here is your "prize":
Reply With Quote
  #2  
February 19th, 2007, 08:25 AM
stephie1012's Avatar Platinum Supermommy
Join Date: May 2005
Location: new jersey
Posts: 12,985
hmm stuck on step 4 i dont have empty boxes next to my layers
__________________






Reply With Quote
  #3  
February 19th, 2007, 08:28 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Right next to the eyeball, there should be an empty square. See where I circled the link? That is the square I am talking about.
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #4  
February 19th, 2007, 08:56 AM
stephie1012's Avatar Platinum Supermommy
Join Date: May 2005
Location: new jersey
Posts: 12,985
heres what i came up with! this was much easier to follow than some other tutorials out there that use the pencil and grid way!





wdyt?


stephanie
__________________






Reply With Quote
  #5  
February 19th, 2007, 09:00 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Look at you hot stuff! Looks like I need to work on lesson 2, we have a graduate!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #6  
February 19th, 2007, 09:02 AM
stephie1012's Avatar Platinum Supermommy
Join Date: May 2005
Location: new jersey
Posts: 12,985
thanks i didnt like that one so i fixed the animation lol



stephanie
__________________






Reply With Quote
  #7  
February 19th, 2007, 09:09 AM
Mega Super Mommy
Join Date: Nov 2006
Location: The South
Posts: 2,260
looks awesome!
__________________
Reply With Quote
  #8  
February 19th, 2007, 09:09 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Yeah, sometimes you kinda gotta mess with the timing and stuff. I learn something new everyday! It looks really good. Keep practicing and I will work on getting the next step up!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #9  
February 19th, 2007, 03:03 PM
Mega Super Mommy
Join Date: Nov 2006
Location: The South
Posts: 2,260
bump
__________________
Reply With Quote
  #10  
February 19th, 2007, 03:50 PM
Caeden'sMama's Avatar Mega Super Mommy
Join Date: Jan 2007
Location: somewhere over the rainbow
Posts: 1,765
Yeah, this was SO much easier than other tutorials i've seen... Thanks!!!

Here's mine, btw, in case anyone cares...

Reply With Quote
  #11  
February 19th, 2007, 07:07 PM
Mega Super Mommy
Join Date: Nov 2006
Location: The South
Posts: 2,260
Quote:
Yeah, this was SO much easier than other tutorials i've seen... Thanks!!!

Here's mine, btw, in case anyone cares...

[/b]
wow thats great, good job!
__________________
Reply With Quote
  #12  
February 19th, 2007, 07:18 PM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Awesome!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #13  
February 20th, 2007, 04:07 AM
sighandbreathe's Avatar Veteran
Join Date: Sep 2006
Posts: 235
Send a message via AIM to sighandbreathe
Ok, it took me a while, and I'm using an old old old version of Photoshop, so I don't even have square brushes, but I did it! Now my problem is uploading it to here. How do I get it to blink once I've saved it?
Reply With Quote
  #14  
February 20th, 2007, 04:52 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Quote:
Now my problem is uploading it to here. How do I get it to blink once I've saved it?[/b]
Did you "save optimized as" in image ready after you animated it? If so, just upload it to photobucket. If you don't already have an account, it is free, just go to photobucket.com. Just choose upload photo and find your blinkie and hit okay. That should put it in your account.
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #15  
February 20th, 2007, 06:55 AM
sighandbreathe's Avatar Veteran
Join Date: Sep 2006
Posts: 235
Send a message via AIM to sighandbreathe
Ok, I got it now. Had to make a photobucket account, I couldn't figure out how to do it with my flickr account.



It kinda stinks, but now that I'm remembering what I learned back when I took a photoshop class, they're getting better. I'm also making siggys now!
Reply With Quote
  #16  
February 20th, 2007, 07:01 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Quote:
Ok, I got it now. Had to make a photobucket account, I couldn't figure out how to do it with my flickr account.



It kinda stinks, but now that I'm remembering what I learned back when I took a photoshop class, they're getting better. I'm also making siggys now![/b]
Cute, I like the dots!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #17  
February 20th, 2007, 08:24 AM
**Mary**'s Avatar mom to Tabby,Kk,Emi & Jay
Join Date: Feb 2005
Location: Georgia
Posts: 29,507
Send a message via AIM to **Mary** Send a message via Yahoo to **Mary**
here is what i came up with on my 1st try I had to repeat this twice...

<--this one is a lil jumpy so I tried again with the template..

__________________

Mary
mom to: Tabitha 9,Katelyn 7,Emily 5,Jay 2 and Natalie Marie (5.31)


Reply With Quote
  #18  
February 20th, 2007, 08:55 AM
Mega Super Mommy
Join Date: Nov 2006
Location: The South
Posts: 2,260
the 2nd one looks great!
__________________
Reply With Quote
  #19  
February 20th, 2007, 09:04 AM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
Good job!
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
  #20  
February 20th, 2007, 04:27 PM
SPinkD's Avatar Platinum Supermommy
Join Date: Jul 2006
Location: Oklahoma
Posts: 18,590
Send a message via Yahoo to SPinkD
bump
__________________
-Lindsay



Thank you RaspberryBeret for my gorgeous siggy!





Reply With Quote
Reply

Topic Tools Search this Topic
Search this Topic:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



All times are GMT -7. The time now is 04:54 AM.



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0