Category Archives: tutorial

How to Create an Animated GIF in Adobe Photoshop CS3 {tutorial}

Please note for the purposes of following along, I’m using Adobe Illustrator CS3. Hopefully soon I’ll be updating my Mac and my Adobe software and can quit drooling all over the shiny new products in the Apple store. :)

Remember a few weeks ago when I posted this and promised a tutorial on creating an animated GIF? Betcha thought I forgot, didn’t you? I didn’t forget, but creating a tutorial is pretty time intensive, and lately it’s been tough to get a nice uninterrupted chunk of computer time. If only you could see my to-do list…it ranges from really cool art projects, to price updates for my Etsy shop to reminders to clean the bathroom. Seriously. I have a list making problem. But you’re here for a tutorial, and I digress…

Creating an animated GIF is easy.

It is. I wouldn’t lie to you.

1. Create a new file in Photoshop.

I made my file 630 x 630 to match the main content area of my site. You can make it any size you want, but I have a thing for symmetry and squares and balance. Just remember that the bigger you make your animated GIF, the larger your file will be, and the slower it will cause your site to load.

2. Go to your “windows” option at the top of your Photoshop menu bar.

Select “Animations.” You will see the window below appear.

{In this tutorial, I’m animating artwork that I previously created, so it was already saved in separate files. If you don’t already have artwork files ready, you’re going to create a layer in Photoshop for each frame of your animated movie. Layer one will be your original image. Layer two will show how the second frame will look, so you’ll be changing the size/color/location of your elements.}

3. Go to File–>Place in your Photoshop menu bar

Each file that you place will be a new layer, and a different frame in your movie. After placing the file, be sure to click back onto your image to get the prompt asking “Place this file?” Say yes, then repeat this process for each image to be included in your animated GIF. It’s also important to mention that your images all need to be the same size.

4. Go back to your Animation palette

Make sure you select the tab that says “animated frames”. Click on the right to select “Make frames from layers” from the drop-down menu.

(screen shot)

5. Each of your layers should now be represented as a square in your animation menu

Beneath each image you’ll see a time that tells you how many seconds the image will play on the screen before transitioning to the next image. Your choices range from .1 seconds (barely enough time for your eyes to register it) to 10 (which feels  like an eternity) and the length of time you select for each frame can be different. To see how your animation looks, press the “play” button at the bottom of the animation palette.

Let your sequence play through, then adjust your times accordingly. You might want some frames to be on the screen longer than others so that your movie “pauses” in certain places. If you want to change the timing of all of your frames at once, simply click on the first image while holding down the shift key and selecting your last frame. Every frame will now be highlighted, and will all be changed to whatever length of time you select.

6. If you want to smooth the transition between frames, you’ll use the “tween” button.

The tween button is located at the bottom of your animation palette, and it looks like three diagonal circles. When you click it, a window will pop up asking how many “tween” frames you want to add. The more frames you add the smoother your transition will be, but it will also increase your file size. If you’re creating a continuously looping animation (instead of one that plays once and stops) make sure you tween the last frame with the first frame, instead of the next frame. When you’re finished, hit “ok.”

7. Hit the play button again to test out your movie.

You might have to adjust your play times on your frames again.

8. Now decide how many times you want your animated GIF to play through.

If you select “continuous” looping, your movie will continue to play for as long as it;s on the screen. You can also choose to have the sequence play only once, or select “other” to repeat a predetermined number of times.

9. Now you’re ready to save your file

This part is important, so read closely. Go to File–> Save for Web and Devices. A window will appear  showing how your files will look saved at different sizes and resolutions. I normally view mine on “four-up” (you’ll find the tabs at the top left corner of the screen). On the right side of the screen, choose “GIF” from the drop-down menu. If you need to reduce your file size (remember, if you have a lot of frames, your file will be large) you can choose one of the lower quality options. One trick I learned in design school is to select a resolution that looks good, and then slide the “quality” slider until you see start seeing a degradation in image quality, then stop there.

10. If you need to shrink your file size even further, try using the “colors” option on the right sidebar to reduce the number of colors saved to your file.

Because I didn’t use very many colors in my art, I was able to reduce the number of colors in my file from 256 to 8 without seeing any reduction in image quality. This reduced my file size by over 70%. Play around with this option and see how it affects your image. If your image is going on the web (like I’m assuming it will) you want to reduce the size as much as possible to speed up it’s loading time. When everything is adjusted to your liking, hit save.

