Paul Stone Design News, tips, tricks and tutorials

A Firefox keyboard shortcut to quickly jump to links in a web page

2008-03-05T22:16:01+00:00

If you use Firefox as your browser, and you’re a fan of keyboard shortcuts, then this is the tip for you. Using this shortcut may mean you never need the mouse again. Ok, maybe not strictly true, but it may mean you reach for the mouse that little bit less often. There are loads of great keyboard shortcuts for the Firefox browser, but one that I’ve been using more of lately is the “Quick find” shortcut. That’s what Firefox calls it at least, but I don’t think that it is a very good description of what the shortcut actually does. Basically, the “Quick find” shortcut allows you to search through all of the links that are on the webpage. All it takes is for you to hit the single apostrophe key ( ‘ ) and start typing some of the letters of the link you aer looking for. For example, if you are viewing this web page with Firefox, simply hit the single apostrophe key once, and start typing the word, ‘porfolio’. You’ll actually notice that you only have to type the ‘p’ before Firefox find the link you are looking for. Hit return, and the link will be ‘clicked’, all without leaving your keyboard. You actually don’t need to start with the first letters of the link either. If you type ‘ee’ in the ‘Quick find’ search field you’ll be jumped up to the ‘Subscribe to the site feed’ link at the top-right of the website. I imagine that this feature is designed to be an accessibility function as it speeds up the process of going through the links on the page dramatically. Without using this method, a user would have to use the tab key to cycle through every link one by one. Do you use this shortcut already? Do you have a killer keyboard shortcut for Firefox? Let me know in the comments.

Creating a polaroid effect in Photoshop

2008-02-15T10:34:01+00:00

