Category Archives: Tutorial

Scrolling Text

2 Replies

We seem to have a need to take names and create scrolling text for various things (honor roll, Veteran’s Day, etc.). It was making me unhappy to have people spending time adding these names to PowerPoints or doing other manually intensive ways things to make this happen. I figured the Internet would have to have a better way.

Here is one.

After a search or two, I ended up at Max Vergelli’s jquery scroller. Down at the bottom on the examples page, I found the vertical scrolling option I wanted. I downloaded the files.

I took my usual path, which is to open up the file and delete the stuff I didn’t want. I focused mainly on the HTML portion figuring it wouldn’t matter if the javascript loaded if it didn’t display. After a few tries, it turns out that I was wrong and that stuff does matter. So I also deleted all the unnecessary javascript pieces, or at least enough so that things worked.

You can get a fairly clean version of the file that focuses on vertical scrolling by saving this webpage. You could also view the source etc.View source ought to be a good friend in most situations where you’re trying to figure this kind of thing out. Do keep in mind you’ll need the additional files in this download to make this work. Keep in mind you can put this on the web or run it locally on a machine.

Now, I just needed a fast, simple way to create a list from a Google Form submission. In most cases you should have gotten these names in Excel, CSV, or user submitted via a Google Doc. I did something weird which might prove useful but may be frightening so it’s footnoted.  In this case, I used some junk file names I generated from a folder with the following Unix command ls -lT | awk '{print "\""substr($0,index($0,$10))"\""",""\""$6" "$7", "$9"\""",""\""$5"\""}' &gt; YOURFILENAMEOFCHOICE.csv. Once I had the data in Excel, I just added the following formula – =A1&"<br>" and dragged it down to fill all the needed cells. The <br> is just a line break in HTML. I cut and pasted this into my HTML file, tweaked the CSS a bit to increase the size of the text and I was done.

The whole thing took about 10 minutes and hopefully will save some people inordinate amounts of drudgery.

Better Animated GIF Tutorial for PS CS4

26 Replies

I’ve been fairly obsessed with animated gifs lately. My apologies. It was really If We Don’t, Remember Me that had me stuck in this loop. This person churns out such really interesting visuals, I couldn’t rest until I got something fairly close. I feel like the image above, while not perfect, is close enough to let things rest for a while1.

Initially, I just thought IWDRM was just a master of choosing just the right clip. Now, that part can’t be discounted but there’s a lot of other things that go on to improve the final product. While fairly simple, I’ll try to detail what I did and how I eventually learned to make it more economical time wise. I’m not a PS guy, so there may be even better ways. If you know them, let me know.

This is tilted towards CS4 but I imagine the concepts will make sense if you use other versions or other software.

  1. Clip your video down in Quicktime or something like that. You can edit in the PS import tool but it’s awkward.
  2. Import the video files to layers.
  3. The animation window will be at the bottom. Edit it until you’ve got a decent cycle going. The first frame will be the still portion of the image so choose one that is clear. Keep in mind you can change the speed of the frames. Sometimes slowing it down helps.
  4. With the second frame selected in the animation window. You’ll see that there is the eye icon on the corresponding frame in the Layers menu. Click on the first layer in the place where they eye should be. You should now see two eyes, indicating both layers are active. It should look like the image below.

  5. Now on the second layer, erase everything you want to be motionless. You’re going to have to repeat the process above for every frame in the animation and every related layer so it pays to keep the numbers down. It’s also much easier to use the lasso tool and select the portions you’d like to erase. If you hit delete instead of cut or some other option, the selection stays and you can pretty rapidly go through the steps where you activate the “eye” on the layer and then just hit delete again.

    You can see the start of that in the image below. I eventually selected everything except Ricky’s (?) head and his drumming arm.

  6. You can preview the animation by hitting the space bar at any time. This helps me immensely.
  7. Make sure when you go to delete, that you’ve selected the right layer in the layers panel or nothing will happen.

1 The gif is from some beach something something video. I was just randomly watching old movies on Netflix instant watch to make capture quality better and easier.

Animated GIF in Photoshop CS4 Tutorial