11. Now you test your image outside of Photoshop!

With your web browser open, drag the file icon into your window. Watch it do it’s thing, in all it’s GIF-y glory. Congrats…you created your first animated GIF!

Questions? Comments? Got an animated GIF to show off? Tell me all about it in the comments.

purple turquoise magenta and green kaleidoscope like design

20 Steps to Create a Simple Kaleidoscope Design in Illustrator

20 steps to create a simple kaleidoscope designAfter I posted this time lapse video a few days ago, several people asked me about some of the menus and features I was using to create the design in Illustrator. I thought it would be fun to go through the steps and show you how to create a simple kaleidoscope design of your own.

Please note for the purposes of following along, I’m using Adobe Illustrator CS3. Hopefully soon I’ll be updating my Mac and my Adobe software and can quit drooling all over the shiny new products in the Apple store. :)

1.  Open a new document. Change your dimensions so that the document is square. If you’re going to print your artwork at home, you’ll probably want to make sure it fits on a standard 8.5″ x 11″ piece of paper. I made my document 7″ x 7″.

screen shot of step one for creating a kaleidoscope in illustrator

2.  Use Command/R to turn on your rulers. Use your guidelines to mark the halfway point on both the horizontal and vertical sizes of your art board.

3.  From your toolbar, select the ellipse tool. Click on the center point where your guidelines meet, and use option/Shift to draw a circle radiating from that point.

4.  In your layers menu, label this layer “guides.” Lock the first layer, then create a new layer which you’ll name “shapes”.

screen shot of step three for creating a kaleidoscope in illustrator

5.  At the top of your circle (at what would be the 12:00 point), use your pen tool to draw a shape on the left side of your vertical guideline. Make the shape as simple or complex as you want.

6.  Using the reflect tool from the tool menu, hit option/click to reflect the image vertically.

7.  Select both shapes, and use the “Add to Shapefinder” option from your pathfinder toolbar to merge the two shapes together.

8.  With your shape selected, go to your rotation tool. Option/click on the point where your guidelines intersect at the center of the circle.

9.  When the menu pops up, type 360/12 (you can make the second number bigger or smaller. This is how many times your shape will repeat around the circle). Hit the “Copy” button.

10.  Hit Command/D (Repeat action) until the shape is repeated all the way around your circle.

11.  Select all of your shapes. Using your Pathfinder toolbox, select the Divide option. This will break up your design into smaller shapes where they shapes overlap. (If the shapes in your design don’t overlap, you can skip this step).

12.  Using your direct selection arrow (the white one), select sections of your design to recolor. You can also delete portions of the design if you wish.

13.  Once your design is recolored to your liking, select the entire thing again. Group everything together using Command/G.

14.  Choose your scale tool from the toolbar. With your design selected, click at the point where your guidelines cross at the center of the circle at hit option/click. Scale your image (I scaled to 60%). Hit the “Copy” button. You’ll now have a smaller copy of your design in the center of your circle.

15.  Hit Command/D to repeat the action one more time. Now you’ll have an even smaller copy on the image in the middle of the circle.

16.  Select your middle design. Go to Edit–>Edit Colors–>Recolor Artwork. From the menu that pops up ,select the button to randomly change the color order. Watch as the colors in your design flip around. Keep hitting the button until you’re happy with the ways the colors look, then hit “OK”

17.  With your rectangle tool, draw a square that covers the entire area of your page (in this case 7″ x 7″). Select a color for the inside, with no fill. Select Object–>Arrange–>Send to Back to place it behind your kaleidoscope design.

18.  Unlock your guide layer and delete it or turn it off.

19.  Go to File–>Export and save your file as a jpg.

20.  You’re done! Print your design, or save it as a cool new desktop image.

purple turquoise magenta and green kaleidoscope like design

Questions? Comments? Did you encounter any problems?
Let me know in the comments, and I’ll try to help!

If you aren’t feeling tech saavy, or don’t have access to Adobe Illustrator, don’t worry. If you like what you see, you can find many works of art created with a more in-depth version of this very process in my Etsy shop.

colorful kaleidoscope like artwork from video demonstration

Creating Kaleidoscope Art {time lapse video}

