Happiness is Chic: Tutorial

I've always loved Harry Potter and since my boyfriend grew up a mere two hours away from Universal Studios, I decided going to The Wizarding World of Harry Potter was a must this Thanksgiving break. I had heard it was really well done but honestly one of the main reasons I wanted to go there was to taste butterbeer! In retrospect, driving four hours and buying $100 tickets might have been excessive to taste glorified soda but it was still totally worth it.

The park was really well done and the details were amazing, but word of warning: Harry Potter World is split up between Universal Studios and Islands of Adventure so you have to buy a park-to-park pass to see both Diagon Alley and Hogsmeade/Hogwarts. Furthermore, this is the only way to ride the Hogwarts Express. Well played Universal Studios, well played. Since we knew we could only stay one day, we decided to go to Universal Studios and see Diagon Alley instead of Hogsmeade because I heard it was visually better and Islands of Adventure was more suited for children and focused on the rides. Because of our time constraints, we made the right decision but if we had longer I would have liked to do both.

Butterbeer Recipe:

-cream soda (I like A&W diet)

-caramel syrup (for coffee/Italian soda)

-whipped cream

Drizzle caramel syrup at the bottom of the glass and then fill the glass with soda and cover in whipped cream. Pour another generous splash of syrup on top of the whipped cream.

I was so pleased with how this recipe turned out. It tastes a lot like the butterbeer at Universal Studios but the main difference is that their whipped cream had a thick, sticky consistency almost like a mix between marshmallow fluff and whipped cream. You can find a lot of other recipes here but I think the key is to buy syrup for coffee/Italian sodas and not syrup for ice cream, which would be thicker and wouldn't mix as well into the soda. I'd love to hear if you decide to try the recipe and/or find a way to make it boozy (an obvious next step).

Joey enjoying a nice cold beer (of the butter variety)

Thanks for reading and have a great day!

Genevieve

In front of Gringotts Bank

Hello there,

I have been feeling pretty smug for the last couple of days and you will find the source of my self-congratulatory behavior to your right. As you can see, I taught myself how to make "blinkies" or animated pictures in Photoshop and the applications are endless in the blogging world. The blinkie on my right sidebar is my blog's badge. If you copy the code beneath it and paste it in an html widget in your blog's sidebar, your readers can click on it and it will link back to my blog. Cough, cough, hint, hint.

On the downside, this small accomplishment led me to delusions of grandeur. I decided that I was surely gifted coder as well, and my internet modem crashed after my first ever attempt to add my own line of code into my blog ㅠ_ㅠ

Blinkie Tutorial

It took me a long time to find a good tutorial online about making blinkies. I wasn't sure if I would need to transfer my pictures to Adobe Flash and was delighted that I could do it solely in Photoshop, which is much easier to navigate. This video tutorial on Howcast was a godsend. Because the Howcast tutorial wasn't exactly for blinkies, I'll explain my process below:

First, create the picture you would like to use in the background of your blinkie, leaving out the text or any other object that will be animated. Click the Layer-> Merge Visible and then create a duplicate layer of the background main picture.

Now you can add your final touches as new layers on top of the main picture and each sequential copy of the main picture. For example, I added the word "Happiness" to my first main picture layer, and "is" to the second, etc.

Now, go to Window->Animations create a new layer for each change in your picture that will occur. My picture has three animations, so I will use three layers.

Make sure the first frame is highlighted and then go to your layers window and hide (by clicking on the eye icon) each layer that you don't want visible at first. In my first frame, only the word "Happiness" is visible. Now, click on the second frame and follow the same steps.

Make sure to select forever in the Animation drop down menu and anywhere between one to five seconds per frame, depending on the effect you are going for. The picture used in this tutorial changes every second so you can read the sentence at a natural pace but my blog's badge is set for five seconds to add an element of surprise when it changes. Anything less than a second is overkill, you don't want to make the reader feel nauseated, like this Korean site often does to me.

When you are satisfied with your results, go to File ->Save for Web & Devices. There you can resize your picture or test how it will look in your favorite browser. Make sure it is saved as a .gif file.

This is an important step I had to learn the hard way. I upload all of the pictures for my blog on Picasaweb but unfortuantely they don't support .gif files, which you need for the animations. After doing some snooping around on Flickr and other photo sharing sites, I'm now a proud member of Photobucket. You can easily upload your animated .gif file like you would a regular JPEG.

The picture created in this post was greatly inspired by the Sing Your Life Tutorial at one of my favorite design blogs, Pugly Pixel. You can find a link to the background color palette and retro people Photoshop brushes there.