5 Replies

Inspired by the Noise Professor’s decision to make his animated GIF in Photoshop, I decided to play around with that tonight and ended up learning a good bit and with a much better process and product (fewer programs, higher quality).

I didn’t know you could do this all in just CS4.

Video to Images

Capture video frames as stills to layers – you can even select portions of the video right in the import window. You’ll now have all the frames as images in individual layers.

Animation Window

Open up the Animation Window1

Eternal Looping

I set it to loop eternally. It’s right there in the bottom left hand portion of the animation window. If you forget you have the option to set this again when you do the final export/polishing.

Frame Speed

Shift click to select all the frames and you can change the animation speed all at once.

Animate the GIF

I saw this was impossible in a number of places and if you go to the normal Save/Save As location, it is. There is actually an option below that on the menu that is “Save for Web & Devices.” Somehow I never saw that. You’ll have Animated GIF as an option here.

Polish It Up

1 Never opened this before

Migrating from WP to WPMU

5 Replies

I spent some time the other day helping our ITRTs figure out how to install WPMU and then get their single user WordPress blogs imported into WPMU. I’ll probably make a video sooner or later as this is probably murder without images.

So here’s my shot at best practice advice in case you have to move a lot of blogs from WP to WPMU when you’re not the final end user and can’t screw up.

1. Go to your WPMU install and make a new blog. Make the url the same thing as your WP blog but add a 1 and the end (so if it the blog url is http://ego.com/loveme name this one loveme1). We’re doing this so you can import it in while leaving the original blog up until you’ve made sure everything worked the way you wanted. We’ll go over how to drop the 1 from the WPMU url later. The admin here will be whoever is the main user of the blog. You’ll have access no matter what as WPMU admin.

2. Got to your WP blog (the original one) and log in to the admin panel then choose tools>export. This will get all your content out1. Save it on your desktop or wherever in a folder with the same name as the blog. While you’re here check which theme is being used and note any plugins you’ll need to grab.

3. Using your FTP client of choice go to the original blog and then wp-content. Download the theme and needed plugins2 to the same folder where you saved the export file3

4. Upload your plugins and theme to the WPMU site.

5. Got to the admin portion of the WPMU site. Make extra sure you’re in the right blog. Look at the URL to double check. Then go to Tools>Import>WordPress and select the file you exported earlier. Make sure you check the import attachments and uploads option.

6. Now that it has run, check and make sure the content is there. If it is, proceed. If it isn’t, I’m not sure what’s up. Talk to me. Maybe we can figure it out.

7. Turn on the old theme (remember in WPMU you have to activate it as an admin before it’s available) and activate the required plugins.

8. Delete the old blog. Chances are, if you’re reading this, you installed it using Fantastico. If so, go to cPanel>Fantastico>WordPress and delete the blog.

9. Now return to WPMU and go the Site Admin>Blogs and click Edit on the blog you’re working on. Now under Path you can delete the 1 and click Update Options. You’re blog should now seamlessly replace the old blog.

1 It doesn’t get your blogroll. If you want that do this.

2 With some clients you can just open two windows and drag between them to save time but if things fail mid-transfer you’ll likely have some problems.

3 I’m assuming you’ll know the difference between the theme and plugins. If not, make two folders to help you keep that straight.

Intro to Theme Tweaking: Firebug has Magic Eyes

1 Reply

A couple of people at work were discussing how to make a good website for a school newspaper. I couldn’t help but point out the beauty that is The Collegian and mentioned it was based on WordPress with some theme tweaking.

So one thing led to another and now a number of people are interested in learning how to do this type of thing. I’m the one-eyed guy1 who’s attempting to guide them. I’m no master of CSS, PHP or even WordPress but I have managed to do a few things over time- usually through trial and error.

The movie below kind of talks about why CSS exists and then delves into using Firebug2 to explore website and learn how/what to change in the CSS to tweak themes.

Firebug Introduction from Tom Woodward on Vimeo.

1 Too obscure a reference?

2 I find this plugin to be nearly magical and highly encourage you to use it for this and a variety of other purposes.