Don’t you love it when a project that’s been bouncing around your head for a long time finally comes to fruition? For a few months now, I’ve wanted to create a time-lapse video of the process I use for creating kaleidoscope art on my computer. The thing was, I wasn’t really sure how to go about it. After learning about Screenr, a free online service for recording screencasts on your PC or Mac, I got really excited. I had the tool, now I just needed the time (all you parents out their nodding your heads in agreement – can I get a “hell yeah!!!” ?)

Well, the art gods were kind to me yesterday, because my little munchkin took a three hour nap. This turned out to be doubly fortunate, because making the video was a rather slow process. The free version of Screenr only allows for five minutes of recording at a time (you can upgrade to a paid version for $20/month), so I had to work in five minute increments, uploading my video when the five minutes was up and then recording a new file.

I was also worried about how well my five year old Mac would handle a ton of large video files, so I had to limit how much I recorded. I can spend several hours on my more intricate kaleidoscope art, but I didn’t want hours of footage clogging up my desktop. This meant I had to make my image a little less complex than I normally would. After I completed my drawing in 6 five minute segments, I imported the files into imovie and increased the playback speed to 800x the original speed. Half hour hour of video footage down to just under four minutes!

colorful kaleidoscope like artwork from video demonstration

For my first attempt at something like this, I’m pretty happy with the result. It was definitely a learning experience, and something I want to do again in the near future.

Have you ever recorded your creative process? How did it turn out?

computer malfunctioning

heart attack and a half {when WordPress goes awry}

computer malfunctioningIt seems that the blogging world is basically divided into two camps: WordPress people and Blogger people. I haven’t tried Blogger, so I’m not here to endorse one over the other. I found WordPress.com by doing a quick Google search about blogging platforms, read good things about it, and went with it without too much research into anything else. I stuck around there for a couple months, then decided I’d be better off with a self-hosted WordPress.org site. Why? I touched a little bit on it in this post, but mainly because:

  • I wanted the freedom to sell artwork through my site (not allowed on a free WordPress.com site)
  • I wanted the freedom to play with the CSS and change the look of my site (a feature you have to pay for with WordPress.com)
  • I already owned a domain name and was already paying for hosting from a portfolio site I built in school. I wasn’t that in love with my existing site (for one thing it was built in flash which is bad, bad, BAD for SEO!) and I wanted to integrate my portfolio and blog into one place.

These and a couple other reasons were enough to convince me I should be hosting my own site, so I switched over to WordPress.org, easy as pie. The only problem was that the theme available to you when you self host are not the same themes you can choose from on WordPress.com. The theme I had been using wasn’t an option anymore, and WordPress defaulted to the starter theme, called Twenty Ten. I looked through the other theme options they offered, and eventually decided to just stick with Twenty Ten and customize it as much as I could. It offered a lot of features I wanted, and when i needed help there were tons of Twenty Ten tutorials available online. For someone a tad bit rusty with my CSS, this was a huge plus.

But I overlooked one very big thing. WordPress tells you, over and over, that you should NEVER directly edit your Twenty Ten CSS file. Since its the default theme, it gets updated with every WordPress update. That means if you upgrade to a new version of WordPress, your changes will be overridden with a brand new CSS file, and your site will default back to Twenty Ten’s original look. Not good to lose all that work with a click of a button. And don’t even think about going to the WordPress help forums when that happens. You’ll basically get a response equal to “Well dumbass, you should NOT have been directly editing Twenty Ten in the first place. We TOLD you that.”

What they recommend is that you create something called a child theme, which is a fancy way of saying a theme that REFERS to Twenty Ten, but stands on its own enough to not be affected when WordPress (and the default Twenty Ten theme) updates. The problem was, by the time I realized I should have made a child theme I had invested a RIDICULOUS amount of time into customizing my site (this was before i discovered Firebug) and i thought it was too late to create one. I REALLY didn’t want to start from scratch, so I just kept editing Twenty Ten and hoping I wouldn’t need to update any time soon. For those of you who are wondering why that’s such a bad idea, it’s because you miss out on any cool new features WordPress comes up with. Also, WordPress updates their security with each new version, so if you turn down these security fixes you’re greatly increasing your chances of getting hacked. Not a good risk.

