Category Archives: technical things

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.

Android_photo_apps

My Favorite Android Photography Apps {because one is simply not enough}

Over the last few months I’ve really been loving taking digital photos with my phone. A lot of this has to do with the fact that once my old phone crapped out (at the mall while waiting in line to see Santa…don’t even get me started on how angry my daughter was that she couldn’t play Angry Birds while she waited like all the other kids) I got a new phone that takes about a thousand times better photos. When I think about the very first digital camera I ever owned that took one megapixel photos…yeah, it kind of blows my mind how far technology has come.

I love, love, LOVE my DSLR and it’s oh-so-crisp-and-lovely-lenses, but it just isn’t practical to lug around with my everywhere I go (some people are really good about this. I am not. In fact, I normally do not remember to have it with me unless I have the intention of taking photos when I leave the house.) I almost always have my phone with me (the “almost” is because while I do physically have it on me most of the time, I am horrible about making sure it’s fully charged. Trust me when I say I am the kind of person my phone company’s battery swap program was designed for). Plus, now that I have a phone with lots of memory storage, I don’t have to worry about it acting up and constantly freezing because I’ve filled it with too many photos and apps.

There are what seems like billions of photography apps out there, and I’m definitely not an expert on each and every one. Still, here are six that I use on a pretty regular basis that are worth checking out if you don’t have them already. Best yet, all of them are free!

Instagram

Unless you’ve been living at the bottom of the sea, or perhaps on the moon, you already know what Instagram is. Until roughly a month ago it was only available on iphone, but then the clouds parted, the sun shone down, and it became available on Android as well. Hallelujah! Seriously, not having Instagram was my biggest source of iphone envy (that and the fact that iphone users get the coolest selection of phone cases). The app makes it easy to follow your Twitter and Facebook friends, and allows you to take the now famous square photos and share them with your followers. Take your photo, apply one of their vintage style filters, load it up with hashtags, then share with your friends and. With a simple click of a box, you can geotag your photos and share it on Facebook, Twitter, Foursquare and Tumbler as well.

Photoshop Express

While this app does have some filters and borders, they’re nothing too exciting. I use it mostly for nut-and-bolts things like cropping, rotating, straightening, and for fine tuning things like exposure, tint, brightness and saturation. It’s touch sensitive, so you have to use a light touch or you’ll accidentally apply some very heavy-handed effects. Don’t worry though, they’re easy to undo and after a few photo editing sessions you’ll get the hang of it. The great thing about this app is that it saves your edits as a new photo file, so if you decide you hate the changes (or if you want to create several variations of the same photo) your original remains intact.

Pixlr-o-matric

Oh, filters, filters, filters. This app is freaking Filterpalooza. Waaaaay more filters than Instagram. In addition to the huge selection of filters and borders available, there’s also a big collection of lens flares, light leaks, burn, glitters and textures you can add to your photos. The app starts you off with a pretty basic selection, but then you can go through the (free) store and download any other effects that catch your eye. This is great, because you don’t end up with a bunch of effects you’re ambivalent about (I, for example, bypassed a whole bunch of fireworks and flame overlays, because I’ll probably never use them). With each photo, you can apply one filter, one border, and one effect. If you save the photo and then reopen it again, you can layer even more. Once you’re done, you can either upload it to the app’s gallery, or share it somewhere else (such as Instagram or Facebook).

Photo Grid

Ever see those photo collages people post and wonder what app they used?  This app does it. Just open the app, choose the photos you want to display (the number is flexible) then select the layout. Once your photos are filled in you can rearrange them as you like, and also change the background. There’s a large collage option, and also a small square one perfect for uploading your collage to Instagram.

FX Camera

Of all the apps I have, I probably use this one the least, just because the options are pretty limited. You have a fish eye lens effect, a Warhol style effect, a Polaroid effect, a mirror effect, and my personal favorite, a Lomo-esque toy camera effect. Nothing too fancy, but if you’re looking for something simple and easy to use, this is a good start.

Camera 360

I mentioned on Facebook the other day that I felt I was collecting an excessive amount of photo apps, so of course a friend fed into that addiction and suggested this one.  In addition to all of your manual camera controls like exposure, zoom, flash, timer, focus, etc, it also has a large selection of filters. There’s multiple retro, selective color, tilt-shift, Lomo, and sketch effects, plus more. It does most of the same things as other apps I mentioned, but the nice thing about this one is that you can take care of pretty much everything you need to do without leaving this app.

Recap

What I really like about having all these apps are the mix and match possibilities. You can choose your favorite filter from one app, your favorite border from another, and maybe layer one more from a third. It’s easy to go a little crazy, so you have to remember that the main purpose of these apps is to enhance your photos, not turn them into the equivalent of a bedazzled, glitter drenched, sequined, tie-dye shirt that my six year old would love. But sometimes, I guess that can be fun too.

