shepline creative

Aged Type Effect in Photoshop

A useful Photoshop technique for adding an aged effect onto type in Photoshop can be found here:

( aged type effect in photoshop )

  • Create your type as you normally would
  • Rasterize the type
  • Add noise, around 25%. Be sure the check the ‘Monochromatic’ checkbox.
  • Adjust the Input Levels, bring the black level up to about 70
  • Run a very slight Gaussian Blur on your type – like 1 or 2 px
  • Run Smart Sharpen to remove the blur but keep some of the organic distressing / softening that occurs. Like 200% for the amount and about 15 for the radius.
  • Adjust Levels again – bring black up to about 50 and white down to 69.

Or just download the Aged Text Effect Photoshop Action and never have to remember how to do it again.

Setting permalinks in WordPress

For my sins, I use a webhost which works on Windows servers. For the most part, it makes not a jot of difference to me but does cause a few headaches when setting up sites using a wordpress install at the base of it. In particular setting nice pretty permalinks when I don’t have access to IIS mod rewrite rules…

I did manage it on this very site eventually, but it wasn’t straight forward particularly as I needed a separate 404 redirect for the subdomain (which I didn’t have access to). Setting up the new BVToday.net website is more straight forward, but I thought I would post the solution here, partly for my own future benefit:

Requirements and Install instructions:

  • IIS for Windows
  • WordPress
  • Ability to change your 404 error page with your web host.

To install, copy and paste this text into a file named wp-404-handler.php:

<?php
$qs = $_SERVER['QUERY_STRING'];
$_SERVER['REQUEST_URI'] = substr($qs, strpos($qs, ':80')+3);
$_SERVER['PATH_INFO'] = $_SERVER['REQUEST_URI'];
include('index.php');
?>

Next set the 404 error page to /wp-404-handler.php. If it gives you a choice between file and url, choose url.

Lastly, make sure you enable permalinks in the WordPress control panel under Options > Permalinks.

This solution supercedes the ASP solution.

Lightbox vs. Twitter

Whilst rolling out a new, spruced up, clean site design to my own website that conforms to both XHTML Strict DTDs and CSS 2.1, I encountered a conflict with the javascript scripting involved with the Lightbox that I was implementing. Although the pages continued to validate against the DTD and the CSS was similarly fine, and indeed in Firefox and some instances of IE8 there were no display problems. However in some instance of IE8, having the lightbox running on the page caused some elements of the page to not load correctly, and for the footer to not display at all. Further more I had the KB927917 error from Microsoft which was as inconprehensible as these things usually are.

By systematically deactivating the various scripts running on the page, I tracked down the problem to the Twitter provided javascript code.

I’ve now put in place a new Twitter feed service, which has the advantage of both working with Lightbox and having an option to abort loading tweets if the site is down (something which was causing a problem during recent twitter outages).

Details

You can see the scripts in action here.

Installation instructions

These are ammended for my install (you can see the original instructions and download the scripts here):

Container HTML

You need to insert a holder element for the twitters to go in to. In the example above, I’ve included some ‘waiting to load’ content – but you don’t have to.

Here’s what I did:

<div id=“tweet”>
 
<p>Please wait while my tweets load <img src=“/images/indicator.gif” /></p>
</div>
<p><a href=http://twitter.com/yourtwitterusername>If you can’t wait – check out what I’ve been twittering</a></p>

Here are some more progress indicators.

If you include contents inside the holder div, then you’ll need to set the ‘clearContents’ flag.

Add the script

You should download the twitter.js script, and add the following code within the head or (best at the bottom of the) body tag:

 (this example will generate my twitter status in quotes on a single line with the ‘ago’ linkable back to the original twitter post)

<script src=“http://yourdomain.com/includes/js/twitter.js” type=“text/javascript”></script>
<script src=“http://yourdomain.com/includes/js/twitter.tweet.js” type=“text/javascript” charset=“utf-8″></script>

Create a file called twitter.tweet.js and paste the following code into it:

getTwitters(‘tweet’, {
  id
: ‘yourtwitterusername’,
  count
: 5,
  enableLinks
: true,
  ignoreReplies
: true,
  clearContents
: true,
 
template: ‘%user_name% %text% <a href=”http://twitter.com/%user_screen_name%/statuses/%id%/”>%time%</a>’
});

Note that the getTwitters function will execute after the page has been loaded by your browser. It will fire once the DOM is loaded but before images are loaded.

And your’re done! :-)