Then I discovered this alternate solution on one of the WordPress forums. Basically, you go to your hosting site, and through FTP you download a copy of all the Twenty Ten files (they’ll all be together in a folder). Then you find the Stylesheet for Twenty Ten (Style.css), and copy your existing Stylesheet (in your WordPress admin menu just go to Appearance–>Editor, and copy and paste EVERYTHING in the Style.css file). Replace the content on the Twenty Ten stylesheet you downloaded with your current one. Also, make sure you change the theme name at the top of the Style.css file. I renamed mine “rabbit”. Then you just rename the folder containing all of the former Twenty Ten files, zip it, go to Appearance–>Themes, choose “Install theme” tab, then click on upload. Upload your zipped folder and activate the “new” theme.

Now you can update WordPress without losing a thing! Well, I had to re-link my header and background images from my image library, but everything else stayed intact. YAY! I made it through the transition unscathed. I always get a little nervous about these things.

So here’s where my heart attack comes in….

After updating WordPress, I see that I have seven plugins that needed updates. No sweat. For those of you who don’t know, a plugin is a feature you can download to add to the functionality of your site…sort of like an app for your site. There are plugins for slideshows, putting images in your sidebar, reducing spam…all kinds of good stuff. Anyway, seeing that I needed updates, and feeling cocky (hey, I had gotten around my lack-of child them problem!), I clicked the box next to each plugin on the list and selected “update all”.

This is when disaster struck.

Everything went smoothly until I got halfway down the list, and a red warning box popped up. I don’t remember what it said exactly, something about a system error and incompatibility. I decided to go back to the admin area and saw an empty white screen with this unsettling warning:

Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 122880 bytes) in /data/22/2/63/140/2063955/user/2262583/htdocs/wp-admin/includes/template.php on line 1494

Ummm….what???

Uh oh.

You do not EVER want to see the worlds “Fatal error” with anything concerning the site that you so lovingly constructed. This completely freaked me out. I couldn’t access the admin area of WordPress at all. Oddly enough, when I typed in my plain old web address everything was fine. My actual site was still in existence and doing fine, but without access to the Admin area I couldn’t make any changes or additions to it.

Google time. After all, Google has gotten me through many a crisis (and reminded me how to jump-start my car on more than one occasion).

Doing a bit of research, I learned that when a plugin becomes incompatible (like after an upgrade), it can wreak havoc with your site. I was pretty sure that’s what had happened to me, since everything was just peachy until I decided to update plugins. I read that if you just delete the offending plugin everything should go back to normal, but I had no idea which one was running amok (I had 15 installed, and I had clicked “update all”).

One site I found recommended going back to your hosting site and downloading your entire plugin folder to my hard drive through FTP. Then delete the contents of the WordPress plugin folder on your hosting site. Now, add the plugin files back in one by one, refreshing WordPress after each plugin is added. When the ominous white screen reappears, you’ll know which little bugger is causing the problem and you can delete it to oblivion. Turns out the plugin screwing up MY site was one that I didn’t even USE anymore and had forgotten to delete. Nice, huh? I felt a little better when I read that this is a fairly common problem that happens to most WordPress users at some point or another.

So there you go! Why write this whole novel on two problems that turned out to be basically nothing? To show you not to be afraid, and not to panic when something goes awry. Just take a deep breath, read a couple of tutorials, and go at it!

And if you still can’t fix it after that?

Well, then you have my full permission to panic.

rollover button magic in your WordPress sidebar {resolution of an epic struggle}

rolloverimagesampleFor some reason I struggled, and struggled, and STRUGGLED with making rollover buttons for my site. I don’t know what my problem was, but it felt like a monstrous challenge. I read tutorials. I watched videos. For some stupid reason NOTHING was working. All I wanted was cool link buttons for my sidebar than changed when you moused over them. When the link worked, the rollover image didn’t change. When the image changed, the link didn’t work. What’s a girl supposed to do? Scream and bang my head against the desk?

It was annoying, frustrating, and drove me absolutely up the wall. I hate feeling outsmarted by a computer, so I refused to give in and be happy with my not-nearly-as-cool static buttons. Eventually….. I got it!!!! I swear, the clouds parted, angels sang, and my little sidebar button changed colors when I clicked them. {cue ooooohhs and aaahhhhs…..} It was a beautiful moment. Which got me thinking, maybe I should post my resolution here, and save someone else my pain and suffering.