Do you have any favorite photo apps? What are they?

screen shot of new site design

Heyyyyyyyy good looking {site re-branding!}

Notice anything different?

After a couple of weeks playing around with the layout in Photoshop, I finally have my new design up! As much as I liked my old design, it was feeling a little stale. I wanted something new, fresh, and crisp. Since so much of the artwork I post is colorful, I wanted something relatively simple, that didn’t compete with the art for attention. On the other hand, I still wanted something that was fun, my style, and spoke to the kind of work I do. Right now I love this design. I was a little worried that it was going to take forever to actually implement it in WordPress, but my CSS skills must have improved over the last year, because I made the changes in about 15 minutes without any kind of disasters, tears, or swearing (I feel like I deserve a gold star, or at least a cookie).

old header design

screen shot of new site design

Here’s what’s new and exciting:

  • New header design…reminiscent of the old header, but simpler and cleaner
  • New social media links, including a link to follow me on Instagram!
  • An actual photo of me! I’m known for not liking to get my picture taken and really disliking most pictures of myself, so we’ll see how long this actually stays up for.
  • I replaced the fancy rollover buttons in the sidebar with some simple gray category buttons. I couldn’t believe I got rid of them after all the effort it took to figure them out, but after looking at them all the time they were feeling too big and clunky, and the novelty had worn off
  • New font in my sidebar widgets and new link colors (hellooooo turquoise, I love you!)
  • I got rid of the Alice in Wonderland quote on the footer, and replaced it with my Twitter feed, category links, and recent posts
  • Changed the background

screen shot of my design process

Nothing too crazy, but it feels good to give the site a little makeover. I hope you like it too!

Color Obsessed {five sites to check out}

a little obsessed with color

I LOVE color. My favorite part of starting any new art project is going through the box of paint, or colored pencils, or whatever I’m using, and deciding on the color palette. I can play around with different color combinations for hours. It’s amazing to me how one or two small changes in color can completely change the entire mood of a project. Sometimes though, I find myself gravitating to the same five or six colors over and over, and realize that I need a bit of inspiration.

Here are  five of my favorite color-related sites.

Design Seeds

I subscribe to this blog via Google reader, and I can’t even tell you how many palettes I’ve bookmarked for inspiration. Each post takes an interesting stock photo, and pulls a combination of five colors. There are new posts multiple times each day, so there’s always something fresh to look at. You can search the palettes by theme, such as Autumn, Vintage, the Sea, etc, or you can look for palettes containing a particular RGB color value.

sample color palette from design seeds blog

Colour Lovers

Colour Lovers in a site where people can create and upload their own color palettes, read articles, and explore color trends in everything from fashion to web design to home decor. The site has all kinds of fun premium tools that are free to try, such as Seamless Studio, which is a tool for creating intricate vector patterns. Whether you’re looking for inspiration, information, or just want to play around, it’s a site you can find yourself spending hours on.

Kuler

Ok…I’ll admit my dorkiness right away and let you know that for the longest time I thought this was pronounced “cooler.” Way to totally miss the connection, right? Anyway, I have a love for many things made by Adobe (Illustrator + Photoshop = LOVE) and this site is no exception. You will need Adobe Flash Player version 10.0.12 or higher, but that’s a quick download.

The site contains links to some interesting articles on color theory, but the main attraction is the color mixing tool. You can upload an image and have Kuler generate a palette from that (you can ever decide the mood you’re looking for, like bright or muted) or you can generate your own. If you’ve created a Kuler account, you can even upload your theme or export the file to work with later. Best part of all, as you play with your colors, it gives you the HEX, CMYK, RGB, and HSV values for recreating them later. If you’re still stuck, you can browse through thousands of color schemes other people have created and find inspiration there.

Adobe Kuler screen shot

Colors on the Web

Although I encountered quite a few dead links on my last visit, you can still find a lot of helpful tools here. You can find HTML color codes, a visual representation of dozens of different color names (not sure if you and your client are on the same page when you’re talking about “periwinkle?” Show them this), a color scheme generator, and some interesting articles about color theory.

DeGraeve Color Palette Generator

This is a great tool for when you want to quickly create a color palette from a specific image. All you do is enter the URL of the photo you want to use, and the site creates both a dull and vibrant color palette based on that photo. Check out the one it created when I entered the header image of this site (nevermind that the image is smushed – it does that).

DeGraeve Color Palette Generator Screen ShotSo there you have it! My favorite color related spots on the web. If you know of any other great sites, feel free to drop me a line in the comments area below!

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

rearranging the digital furniture {WordPress plugins I love}

photo of electrical plug and title "7 plugins you'll want for your website"{source}

