Dugg Stories
For the past day or so, I’ve been thinking about creating a WordPress plugin to display recently “dugg” stories from Digg.com. Then I remembered that Digg offers RSS feeds for each individual user, so you can keep up on items your friends are interested in. Writing a whole plugin to display a simple, styled RSS feed is overkill, and more work than I want to do.
Browsing around for a simpler solution, I discovered the highly configurable Feed2JS, which will take RSS data and display it using JavaScript. After tinkering in BBEdit and Photoshop for about half an hour, I had my newly created Dugg Stories section up and running, complete with RSS caching. The results of my efforts can be seen at right (jump there). That was far easier than writing a whole plugin, doing caching, and handling XML. (If you decide to do your own Digg sidebar area, feel free to swipe my Dugg Stories header image. I may also post the Photoshop file I created, if there’s interest.)
Update
Here is the Photoshop file I created along the way.
November 1st, 2005 at 2:50 pm
Yes, please post the Photoshop file.
November 1st, 2005 at 5:42 pm
well, I guess what I would rather have is more information on how to set it up as you have. I was able to set it up using the defualt digg javascript but it is not cached and takes a while to load.
November 1st, 2005 at 9:08 pm
yes! I would love to have the photoshop file for this! also, could you post the modified plug-in for download? thank you!
November 2nd, 2005 at 12:27 am
Here is the Photoshop file I created while working on it. Included are the header image, mock-up, and some Digg bitmap “fonts” I made for fun.
To get it running, I just downloaded Feed2JS, followed the instructions on their site, and customized the output with a tiny bit of PHP editing and some CSS. The only thing I had to do differently was to change the location of the cache files, as they refused to be written to in my /feed/cache and /feed/cache_utf8/ directories. I just moved them up a level (to the web root), and they worked flawlessly.
November 2nd, 2005 at 1:15 am
what font is it that you used in the main “dugg stories” logo? and what effects were added to this text to make it look so cool?
November 2nd, 2005 at 5:27 am
I don’t know what font the Digg folks used for their logo, but I suspect it doesn’t exist. I took a close look at their logo and noted how many pixels across the tall parts of letters are (the “posts” of a ‘u’, the spacing between them (the hole in the ‘d’), letter x-height, and spacing between letters. Once I had a good idea of the sizes of their letters, I subtracted 1 pixel all around and made a smaller version of the would-be font using only the Pencil (and Block Eraser tool). From there I also imagined a smaller set, and made that as well.
To make the text look better than a plain solid color, I took the finished “dugg stories” layer, duplicated it, inverted it (made the white go black), moved it under the white version, and moved it down just 1 pixel. Changing the blending mode and opacity of the black layer faded it in just a little, so as not to stand out. That was all that was necessary to add the shadow. Earlier, I noticed two other things about the Digg title. One, the bottom half of their letters have just a hint of grey. And two, the top left and bottom right corners of their letters are erased just a little. To accomplish the grey, I made a new black-to-white gradient, linked it to the white “dugg stories” layer (to mask it using that layer’s opaque area), and lowered the opacity. To erase the various corner bits, I just used the Marquee tool to select one pixel from each necessary corner, erased them, then used the Fade Eraser Tool command to bring them back to near-opaque.
In the end, it’s all about layering on subtle effects. Fade out parts of the image. Don’t use plain black too much, as it stands out very well. Apply slight gradients instead of solid colors to achieve faint lighting effects.
Hope that answers your questions! :-P