Ready? Here we go.

First, you will need to create two graphics. You need to decide what you want the image to look like before you click on it, then after you click on it. Maybe something will change size, or change color. Maybe an additional element will appear. Whatever you do, make sure both your before and after images are the same dimensions. If your first graphic is 200 x 200px (like mine is) then make sure your second one is as well. When you save them, it’s helpful to add “rollover” to the second image so you don’t get them confused. Example: myimage.jpg and myimagerollover.jpg, or myimage2.jpg and myimage2rollover.jpg

Here are my two graphics.

Now, you need to update both images to your word press library. Make sure to note the location of the images, as you’ll need it later in the process. Either write it down, or make your life easy and paste it in Text Editor (Mac) or WordPad (PC). You’ll want to make sure your editor is set to Plain Text and not Rich Text.

So now your images are in your library. Great. Now you’re going to go to Appearance–>Widgets in your WordPress Dashboard. Once you’re there, you’ll drag the Text Widget over to your sidebar. You will need one Text Widget in place for each button you’ll eventually have. For simplicity’s sake, let’s say you have two.

Here’s where it gets a little more complicated, so read carefully.

Type this code into your Text Widget. All of the purple text is going to be replaced with your own information.

<a href=”http://www.yourlink.com”

target=”_self“

onmouseover=”document.rollover_1.src=’http://www.locationofBEFOREimage.jpg’”

onmouseout=”document.rollover_1.src=’http://www.locationofAFTERimage.jpg’”>

<img src=’http://www.locationofyourBEFOREimage.jpg’

style=”width:200px; height:200px;”

alt=”rollover image sample“

name=”rollover_1“>

</a>

In case you’re still confused, I’m going to break it down a little further. {My notes are in italics}

<a href=”http://www.yourlink.com”
This is the page or site that you want the link to take you to

target=”_self“
If you want to link to open in the SAME window, enter self. If you want it to open in a NEW window (like if you’re linking to an external site), replace with _blank.

onmouseover=”document.rollover_1.src=’http://www.locationofBEFOREimage.jpg’”
Pretty self explanatory. Replace the purple text with the ACTUAL location of the image. Remember when you wrote it down or pasted it in Text Editor? Good. Now just plug it in. If you forgot to do this you can always go back to your image library and look it up again. Also, note the document.rollover_1. You need to name ALL of your buttons differently in order for them to work properly. Go with something easy, like button1, button2, button3 etc. You’ll be glad you kept it simple.

onmouseout=”document.rollover_1.src=’http://www.locationofAFTERimage.jpg’”>
You want to replace www.locationofyouAFTERimage.jpg with the ACTUAL location of it again. This is your original image again, the one your viewer saw BEFORE they moused over your image. However, if for some reason you DON’T want the image to go back to it’s original state, then enter the location of your rollover image again.

<img src=’http://www.locationofBEFOREimage.jpg’
This is the location of your BEFORE. Note that this is the SECOND time you’re entering this!

style=”width:200px; height:200px;”
These dimensions should match your own image.

alt=”rollover image sample“
Alt tags are important for people with screen readers. Basically, it’s a little description of the image for people who are visually impaired, or for people whose browsers don’t show pictures. You know when you hover your mouse over an image and that little description pops up? That’s an alt tag. Basically, describe your image, but keep it short and sweet.

name=”rollover_1“>
This needs to be different for each button you want to have. (THIS IS VERY IMPORTANT!) If you name them all the same things they won’t work right. Keep it simple and for your next button, replace all three instances of rollover_1 with rollover_2, or something equally easy.

</a>

Now that you’ve replaced all the important info with your own stuff, double-check EVERYTHING. Are all of your punctuation marks there? If they aren’t, stuff with go awry and your buttons won’t work. Then you’ll be sad and probably think my little tutorial here sucks. Also, when you’re pasting things into place make sure you don’t end up with double endings like .jpg.jpg or .com.com. That will mess things up too.

If you did everything correctly,
you’ll get an image that does this*:

rolloverimagesample
**  just a note, when I tested the code above in my sidebar text widget, everything worked fine. When I pasted it in the body area of the post, it didn’t work. So don’t use Firebug to take the source code for the image above for your sidebar…use the code I typed out! **