I’m not one of those people who rearranges their furniture just for the sake of change. I used to live with someone who did that, and it drove me absolutely up the wall. It took weeks for it to stop feeling awkward and weird every time I walked into the room. Yes, I’ll make changes, but only when necessary. Like to accommodate something new, or fill the empty space from pitching something. Maybe it’s because I’m a Taurus, and supposedly we’re all stubborn and resistant to change. (Although I refuse to believe that *wink and nudge*).

That being said, I feel like I’m doing the Internet version of constantly rearranging my furniture over the last few weeks. Once I’m happy with everything I’ll probably go for quite awhile before I start mucking with it again, but for now I just can’t resist it.

I built my site with WordPress, using one of their themes. It kind of feels like moving into a new house. Your essentials are already there. You have a bedroom, and a bathroom, and doors and windows. Maybe you even have some wallpaper and a little landscaping in the front yard. But everything is generally plain, and although it may be functional it lacks personality. Maybe you hate the switchplate covers. Maybe the light fixtures in the kitchen have to go. That’s where you come in.

Having just gone though my second major wave of revisions this year, and installing, testing, and uninstalling of a LOT of different plug-ins, I thought I’d share the ones I’ve come to love and rely on the most:

image widget

Oddly enough, when you have a hosted WordPress.com site, this option is already available to you. When you move over to a self hosted WordPress.org site, you have to install it. Of course, you always have the option of inserting HTML into the text widget to accomplish the same thing, but if you aren’t comfortable messing with all that this is MUCH easier.

super cache

You won’t notice any visual changes after installing this plugin, but it makes your site load MUST faster. Once note though…sometimes when you make changes to your site they are slow to show up, even after refreshing the page and emptying the cache in your browser. Although I’m no 100% sure, but I think the plugin has something to do with this. When this happens, I usually close the browser and walk away or work on something else for a while, and when I come back and reopen the site, my change is usually there.

custom contact form

Do you want customized contact fields? Do you want more control over your form’s color palette to better match your overall look? Do you wants people to be able to select from several drop down menu options? Then this is a great plugin for you. After going though several other contract forms I found this one, and I’ve found it to be a LOT more intuitive and flexible than many of the others.

simple viewer

Again, I want though several image galleries before I found this one. WordPress comes with an image gallery, but this one offers Flash slideshow capabilities, There are several galleries to choose from, all of which are highly customizable, so you can make it blend into the overall look of your site. If you have a Flick account you can link to those images, or you can use ones you upload to your image library. Another great thing is that if your site viewed from a device without Flash capabilities (like a mobile phone or ipad) the Flash gallery gets replaced with static images.

advanced typekit

Just like with the Image Widget, this is another tool that automatically comes with WordPress.com, but not self-hosted WordPress.org sites. It lets you branch out from plain vanilla fonts to some that are a lot more fun, and are guaranteed to show up for your readers no matter what fonts they have saved onto their home computers. There is a free option which allows you the use of two fonts, and paid options that allow more fonts and use on multiple sites.

askimet

I don’t know how, but Askimet catches almost 100% of spam from getting through to your comments area. I shudder to think how clogged with junk my comments section would be without it. This is a MUST have.

link withinHave you seen sites where after each blog post there’s an area at the bottom with says “You may also like” with four or five images linking to different posts? (If not, look down an inch or two) That’s Link Within, and it suggests other posts your readers may like, based on similar tags or category listings. A great way to get people to further explore your content.

Do you use WordPress? Any plugins you can’t live without? Feel free to share!

Great scott! {who’s up for some time travel?}

Have you ever heard of the Wayback Machine? Someone told me about it in school, but I never actually bothered to check it out. I played with it the other day and it’s very cool, like a little time capsule of the web. Here’s an explanation, in their own words:

The Wayback Machine is an historical archive of preserved web pages.  Type in a URL and start surfing through time!

Most societies agree that it is important to preserve artifacts of their culture and heritage. Without such artifacts, civilization has no memory and no mechanism to learn from its successes and failures. Our culture now produces more and more artifacts in digital form. Internet Archive’s mission is to help preserve those artifacts and create an Internet library for researchers, historians, and scholars. The Archive collaborates with institutions including the Library of Congress and the Smithsonian.

The archive of pages goes back to 1996.  The original Wayback Machine interface was released in 2001 with about 10 billion pages.

The gist of this, is that you can type in the url for a website, and see what it looked like years ago. I thought it might be fun to show you my first version of this site that I built in school. According to the site, my page has only been archived once, in January of 2011, but the version it shows was built in May 2010. If you take a look at the screenshot, you’ll see a bar at the top with a timeline. If your site was archived more than once, you can go back and click along different points of the bar to see what all of the old versions looked like.