The last tutorial I did on how to get a Polaroid effect using Photoshop was all very well, but the end result was more just a photo with white borders rather than looking exactly as it would from a Polaroid camera. This tutorial sets out to acheive this, and this time a template is included for you to download. The tempate used in this tutorial is again dependent on smart objects. If you just want to take the Photoshop file and run, by all means feel free. All you have to do to put your photo in the ‘frame’ rather than my one of Florence is: Click the ‘photo’ layer in the layers pallette From the menu at the top of the Photoshop window choose (Layer > Smart Objects > Replace contents… Navigate to where you have your new photo stored, select it and click Place You may have to re-transform your photo to fit correctly in the photo area (to do this press Ctrl + T on the PC, or Cmd + T on the Mac) Doing it yourself If you’d rather set the template up yourself, then you need to (sorry – screenshots to follow): Create a new canvas with a white background Draw a white rectangle, rotate it slightly and give it a drop-shadow and inside stroke Ctrl or Cmd click on the thumbnail of the photo paper so that the outline of the paper is loaded into a selection Choose Select > Modify > Contract… and shrink the selection by a certain amount of pixels (the amount depends on how big your canvas is to start with – try it a few times until the border is how you like it) Set the default colour by pressing the ‘D’ key Swap them around by presing the ‘X’ key Pres the Alt + Delete key to fill the selection with black Ctrl or Cmd T to initiate a free tranform and drag the bottom middle handle up a bit so that the bottom border is thicker that the top, left and right ones. (Just use your eye on this step to get it how you’d expect a Polaroid to look). Now select File > Place…, choose your photo and click Place. This will place the photo as a smart object into your photoshop file. It should have place it above the photo area layer (the black one) – if it didn’t just drag it into the correct place. Now hover the mouse between the photo layer and the photo area layer and press the alt key. You should see the cursor change to something that looks like a venn diagram. Click the mouse button once and you’ll see the photo layer be clipped to the area below it, thus hiding the bits you don’t want Now all that remains to do is to rotate all your layers slightly to bring the photo to life.

Ways to promote and track your new website

2008-01-20T19:45:00+00:00

So you’ve launched your new website, you’re really proud of it and you can’t wait to see the punters roll in. But how are you going to know who’s looking at what? And how are you going to get them there in the first place? In this article I’ll be looking at some tools and techniques for promoting your website and tracking the activity on it. Letting people know what’s the latest and greatest on your site The best way to do this with people who have already discovered your site is by using RSS feeds. If people have an RSS aware browser (or have a toolbar like Google’s installed) they can easily subscribe to your sites feed so that they are told when there are any new articles or pages. It’s much better than sending out emails or waiting for people to remember to visit your site, and more and more people are using them now. They’ll be able to see your latest content through their browsers bookmarks (Firefox call this Live Bookmarks), their web-based feed reader (Bloglines, Newsgator) or a personalised homepage (Google, My Yahoo, Netvibes, etc.) So if you want to get this set up on your site and it’s built on a CMS you may be in luck. The chances are that it has the ability to author rss feeds built in, so you could be only a couple of clicks from getting it set up. However, I recommend signing up for the free Feedburner account. If you use their feed from the word go and put all your RSS “traffic” through them you can get some interesting insights as to how many people are subscribing and what stories they are clicking on. With the pro account you get more detailed statistics on reuse, but I won’t go into those here. So that’s your feed sorted out. Now what about those people who don’t know you yet? For this we have pinging. This is basically your CMS sending out an announcement to a specialist site that lets people find new content super fast – who wants to wait for slow old Google to index a site these days!? Chances are that you can just flick a switch and turn that on if it is not already. Feedburner also has a function for pinging certain websites. Ping o matic, technorati, etc. Networking with a difference – getting yourself seen One of the best ways to get your site into Google (that’s the search engine you care about most right?) is to get some honest to goodness quality links to your site (they list this as the most important thing to do to get your site into their search engine). Now this can take some time, and link exchange websites have had their day. One of the best ways, in my opinion, is to network. Network online that is. One of the easiest ways to get links to your site is by joining a forum at a website for your industry and setting up your signature so that it has a link to your site. These may not get ‘counted’ by search engines depending on how the forum has been set up, but many forums allow this as long as you are not too over the top with the sales speak. Now I’m not saying that you should go and spam forums (please, please don’t do that, ok?). But if you are an expert in your field then contribute to the community when it’s relevant. The benefits? Well there’s these for starters: you’ll get some links on a relevant forum that Google may pick up on you may develop a name for yourself and get some good contacts other people may even learn something from you or repost your comments on their blog or website Speaking of blogs. The same rules can be applied. Read relevant blogs, comment when you’ve got something worthwhile to say and put a link to your site in the space provided. (Go on, try it on this post. I’ll leave it on there unless it’s blatent spam…) Going one step further, you could set up your own blog, but that’s an article in itself. Analytics – going all big brother The next thing to get set up is analytics. There are many different ways of doing this. Log file analysers, hosted solutions, cookie this and javascript that. But the best way that I have found to keep an eye on what’s working on a site and what’s not is to install both Google analytics and Mint. Google Analytics is free and exposes a lot of information. And I mean a lot. I haven’t found anything really revolutionary yet, but it is free and you can spend hours looking at data if you really want. Things of note: check on your adwords referrals and where the user went then. How long people stayed on, how many pages before the hot footed it out of there, etc. Major gripes with Google Analytics: you can’t create and save reports. It would be fantastic if you could pick the information that you care about and just get the system to run it off every month and send the report by email. A great option for a quick overview of how your site is developing is Mint. It costs $30 per site that you want to track and shows you less information than Google. “What’s that? Less information… and it costs money?! Have you gone mad? First things first, lets get the money out of the way. It’s $30 per site…. forever. There’s no hosted solution going on here, you have to host the app and database on your own server so the software is offered with a licence similar to a desktop app. That is: you buy it, get small updates, but may have to pay for larger updates. Added to this, Mint is the baby of one Shaun Inman – his blood sweat and, I’m pretty sure, tears have gone into creating it so why not give a little back? It’s about to make your life a lot easier after all. OK. Secondly, Mint does provide you with less information than Google, but that’s the beauty of it. It clears out the cr*p and leaves you with a clear view of how many people visited when, what they looked at, what keywords they used to find you in a search engine. Using an add-on that has been developed by xxx you can also check your Feedburner stats so you don’t have to jump over there all the time. Speaking of add-ons; they’re called pepper in Mint. There are a bunch of peppers available written by both Shaun and other developers so you can make Mint just how you like it. Sit back and watch the masses descend OK. This is not necessarily going to happen straight away. No matter what tools you have installed, you still have to have decent content, and enough people who agree with you who want to link to your site. But this should be a good start to at least give you a helping hand to promote your site and track the visitors you get.

Choosing a colour scheme for your site with Photoshop

2008-01-19T19:10:00+00:00

Need a quick colour scheme for your latest and greatest website or print project? Using just a simple Photoshop file can give you great results in seconds. (Photoshop file included) This will probably work with other photo/imaging applications, but Photoshop is what I have used to create this template. The file is basically just the same square smart object repeated, with varying transparencies over a white oblong and a black oblong. All you need to do is edit the smart object (called 100%.psd), choose your base colour (make sure it is a strong colour so that the file has enough range of colours to play with), and save it again so that it updates the original swatch.psd file. You’ll then have a ready-made swatch based on the colour you chose in the step above. All you have to do is then sample the squares you like the look of with the Eyedropper tool. I’ve kept this article pretty brief as I’m assuming prior knowledge of Photoshop. If anyone wants any help, leave a comment and I’ll respond or add to the article.