Want the code for a rollover image link within your post? Here it is…just delete the ‘ marks at the beginning and end of the code.

‘<a href=”http://www.yourlink.com”>

<img onmouseover=”this.src=’http://www.locationofAFTERimage.jpg’;”

onmouseout=”this.src=’http://www.locationofBEFOREimage.jpg’;”

src=”http://www.locationofBEFOREimage.jpg”

alt=”rolloverimagesample“

width=”200” height=”200” />

</a>’

Go ahead and try it! Don’t forget to let me know how it works for you!

why i now {heart} photoshop actions

halloween still lifeI’ve been playing with Adobe products for something like ten years now. I went to school to study design, but it’s just one of those things that you NEVER stop learning. The more you learn, study, research, and look at what other people have done, the more you realize you don’t know. I don’t really find the Adobe products to be all that intuitive. Sometimes you have to sit down with someone who knows their stuff, or read a couple of online tutorials, before some of their more hidden features become apparent. Once they do though, it’s like having a whole world of possibilities opened up to you.

I already vaguely knew about Photoshop actions, but I thought of them as being more like filters. What’s the difference, you ask? Well, a filter is a one step change that you apply to your image to create an effect. An action creates an effect too, but it does so by “playing through” a series of steps. Still confused? I was too, until I spent a bit of time online doing a little research about them.
before and after applying an action sequenceLet’s say you want to apply a vintage effect to one of your photos. If you download (or create yourself) an action to do this, Photoshop will breeze through the entire series of steps it takes to create that effect within a matter of seconds. Achieving that vintage look might involve playing with your contrast, color balance, expose, borders, filters, etc. With an action saved to do this, you simply hit “play” and within a few seconds you watch your photo transform. If you have a series of steps you use all the time (like if you always want your blog photos to have a vintage look, or be watermarked), saving those steps as actions can be a HUGE time saver. It’s also a great way to create an effect without enduring hours of trial and error, making minor adjustments as you go (although it you have the time, I personally think trial and error is one of the BEST ways to learn. It’s frustrating at times, but once you get it right that knowledge sticks!)

So here goes, a mini tutorial on how to use Photoshop actions. For simplicity’s sake, this one is going to focus on using actions that you’ve downloaded, rather than creating them yourself.

locate an action graphic

Go online, and find an action that will apply the effect you’re looking for. What effect do you want? There are actions available to do everything from whitening teeth, to giving your photos a “grunge” look, so applying watermarks over your images.  Smashing Magazine also put together a great list of them here. Spend a minute or two with your friend Google, and you’ll find lots of resources.

download the file graphic

Many of the files will come zipped, so you’ll need to a decompression program if you don’t have one already. Don’t worry, Stuffit Expander is free and easy to install. (Please note the free version only lets you UNZIP large files. If you need to compress them you’ll need to get the paid version). Once unzipped, you’ll be looking at a file with a .atn extension and a blue Photoshop-esque icon.

You’ll want to save the files to
Applications/Adobe Photoshop/Presets/Actions

open the file graphic

In Photoshop, open the file that you’ll apply the action to.

screen shot of halloween picture in Photoshop

select your action graphic

Go to Windows->Actions and your actions pallette will pop up. Your actions should be loaded up in the menu. If not, simply right click on your Actions pallette, go to “load actions” and select your action from the location you saved it to.

screen shot showing how to open actions pallette

Click the action you want to use. Some downloads will have multiple actions saved within the same folder so you’ll want to pay attention to which one you’re applying. Also, you want to make sure you’re selecting the root folder for the action (the main folder that contains all of the sub-folders).

hit play graphic

At the bottom right corner of the Actions pallette, you’ll see a button that looks like the play button on a dvd player or stereo. Hit that. Photoshop will fly though the series of step and your picture will be transformed.

undo or save graphic

Hate the effect? Go to your history window, and go back in the series of steps until you get to a step before the action was applied. In the case of actions Command/Z (undo) won’t work, because it will only take you back ONE step.

Like the action? Then save it. My advice is to do “Save As” and save it under a different name. That way, you still have your original untouched image if you should ever need to go back to it.

Easy, right? Just for a taste of what can be done, here’s the same photo with nine different Photoshop action sequences applied to it. Now, go play. It’s fun, I promise.

examples of effects applied using photoshop actions