I forgot how much I liked the original design of the site. The main reason I abandoned it was that it was built in Flash, and I’ve heard horrible things about how Flash isn’t searchable by search engines, or viewable on mobile devices. In class as we were learning Flash, our teacher was telling us how it was a horrible buggy program, and that Steve Jobs said it would never be viewable on iphones of ipads. Why were they having us build a portfolio site in Flash then? For the “experience.” Huh. Yeah, the “experience” of only sleeping four hours in the span of two days.

Maybe someday when my web building skills are up for the challenge I’ll try to incorporate some of this look back into my current site. I especially like the setup of the homepage. Anyways, I thought it would be fun to share.

new and improved, for your web-surfing enjoyment

I have a habit that might seems strange to a lot of people. In the past six years, I’ve moved four times. And every time I move, one of the FIRST things I have to do before I can relax and feel at home in my new place, before I even unpack clothing and kitchen utensils and whatnot, is dig up the boxes with all of my wall art, photos, paintings, candles, knick-knacks, etc and decorate the house. My priorities may seem completely wacky to the casual observer, but to me it makes total sense. To be happy, and relaxed, and sane, I need to like my surroundings. I need my environment to feel like it’s MINE. Until that happens, I can’t properly focus.

What does that have to do with anything? Well, in the last week since I posted on International Talk Like a Pirate Day, I’ve been hard at working giving megandowntherabbithole a mini face lift. I had been keeping a list of things on my site that I wanted to tweak when I had time, and the list started getting too long for me to happily ignore. After a couple weeks of nice steady artistic output and putting up images on my RedBubble site, I wanted to “decorate” the space that is my website. If I didn’t, all the little things I wanted to fix would seize up my brain and leave me unable to function. Or something like that.

A couple of the changes I made (if this kind of thing bores you, feel free to skip this part):

  • Revamped the header a bit. I took the name of my site out of the area above the header, and incorporated it into the header artwork itself

  • Jazzed up my links page to make it more visually interesting. Who wants to read a long boring link list? The best part about doing this was that I learned how to do image mapping, which has been on my personal “to learn” list for quite a while

  • Standardized the site’s color palette

  • Redesigned the link buttons on the sidebar. After three days of blood, sweat, and tears (I’m almost kidding), I figured out how to make the buttons change when moused over. I can’t even TELL you how many online tutorials I read, and how many different methods I had to plod through before getting this to finally work. I don’t know if it’s WordPress or what, but it was NOT easy so please, please, PLEASE play with those rollover buttons and revel in their transparency-changing glory, so I can feel like all the time I spend was worth it. Okay?

  • Adjusted various spacing issues throughout the site

  • Redesigned the Facebook and RSS icons to better match my overall look

  • Jazzed up the photo on the “about me” page (this may be changing again soon. I want to find an actual photo of myself to use instead of a painting, but I can’t find one I like. I much prefer being behind the camera to in front of it, but I may just have to suck it up and take some new photos)

I’m finally starting to feel like each page of the site has something interesting and unique on it, and that it’s doing a much better job of reflecting me and who I am. It’s looking like I site that I would want to spend time looking it. As much as I complained and stressed out through both semesters of web design, tweaking this site on my own, without the pressure of deadlines or grades, is a great learning experience. I feel like I’m finally getting a decent handle on CSS, and I’ve discovered that through online tutorials and forums, you can discover the answer to almost any website dilemma out there if you’re willing to look long enough. The thing is, not every solution works on every site, so it really is a lot of trial and error until you get it right. It’s a lot of work, but I’m not ashamed to admit how deliriously happy and fulfilled I felt when I finally got those rollover buttons to work!

One things I want to mention for anyone else out there who might be struggling with their own website design, is Firebug. It is the Best. Thing. Ever.

screen shot explaining Firebug's features

Here are just a few of the many helpful features...

Maybe I’ve been living under a of rock, but I had no idea how great and easy to use this tool is. I’d seen it mentioned before in the WordPress forums, but I never bothered to actually Google it and see how it works. All Firebug is, is a Firefox plug-in that takes only seconds to download. Once it’s installed, you can look at the HTML and CSS of ANY website by right clicking on an element (let’s say, a navigation bar) and selecting “Inspect Element” from the menu. Then it breaks down for you CSS and HTML for that element in an area at the bottom of the page.

You can even go into that space and experiment with making changes to the code which then shows up right there on the page! These changes aren’t permanent, and you do have to actually go into your own page files to save them, but it’s a FANTASTIC way to experiment. You get to see what potential changes will look like without the risk of messing up your entire site, and without hour upon hour of trial and error trying to target that bit of code you have to change to get your desired change. If you want a better explanation than I can give, check out this. I WISH I had known about Firebug when I was in school…you have no idea the amount of crying, swearing, and sleepless nights I could have spared myself (I wish I was kidding).

Just another helpful PSA, from yours truly.  :)