Owner: Web Design Blog URL:http://www.clubsuperstar.com/ Join Date: Wed, 20 Jun 2007 16:40:32 -0500 Rating:0 Site Description: A web blog focusing on advice, tips and guidance for web design and development. Site statistics:Click here
Look Sharp With The High Pass Filter 2007-06-20 16:34:28
WordPress database error: [Table 'cssblogdb.dwp_tla_rss_map' doesn't exist]
INSERT IGNORE INTO `dwp_tla_rss_map` SET post_id = '7', advertisement = ''
Photoshop’s High Pass filter is one of those obscure “Other” effects that is rarely used, most likely because they can’t figure out what it could really be used for. This quick tutorial will show you how the High Pass filter can be used to sharpen images clearly and effectively, without generating artifacts.
Here’s the image we’ll be using for this one - awww:
Load the image into Photoshop, and Duplicate the layer with Ctrl-J (Command-J on a Mac). Next, go to Filter
> Other > High Pass and enter a radius of 5.0 pixels.
Ick! Whats happened here, is that Photoshop has scanned the frequencies of the image, running a high pass filter across the image in a similiar method to how hi-fi equalisers can boost the high frequencies in audio. By removing all the
HTML for beginners: making your first webpage (Part 2) 2007-06-20 09:58:29
WordPress database error: [Table 'cssblogdb.dwp_tla_rss_map' doesn't exist]
INSERT IGNORE INTO `dwp_tla_rss_map` SET post_id = '6', advertisement = ''
This is the second in a multipart series of posts about teaching the fundamentals of putting a webpage
together. Read Part One here.
So far we have a very basic webpage with just a simple message on it. Lets improve it and make it into a fully working webpage, with tables, links and images. First off, save this image to the same folder that has your webpage in. Next, delete everything between the body tags and change the colour of the body to 000000, to leave you with a blank black page.
We’ll start off by putting the image onto the webpage at the top. This takes a <img src=""> tag; you don’t need to close with a </img> tag. Put the name of the image you want to use into the src="", which in this case will be myfirst.gif, and surround the image with <center> tags Read more:making
Photoshop Tricks: A Touch of Glamour 2007-06-19 18:04:52
WordPress database error: [Table 'cssblogdb.dwp_tla_rss_map' doesn't exist]
INSERT IGNORE INTO `dwp_tla_rss_map` SET post_id = '4', advertisement = ''
In this tutorial, we’ll look at a quick and easy way to use Photoshop
to add glamour and soft focus effects to an image. This effect is used a lot on models, but can be applied to other images too for added impact, especially colour rich ones. We’ll also make the bunch of techniques into a Photoshop action, meaning that in future it’ll take just one click to apply the effect.
Here you can see the image that we’ll be using for this tutorial, the lovely Elisha Cuthbert. You can substitute your own if you wish, but using the same as this tutorial will make sure you can follow along and see how the effect develops:
We’ll set up Photoshop to record the rest of the tutorial as an action, so we don’t need to go through all the steps manually in future. Load the ab
HTML for beginners: making your first webpage (Part 1) 2007-06-19 14:40:44
WordPress database error: [Table 'cssblogdb.dwp_tla_rss_map' doesn't exist]
INSERT IGNORE INTO `dwp_tla_rss_map` SET post_id = '3', advertisement = ''
This is the first of a series of posts aimed at people with no experience creating webpage
s, teaching you the basics of HTML and page layout, and encouraging you to learn useful habits and traits right from the start. Whether you’re keen to learn HTML so you can progress onto more advanced website design skills, or simply curious about how to make a page up, this series will help you a great deal.
First of all, find a folder or area on your computer where you’ll save all the webpage files to, ideally a new empty folder. Rightclick and choose New > Text Document to create a blank document in your folder. If it says New Text Document then you need to enable file extensions by going to Tools > Folder Options, clicking on the View tab at the top, and unchecking the box that says Read more:making
Fixed Width vs Fluid Width Websites; Which Is Right For Me? 2007-06-23 08:37:14 A lot of intermediate and professional website designers squabble over their preferred method of laying out websites. Should you go fluid to maximize space, or stay fixed to keep control over appearance? In this post I’ll break down the pros and cons for each option, and let you decide for yourselves.
Fixed
width websites
Designing a website with a predetermined width in mind — often around 770-780px wide for people still running 800×600 resolutions, but sometimes up to ~980px — certainly makes designing the page a lot easier. You know exactly how it will appear to visitors regardless of screen resolution, your images will be aligned perfectly, you have complete control over the layout.
Some of the largest websites use fixed width including MSN, MySpace and the New York Times online, showing that fixed width websites are far from being used purely by amateur web designers. Fixed width is generally favoured when control over presentation is important, and thats vital for Read more:Width
, Websites
, Right
Curvy Colour Correction 2007-06-22 16:30:04 In this tutorial we’ll explore Photoshop’s mysterious Curves function, seeing how it can be used to quickly and effectively correct the hues, tones and colours of an image in just a few clicks.
Heres the image we’ll use for this one. As you can see, the colours are way off:
Regardless of whether the colours were studio/live or post processing work, we can fix the photograph to a natural state. Go to Image > Adjustments > Curves. Although complicated looking, the dialogue box that pops up can be pretty simple.
The three eyedropper buttons in the bottom right of the Curves dialogue box just above the Preview option, represent three distinct areas of the image which we’ll set. The left eyedropper needs to know the darkest point of the image, so click on that button and then click on the darkest area of the picture. If its difficult to tell, I’ll show you which points I used in a moment; I used part of the hair for the darkest point. Secondly, the right Read more:Colour
Changing Image Colours In Photoshop 2007-06-22 08:26:05 Photoshop can be used to quickly, easily and realistically alter the hues and colours of any part of any image. There are a number of ways of doing this, and here we’ll take a look at the quickest - and usually most effective. Here’s the image we’ll be altering:
Pretty enough, but lets give her striking blue eyes instead for added impact. Create a new layer.
Take a colour of your choice; the blue I used is Hex: 397BDF. Next, paint over the top of an eye on the new layer. It might look a bit messy, but it’ll make sense in a moment.
Next up, change the layer blending on your new layer from Normal to Hue - this takes the colours on the current layer, and applies the hues and colours to the image below. So the brown in her eye has been replaced by a nice blue hue:
I’m sure you can think of all sorts of uses for this method. Altering the colours of cars, turning your best friend green, or adding tiger stripes to various objects. Experiment, and have fun! Read more:Changing
, Image
, Colours
, Photoshop
Top Five Webpage Mistakes - Design Crime 2007-06-22 07:02:20 This post will be short and snappy; I’ll point out horrendous design mistakes which crop up on amateur webpages (and most of MySpace) again and again. If you do something on this list, do something about it immediately!
Here’s my current top five incidents of what I dub ‘design crime’.
1. Background music
From MIDIs playing on Geocities websites to MP3 Flash players on MySpace profiles, music is A Very Bad Thing to have on webpages, especially when - and most of the time, it is - started automatically. Many people listen to music while they surf, and having that interrupted by a surge of aural pain is generally enough to exit the offending webpage very fast. If someone can’t turn off your intrusive music within three seconds, kiss them goodbye, if they even bothered sticking around that long. Even those who don’t listen to music as they browse the ‘net, don’t want to hear five seconds of your latest favourite emo song on your MySpace pro Read more:Top Five
One Click Borders For Images 2007-06-20 23:42:28 If you’re not used to adding borders to your images to improve their clarity and cosmetic appearance, you’ll appreciate this method. We’ll create a Photoshop action which will automatically add a clean, one pixel border to any image regardless of dimensions.
Load up an image you want to add a border to. Any image will do for now, we’re only using it to record an Action.
Create a new action and name it “1px Border” or something similiar. Next, create a new layer.
Go to Select > All (or press Ctrl-A, or Command-A on a Mac) to select the entire image range. Next, go to Edit > Stroke.
Here, choose a 1px width stroke, choose pure black as a colour (you can recolour it for individual images after the process), and make sure the Location is Inside. Hit OK, and then press Ctrl-D (Command-D) to deselect everything. Finally, click on Stop playing/recording on the Actions panel, and you’re done!
What this action will do in future, is create a new Read more:Click
, Borders
, Images
Web 3.0 2007-06-26 11:03:43 The nineties saw the internet become known and used by the public. Dubbed the “information superhighway”, the world wide web enabled businesses to reach a global audience. Communication services enabled people all over the world could communicate with each other, with both email and real-time text chat software such as IRC and ICQ. With such a new technology available, innovative use of it was uncommon, but those who pushed the web a little become hugely successful. The business world witnessed the staggering rise of companies such as Amazon, Netscape and eBay, and so the late nineties brought something of a rush to establish online presences. The web was seen as a supermall-library hybrid, it’s main purpose to enable long distance shopping, reference and communication.
This decade has seen plenty of innovation about using the internet. Social sharing and discussion has had a huge impact on the web. From social bookmarking companies such as del.icio.us and furl, to im
How Accessible Is Your Site? 2007-06-25 18:59:47 Over the past few years quite a bit of fuss has been kicked up over the issues of usability and accessibility with regards to web design. Often it comes down to web savvy developers arguing the case for adding site accessibility against clients who aren’t at all interested, preferring to have more time devoted to cosmetic improvements or search engine optimisation instead.
The W3C say that:
Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web [..] designing Web sites and software that are flexible to meet different user needs, preferences, and situations.
So what does this mean exactly? Well, for one thing your websites should aim to be as user friendly to visitors as possible, regardless of any disability they may have. For example, a blind or partially sighted person may use a browser that reads text aloud to them, and thus having alt tags on your images means that the browser can speak those aloud and give the visi Read more:Accessible
MySpace Styling: Custom Contact Table Graphics 2007-06-25 10:22:44 Here we’ll take a look at one of the fundamental things changed by custom MySpace
layouts. Many MySpace users simply grab premade layouts (which contain ugly advert linkbacks, by the way) as they don’t know how to put together their own layout. Lets start by having our own custom contact table.
First of all, load up your preferred graphic editor — Adobe Photoshop is recommended, but you can use Jasc Paint Shop Pro, or even Microsoft Paint, depending on what you have available. Make a 300×150 image and type over it the basic link text, in the same positions, that the regular contact table uses.
The writing is there simply to make sure you know which section of the image links to where, as it will eventually be clickable on your profile.Most users have no real need for anything besides the private message and add as friend links, the first two on the left column. You can leave out the rest if you like and be creative with the remaining space.
Next up, find a public Read more:Table
, Graphics
Stylesheet Basics - What Is CSS? 2007-06-24 09:27:41 CSS, or Cascading Stylesheets, are additional elements that allow you far greater control over the appearance and layout of your websites. You can tweak the exact colour, positioning, spacing and much more, of any element on the page. Styles are usually saved in a separate file, with each page of your site accessing that file — meaning that it only takes the alteration of that single stylesheet to apply changes sitewide.
A simple link within your <head></head> tags is all it takes to tell your browser to load an external stylesheet to apply to the current page, and it typically goes just after the META tags:
<link href="http://www.clubsuperstar.com/feed/mystyle.css" title="My Style" rel="stylesheet" type="text/css">
Very simple really. The href="" tells the browser which file to load for the style information; the other tags are arguably redundant but are kept for legacy reasons and completeness.
Here’s an example of what might be in your .css file:
h1 {
font- Read more:Basics
Useful Resources: Prototype, Lipsum, and DaFont 2007-06-28 09:01:48 In this post I thought I’d share some of the resources that I use pretty often, or feel that you’d benefit most from. There are a thousand useful resources out there, but I think you’ll find something handy here.
If you use JavaScript or Ajax in your websites then Prototype
could save you a lot of time and effort. Its a JavaScript framework that, as well as optimising XML and JSON calls, works cross browser so that you don’t have to code the same thing multiple times just to ensure it works exactly the same across all browsers and platforms. Definitely worth a look if you’re interested in coding Ajax heavy sites.
A few people have asked me where all the “lorem ipsum” filler text comes from, that they’ve seen whenever I do webpage or print mockups. Lorem ipsum is a false language that has been classically used as filler text and is readily available either within high end publishing software, or with free websites such as Lipsum.com. Lipsu Read more:Useful
, Resources
My First Website™ 2007-07-04 17:50:38 Who remembers the very first website or webpage they ever built? Regardless of whether it was built with FrontPage, an online “wizard” or in a text editor, everybody started somewhere.
I remember my very first website. I had started attending college way back in 1998 and the computers there were newly equipped with internet access. A friend of mine there was learning HTML and that inspired me to pick it up myself. After teaching myself the basics, I fired up Notepad — my tool of preference to this day — and made my masterpiece: an obscure hybrid of my own prose, graphics, and the obligatory “About” page describing my friends and I.
Hosted on GeoCities, the website had it all — videogame artwork for the background, a marquee menu, and even an animated Email Me button! You couldn’t ask for much more. Wasn’t too keen on the overly long URL from those days, though…
What was your first ever website? Read more:First
Web Design Quotes: The Price Is Right? 2007-07-02 16:07:51 One of the biggest problems I’ve always had with website design work, is the issue of cost. How much should one charge for this or that? Personally, I have a habit of charging less money than perhaps I should and its a difficult habit to break out of.
Many designers, especially those who haven’t been employed in-house or had much work before, find it tricky to pace pricing. Charge too little and you’ll be struggling to make ends meet, but charging the earth won’t even get you a project to work on in the first place. Should you charge that shiny new client £30 per hour, or a flat rate of £600 for the whole project?
Check around online and pricing for similar services varies massively; amateur webdesigners charge a superbudget rate of around £40-50 for the most basic website, whereas more established firms may charge £400 or more for the same service (albeit greater quality). E-commerce web design can range from £1,000, to £10,000 or more.
Client expectatio Read more:Quotes
, Right
, Web Design
Blogger’s Priority: Branding Or SEO? 2007-07-08 06:43:37 I’m fully aware that the title for this blog — Website Design Blog — isn’t all that amazing, original, or catchy. It’s not a funky word like “Pizam!”, or even simply using my personal name, like DamienKing.com would. So why use it?
Although this blog only started just a few weeks ago on the 19th of June, I already rank well with the search engines. I was surprised to see the kinds of hits I was receiving after checking my WordPress stats, and peeked into some of the bigger search engines to get an idea of what’s what.
Lets take the term website design blog for example. For that search term alone I’m ranked 12th on Google, 12th on Altavista, and a whopping 5th on Yahoo!. Thats amazing for a PageRank 0 blog thats still so new you can still smell the freshness. I rank well for similar search terms too, and its already generating some nice traffic for me.
Theres no doubt that a strong brand is an effective marketing tool. Websites I’ve d Read more:Blogger
, Branding
, SEO
Quick Fix: PNG Transparency In IE 6 2007-07-06 08:55:54 If you’re accustomed to designing intricate layouts in Photoshop then you’ll know how annoying transparency is. Although useful, GIFs are severely limited by their 256 colour palette making attractive transparency or translucency virtually impossible. PNG graphics in their 24 bit glory offer perfect transparency, but aren’t supported in versions of Internet Explorer lower than IE7.
Given the huge number of web users who still use IE6 (and lower), PNG usage across the internet has been mostly a no-no until fairly recently. Typically, transparency in PNG images in IE shows as horrible grey — but no longer!
We can use the following JavaScript fix to force IE to alter the alpha transparency of PNG images, enabling them to show as they should.
First, add this within the <head> of your website:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="http://www.clubsuperstar.com/feed/iepng.js"></script>
<![endif]-->
This tells any IE brows Read more:Quick
, Transparency
Simple Pattern Backgrounds For Website Layouts 2007-07-10 11:20:08 Here we’ll create a clean, simple background that can be used in pretty much any style of webpage or MySpace layout you may design. We’ll make it tile too, so that you only need a very small image that will seamlessly cover as much space as you need it to.
First off, create a new document in Photoshop, just 6×6 pixels in size and with a transparent background:
Switch to the Pencil tool, by holding your mouse button down over the Brush tool until the popout menu appears with the Pencil tool on it. The Pencil tool is essentially the Brush tool with no anti-aliasing — everything will seem pixellated and have sharp edges. For ultra closeup work such as this, thats essential. Zoom in as far as you can.
Set the Pencil tool size to 1px at the top of your screen if its not already on this by default, make a new layer (Layer > New > Layer) and draw a diagonal line with the Pencil tool.
Next, go to Edit > Define Pattern
, and pick a name for this seamless pattern. Read more:Simple
, Backgrounds
, Layouts
Monetising Your Website 2007-07-13 09:01:49 Regardless of whether you’re running a hobby website about needlecraft, a social community discussing classic movies, or a personal blog, you’re probably going to want to be able to make a little money from it — even a few extra bucks in your pocket each month wouldn’t hurt. But what is the right option for you, and should you even monetise your website in the first place?
Firstly, you should consider your website’s purpose and the demographic of the users visiting that website. If you’re putting together a business website, don’t expect to put advertising on there; ever seen AdWords on apple.com? Also, if your site is hobbyist but effectively brand new — say, less than a thousand visits a month — then adding advertising to the site may put people off, especially if it seems intrusive.
If you decide to go ahead with monetising the website, you’ve got a whole field of options to choose from. Your content, layout, demographics and popularit
uVme Business Card Mockup - Opinions Wanted 2007-07-17 13:19:58 Just wanted to get some people’s opinions on a business card design I’m currently working on, to promote the uvmeassociate.com domain. This mockup has only had about fifteen minutes put into it.
Colourwise I aimed to represent the vibrance of online gaming, with a strong blue gradient to match the orange of the uVme logo. I added faint currency symbols in the background, and a quick ‘n easy blurb to pique interest.
What do you like and dislike? What would you change or do differently, and why?
Read more:Business
, Opinions
The Golden Ratio In Web Design 2007-07-17 10:12:53 The golden ratio, also known as the golden mean or golden section, is a representation of the number phi which is believed to create the most visually pleasing result possible. Its been used for thousands of years in all fields of design, from architecture such as the Parthenon statues, to art such as Leonardo da Vinci’s De Divina Proportione.
Phi is generally expressed as 1.6180339887, and is typically rounded to 1.62 for applications such as web and graphic design.
Wikipedia states that:
[..] two quantities are in the golden ratio if the ratio between the sum of those quantities and the larger one is the same as the ratio between the larger one and the smaller.
So how does this all apply to web design? Well, lets imagine that we’re just putting together the basic elements of a new blog layout, and we’re designing for 800×600 resolution. For simplicity, our site design will be 760px wide.
Dividing 760 by Phi (1.62) gives us 469, meaning that the larger part of Read more:Golden
, Ratio
, Web Design
Home Based Business - uVme Associate 2007-07-16 11:56:39 I’m still barely recovering from a very hectic weekend which included Sunday’s prelaunch event of uVme, an interesting online skill gaming website that launches in September. I thought I’d blog about it while its still fresh in my mind.
uVme describes itself as online gaming meets social networking, where people can challenge friends, family and anyone on the internet to a variety of games and win money in doing so. Whats more unique about it is the network marketing program behind it, and as an entrepreneur of several years myself I dug a little deeper into it.
Essentially, uVme offers three levels of membership.
uVme Players
Players join up for free and can enjoy the games on site without any cost for 14 days. Afterwards, they upload money to their e-wallet and use it to participate in further games. Game entry fees range from 50p upwards to about £10 for big money stakes, and the winner of each game takes the kitty. This can be profitable for people who&rsq Read more:Business
Where’s Damien? 2007-07-21 04:35:37 Just a super quick post here at the moment — I want to inform you (my lovely readers!) that theres been a bit of a crisis come up in my personal life, which is taking up a lot of my time. Thats why I haven’t been posting lately; once things clear up a bit, I’ll get back to blogging!
So, let me know what kinds of topics you’d find interesting. I’ve got a few interesting posts in draft form at the moment (both theoretical talk and practical advice), but new suggestions are always good.
Back soon! Read more:Damien
The Viewpoint Clash: Designers vs Surfers 2007-07-25 06:32:23 As a web designer, its my job to put together websites that are attractive, immediately accessible and easy to use. These things seem obvious to anyone who develops websites, but a crucial problem over the past five years or so is that surfers see and mentally interpret website layouts in a different way to how designers do. Web designers think in a different way to the average surfer.
A 2002 study by Kansas State University goes to show the extent to which the mindset of a developer, or developer’s client, differs from the typical visitor to the final website. The study asked participants to visit a website, and then draw diagrams about how the website was laid out.
The study results were surprising, as participants did not actually draw the webpages, or even specific parts of them — instead, the diagrams clumped together similar pieces of information.
What does this mean? Well, for example a typical corporate website will often portray information about the company and it&rsq Read more:Viewpoint
, Clash
, Designers
, Surfers
The Laws of Design: Printed Media 2007-07-27 10:19:02 After being tagged by graphic designer Paul Enderson in his excellent article on interface design, I thought I’d take a slightly different approach and put together a short article on the laws of design in relation to printed media, such as business cards and flyers.
One thing to remember is that a skilled designer can manipulate the laws of design in the same way as the laws of nature within the Matrix — some laws can be bent, others broken. Some of these are more like flexible guidelines rather than hard and fast rules, so good judgement and common sense are essential, as in all fields of design.
Bleed It Out
If you’ve never done print work before, make sure you understand the bleed size of the medium. Bleed is where your image is printed beyond the final cut size, so that if the trimming goes slightly awry there won’t be unsightly white borders around the image. For example, an 85×55mm business card will have an actual image area of 89×59mm, adding 2m
Premium SMS Services For Your Website For Free 2007-07-30 07:09:39 A few people have asked about the fact that I offer my blog feed as an SMS
subscription service, presumably because its an unusual feature and I’d guess that most blogs (even the largest ones) don’t have that functionality. Although premium SMS services seem like the domain of corporations with deep pockets, the reality is that you can set up services such as these free of charge.
I use Zong for my SMS services, which was previously called SMS Connect. Zong allows you to set up a range of SMS services for free, customising the keywords and pricing involved. Most of the services are premium SMS — i.e., the end user is billed for receiving the SMS messages — and you receive a percentage as profit.
Zong comes with a range of preset services which you can set up in a flash. These include SMS quizzes (text A, B or C to blahblah), SMS billing (end user pays £xx for access to your website or product download), and SMS feed syndication like this blog uses. For advanced applica Read more:Premium
, Services
Design Resources: SXC, BrowserCam, and Fluid Mask 2007-07-29 14:24:05 In this post I’ll be talking about a few more resources which I think you’ll find useful for web and graphic design. I’ll also be adding these to my Resources
page.
stock.xchnge
The free photo stock exchange, called stock.xchnge or just SXC for short, is a handy resource in finding stock photography for your web or graphic design projects. Need a photo of some children smiling? Got it. Looking for a parchment texture? Not a problem. The images uploaded to the website are free to use, although you should make sure to check the licensing on individual photos; for example, some contributors may require written credit or to be notified when you use their work. Website: www.sxc.hu
BrowserCam
Every web designer knows that making websites that look the same, or as close as possible, across a range of browsers, resolutions and operating systems can be a royal pain. Given that most of us don’t have personal access to computers running Windows, Mac OS and Linux, BrowserCa
Flash Vs Shockwave; Which Should I Use? 2007-08-01 07:40:41 I know that, for a lot of web users and even web developers, that there is some confusion between Flash
and Shockwave. Thats understandable because they’re very similiar looking, seem to perform the same functions of embedding rich interactivity within webpages, and even come from the same company.
However, there are some fundamental differences that dictate which is best for different situations.
Macromedia Flash
Flash is the one you’ll see 95% of the time on websites. The Flash plugin is far more widespread than the Shockwave plugin, as around 98% of all web users have it installed. Flash is easier to learn than Shockwave and can be put together using a variety of programs; the technical knowledge for learning Flash is less than for Shockwave and it’s programming language ActionScript is relatively easy to pick up.
Flash is good for most animation and simple interactivity purposes online. Although it’s frame rendering and scripting power are lower than Shockwa
Shared Vs Dedicated Web Hosting 2007-08-03 06:22:14 As a web designer/developer, one role often required is to secure adequate web hosting for the website(s) you’ve been assigned to build. The kind of hosting you should pick should certainly be matched to the website — any colossal site rolled out for a new corporate product would not be hosted on a super budget hosting plan. But you shouldn’t go overboard and use hosting that is too advanced for the project either, especially if your client has a limited budget.
In this post I’ll discuss the various types of web hosting available, to better inform you. I’d love to hear your views too.
Shared hosting
Shared hosting, also often called virtual hosting, is where your website is stored in it’s own directory on a web server which, generally speaking, hosts between a hundred and a thousand websites in total. Having this many different websites on one server means the costs of being hosted are kept to a minimum, but there are physical limitations imposed on you. Read more:Dedicated
, Hosting
Recommend Site To A Friend
