Elite By Design

Web Design Tuts Is For Sale

Brian — Thu, 05 Nov 2009 03:03:30 +0000

That’s right, I’m selling Web Design Tuts. After being unable to successfully manage the site, I have created an auction over at Flippa. Click here to view auction. I want to pass WDT onto a new owner who will be able to take advantage of this amazing site, with superb content, wonderful followers, and limitless potential.

Please check out the auction if you are interested. If you have more questions or comments, please don’t hesitate to comment below or email me at brian[at]webdesigntuts.com.

Thank you everyone for your support thus far and I know that Web Design Tuts will continue to be a respected source of web design tutorials and inspiration!

The Ultimate WordPress Guide For The Absolute Beginner Part 1

Brian — Mon, 19 Jan 2009 06:01:10 +0000

I personally recommend WordPress to every client I work with or any person who asks me how to get started in the online world. Why? Because I trust WordPress.

Wordpress is easy to use, easy to learn, and easy to maintain. The problem comes when people simply haven’t been immersed into the online world long enough to learn how to use this powerful tool to their advantage.

I am bombarded with questions about ‘how to do this’ and ‘how to do that.’ Unfortunately, there has never been a resource I could point to that would be the ultimate learning center for an absolute WordPress beginner…until now.

I have created this post as an ultimate guide for people who have little to no experience with websites or the internet. Please pass this on to someone who may be struggling to learn or is constantly asking you WordPress-related questions.

This is part 1 in a 2 part series. Today we’ll be covering why you should choose WordPress, how to install the software, and how to use themes.

Want to skip to a certain section? Use the links below:

What Is A CMS?
Why WordPress?
WordPress Installation
Uploading A Theme

Let’s get started.

What Is A CMS?

Wikipedia defines a CMS, or content management system as:

A content management system (CMS) is a computer application used to create, edit, manage, search and publish various kinds of digital media and electronic text.

CMSs are frequently used for storing, controlling, versioning, and publishing industry-specific documentation such as news articles, operators’ manuals, technical manuals, sales guides, and marketing brochures. The content managed may include computer files, image media, audio files, video files, electronic documents, and Web content.

In a nutshell, a CMS provides a way to collect, store, and electronic data and media that is important to you, and then share it with the world.

Currently, there are many CMS options available. Some of the most notable ones are Joomla, Drupal, Expression Engine and WordPress.

This guide is an introduction to WordPress, one of the most versatile, easy, and manageable CMS’s on the web.

Why WordPress?

Why WordPress? This is one of the most frequent questions I encounter from readers, clients, family, and friends. Why should they choose WordPress out of all the other CMS solutions? What makes WordPress better than Joomla, Drupal, Expression Engine, or any of the others?

It’s Not Better
I’m not here to tell you that WordPress is better than any other CMSs out there. That would be just plain wrong. Each person has their own online needs that might be best suited for Joomla, Drupal, or Expression Engine or another system.

However, I am here to tell you that in the past year and a half, I have found WordPress to be a more ‘people-friendly’ CMS that allows for someone who has little to no experience online to become immersed in a community driven and resourceful environment.

Ease Of Use
WordPress is easy to use. With the latest interface redesign in version 2.7, WordPress is easier and more intuitive than ever before. Managing blog posts, pages, comments, users, plugins, and more is just a couple of clicks away.

Easy To Learn
All it takes is one guide (like this one) for someone to learn WordPress. While the system is complex and may take many months to master, it only takes a couple of hours to get the hang of using the numerous tools that WP offers.

So Much More Than Just A Blog
Finally, WordPress helps people create so much more than blogs. It is a platform that allows for the creation of businesses, stores, portfolios, products, and communities. The problem with other so-called blogging platforms is that they are trapped in their own software, allowing no room for expansion or diversity. The beauty of WP is its ability to adapt to many different and unique situations that each blogger may have.

WordPress Installation

So, assuming you have chosen WordPress as your CMS of choice, you are now wondering how to get it set up on your site. Before you begin, there are a few things you will need:

A domain name. Where will you install WordPress if you don’t have a website!
A host. You will need a host to give you server space for your WordPress installation and your content. There are thousands of hosts out there, from major corporations, to independent hosting solutions from individuals.
Elite By Design is currently using Host I Can. (Aff. Link)
A FTP client. FTP, or file transfer protocol, is in its simplest terms, a way for you to upload content to your server directly from your computer. You will need a FTP client to install WordPress themes, plugins, and in some cases, to Install WordPress yourself.
I am currently using File Zilla as my FTP, however feel free to look up other clients that may better suit your needs.

Once you have the above list of items, you’re ready to begin.

Installing With Fantastico

The quickest, easiest way to get your WordPress installation up and running is through a program called Fantastico. Fantastico tends to come standard with most hosts. To see if you have access to this program, log into your cPanel account (usually http://yourdomain.com/cpanel) and look for Fantastico (or Fantastico De Luxe in some cases).

Be aware that many people have made convincing arguments against the use of this program, mostly on the grounds that later upgrades of your WordPress installation will mess up your site. My fix? A plugin (we will cover these later in this tutorial) called the WordPress Instant Upgrade plugin.

If you would like to use Fantastico as your install method, keep reading. Otherwise, scroll down a little ways and I will explain an alternate method of installation.

Installing WordPress is possible with Fantastico in just three quick steps:

Step 1
Open Fantastico

Step 2
Click ‘WordPress’ and then ‘New Installation.’

Step 3
Fill in the necessary fields and click ‘Finish Installation.’

5 Minute Install

WordPress totes the famous “Five Minute Install” for WordPress users who want to install the software manually. They have written a thorough and complete guide in the WordPress Codex which you can read here.

Here is the text taken off the previously mentioned page to save you a step in your WordPress install process:

Here’s the quick version of the instructions, for those that are already comfortable with performing such installations. More detailed instructions follow.

1. Download and unzip the WordPress package, if you haven’t already.

2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.

3. Rename the wp-config-sample.php file to wp-config.php.

4. Open wp-config.php in your favorite text editor and fill in your database details as explained in Editing wp-config.php to generate and use your secret key password.

5. Place the WordPress files in the desired location on your web server:
If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server.

6. If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), rename the directory wordpress to the name you’d like the subdirectory to have and move or upload it to your web server.

For example if you want the WordPress installation in a subdirectory called “blog”, you should rename the directory called “wordpress” to “blog” and upload it to the root directory of your web server.

7. Run the WordPress installation script by accessing wp-admin/install.php in your favorite web browser.

8. If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php

9. If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp-admin/install.php

That’s it! WordPress should now be installed.

Installing A Theme

Now that you have WordPress installed, you will probably want to start exploring different ways to make your site appear to your visitors. The design of your site, as installed through WP, is known as a “theme.”

There are literally thousands of free WordPress themes out there for your to install, as well as some premium themes that will cost you money for added customization options and support.

When picking your theme, keep the following in mind:

Your target audience – are they going to be tech savvy, or do they need a theme that is simple to read and navigate?
Legibility – While some themes have very cool flashy effects, make sure to never sacrifice legibility over looks.
Sidebars – Some themes come with one, two, or three columns in which you can put content. When choosing your theme, think about how you want to organize your content.
What “fits” – Choosing a theme isn’t rocket science. Just find a theme that you like, that you think will work for your site, and has some aesthetic appeal, and then go with it.

So where can you find themes for your new WordPress installation? A simple google search for “free wordpress themes” will give you thousands of results.

Here are a few links to take a look at also that might help you find that perfect theme:

100 Excellent Free WordPress Theme

45 Excellent Free WordPress Theme

15 High-Quality Premium-Like Free WordPress Themes

50 Beautiful Free WordPress Themes

Installing A Theme

Installing a theme is quick and simple.

1. Download the theme of your choice

2. Open up your FTP client and login. Find your /www/ folder.

3. Navigate to your wp-content directory (/www/wp-content)

4. Navigate to the ‘themes’ folder (/wp-content/themes)

5. Create a new directory with the title of your choosing (Right Click > Create Directory).

6. Click and drag the theme you downloaded into this new directory

Done!

All that is left to do now is log in to your WordPress administration panel (http://yourdomain.com/wp-admin). In the left sidebar, click ‘Appearance’ and then ‘Themes.’

If everything went smoothly, you should now see the theme that you just installed. Simply click the theme, and on the pop-up, click ‘install.’ That’s it!

Play around with different themes and find something that works for you. There are thousands of options out there, so don’t hesitate to keep searching for something better and new.

Stay tuned for part two by subscribing to the feed.

And THIS Is Why You Don’t Steal Online Content

Brian — Fri, 16 Jan 2009 23:39:32 +0000

Update: The site that was stealing content has removed their post, although I did not get any sort of reply email. And to the people that were emailing me from Web Design Tuts with those dirty messages – it was other people stealing WDT content, not the other way around

Second Update: The site owner has kindly emailed me and apologized for what happened. The article was removed and no harm was done. I will keep this post up as a way to help deter future content thieves. Look everyone, if you’re going to take content, at least don’t steal someone’s bandwidth, and it never hurts to give a credit link. We all make mistakes, but hopefully this will prevent some from happening down the road.

Today I received an email from a reader of Web Design Tuts informing me that someone had republished one my first tutorials on another site. I checked it out, and there it was – my six hours, and 2,000 words of work. I scrolled the page looking for any kind of link or credit to WDT, none. I soon realized that they were even grabbing the images right off of my server, thus taking up my bandwidth!

And THIS, my good people, is why you should NEVER steal online content. I have emailed them and left a comment asking for them to kindly remove the tutorial. Until they do, their readers will see what they have done.

I realize that this happens every day online, but listen everyone: the internet is a community. As bloggers especially, we need to work together to build better websites and put together better content. Stealing is never the right way to go about doing this.

Launching Web Design Tuts

Brian — Mon, 05 Jan 2009 23:00:25 +0000

Well I knew it couldn’t stay a secret forever. Today, after writing a 6 hour, 2,000 word Photoshop tutorial, I went ahead and did an early-open for Web Design Tuts. I rolled out a couple of Twitter updates to get a few people’s reactions to the site. Some loved it. Some hated it.

@BuildInternet was the first to actually look up Web Design Tuts on Who Is and noticed that the nameservers were pointed to Elite By Design. And the secret was out!

So yes, I am launching Web Design Tuts as a companion site to Elite By Design. I’ve written some posts in the past here on EBD about web design, but there was something within me that wanted to take it further and really push myself to teach other people what I know, and grow as a designer in the process. I plan on writing one post per week at first on both Web Design Tuts and Elite By Design. As the sites gain more momentum, I’ll be more comfortable increasing the posting rate and even hiring some guest posters down the road.

Until then, feel free to check out Web Design Tuts and read How To Design The PSD Tuts Website In Photoshop. Please be sure to subscribe to the feed so you can get updated when our next post rolls out.

On a side note, I’ve received a few emails, direct messages, and comments calling me out on copying PSD Tuts in naming the site Web Design Tuts. In fact, just a few minutes after launch I already had someone hating the blog.

Let me assure you a couple of things:

I didn’t name the website to try and emulate or impersonate Collis and his wonderful websites.
I am not affiliated with the Envato network.
I support Collis and the Envato network and I am in no way trying to push my site by ‘playing their name.’

If you have anything you’d like to talk to me about in regards to Elite By Design, Web Design Tuts, or if you’d just like to leave your opinion, don’t hesitate to comment on this post or get in touch with me.

I look forward to hearing your thoughts and opinions on the new site.

Artist Allure: A Vitaly S Alexius Showcase

Angie Bowen — Fri, 12 Dec 2008 12:00:39 +0000

Vitaly S Alexius is an innovative graphic artist with a style all of his own, and of his own making. Born in Novokuznetsk, located on the Tom River in south central Siberian Russia in the year of our Big Brother (1984, for all those not acquainted with the reference). With a fascination in all things celestial and a wide range of artistic backgrounds, add a dash of Photoshop enthusiasm, and Vitaly has created a unique artistic voice that shines like the stars from the heavens above. Early in his life, Vitaly grew up in the European architecture and factories that surrounded him,and he immersed himself in it. In the late 90’s Vitaly found himself inexplicably launched overseas to Toronto, Canada where he completed his artistic education and gave rise to his style which he named ’Dreaminism’. Vitaly is currently working in illustration and photography exploring a variety of outlets such as CD/book/comic covers, posters, concept art and more.

Indulge in the following showcase of Vitaly S Alexius’s ’Dreaminism’!

Modern Magic

Modern Magic was a design done for the cover of the New Yorker magazine where we see Vitaly’s love for looming architecture take form. The piece offers a contrast whereas a large metropolis brimming with polluted clouds of air is pitted against a serene cottage resting atop one of the massive structures being bathed cleanly in a vast ray of sunlight.

~There’s no place like home.

Machinery of the Stars

Machinery of the Stars is a dazzling digital display born of a simple concept. ‘Perhaps there is another you, looking up in the sky, across the universe?’ From this simple ponderance, Vitaly turned to his love of the celestial, painting a breathtaking explosion of astral machinery above an expansive cityscape, and a lone person taking it all in lost in the question that inspired the piece.

‘What do you see,
when you look onto the stars,
In the darkest hour of night?’

Symphony of Darkness

Symphony of Darkness is so aptly named it is almost as frightening as the piece itself. This brilliant blend of the macabre and surreal creates a scene of beautiful horror that will stick in your mind for days. There is not much else to say about this work that it does not say for itself, not to mention the aid of the verse the artist attached to it.

‘There ain’t nothing to fear,
But the living fear itself,
And the sound of metallic footsteps
In pitch black darkness,
Where pure despair collects it toll.
Don’t blink or close thy eyes,
Or thou may see it too.’

Consonance

Consonance is a piece that grew from the idea that ‘music is about harmony, like a growing tree’. This inspiring illustration was created as for a school assignment based on the theme ‘Classical Music’, and the monotone creation with subtle flecks of color grant it that ageless flow that create the harmony it reaches for.

Collision of Worlds

Collision of Worlds is another amazing digital masterpiece with a nod to the stellar wonders that fascinated Vitaly as a child. With potent imagination and stunning astral imagery this vibrant creation explodes across the digital canvas coming to life with remarkable ease. No doubt about it, this is what’s like when worlds collide!

‘Falling, falling, falling…
My world was crashing down.’

Starcatchers

Starcatchers is by far the most colorful and rich piece that we have gathered from Vitaly’s gallery. Both in depth and scope, this surrealistic extravaganza delivers the truest essence of art. The artist’s included verse eloquently aids the piece so we shall let them say their part.

‘No certain future in sight

Nothing but darkness in the immeasurable depths of space
Between the horizons of distant stars

No other options upon this path,
But to evolve, and to adapt to the undying laws
That shaped the universe itself.

And even go beyond,
To catch the stars themselves,
In a tight grip of metal
To harness their energy
for our bidding…’

10 Best Free WordPress Themes You Haven’t Seen

Angie Bowen — Mon, 08 Dec 2008 13:00:50 +0000

When it comes to blogging and online content management systems, one name is spoken more often than any other: WordPress. This amazingly user-friendly, endlessly-customizable framework is an open source project that has revolutionized the online community since its creation in 2003. Cropping up on hundreds of thousands of sites across the interweb with eager users and community created plugins to enhance performance, this programming powerhouse shows no signs of slowing down.

With so many sites on the bandwagon, designers and developers have answered the call by bringing a multitude of WordPress-ready themes to keep sites looking fresh and new. Given the popularity of the product, these themes make waves when they land in the cyber sea and finding examples that have not been widely used can be difficult and a little bit intimidating. However, after scouring the vast recesses of the web, we have found a few gems that you may not have seen before. Here are some of the standouts we happened to uncover.

Perfectom Theme

Features

Optimized for all browsers
XHTML/CSS valid
Fixed width
2 columns

This theme offers a clean, very sleek setup for your website. It seems like it would be ideally suited for a fashion blog of some kind. Very crisp, overall.

CSS Gallery Theme

Features

Built in tagging
Google ads and a sidebar block with 125 x 125 banner ads
Valid XHTML 1.0 transitional and valid CSS

Technically this theme was built as a base for a CSS/website gallery, and wonderfully so, however, personally I think the design also lends itself to being used greatly as a portfolio or as a general showcase gallery.

Langit Theme

Features

Clean and simple
3 columns
Sidebar widget ready
XHTML + CSS valid
Tested in Firefox, Internet Explorer 6, Opera, and Safari
Compatible with Wordpress 2.5 and below
Logo PSD and font are included in the package

This is simply a wonderful theme for anyone looking to organize an in-depth blog or manage content that requires multiple category listings and also needs a lot of features. This theme meets both of those stipulations with grace and ease.

Linoluna Theme

Features

Lean and simple CSS
Grid Layout
Tabbed Navigation
Slideshow animated featured articles on front page

An extremely deep magazine theme suited magnificently for multi-author blogs. Among its many accessible features is a fantastic statistics calculator in each post which includes total comments, total views, author name, category, date, and an email address, not to mention the print function.

Monochrome Gallery Theme

Features

Custom admin panel
Easily customize theme
Four widgetized areas
More homepage content
Author Archives
Two page templates
No editing themes files
Blueprint CSS
Valid XHTML and CSS

Monochrome Gallery is a free widgetized theme for Wordpress packaged with an author archives page, AJAX slideshow, categorized posts with thumbnails on the homepage, and a CSS framework to aid in customization. Need I say more?

Small Magazine Theme

Features

Unique and fresh design
Widgetized Sidebar
125×125 ad spots
250×250 adsense spot
Easily customizable using CSS
Custom 404 Error page
Fixed width
Right Sidebar
Built in Flickr support
Styled Pagination
Built in Gravatar
Valid CSS & HTML

Here we have a fully loaded magazine theme packed with features. Completely ready to launch your online publication style site with a built in photo gallery and featured articles sections. If it’s a magazine theme you need, look no further.

Arthemia Theme

Features

Drop Down Menus
Automatic image resizing for thumbnails
Gravatar Support
3 column with enhanced footer

On the other hand, when you need the perfect balance between a magazine type setup and blog, then this is your theme. You get the magazine headers and featured articles, with an ordered post section below a featured category break.

Isolated Theme

Features

Contains search, author, and links page templates.
Mootool Accordion for bulk post display.
Collapsible/expandable sidebar.
XHTML1.0 Transitional
Sidebar is above footer, and has 3 columns.
GD Image Titles (Can be disabled via Theme Options Page)
Tested in IE7, IE6, Firefox 1.5, and Opera 9

Probably the most unique theme I have seen in a while, this visually stunning theme, not to mention how technically interesting it is, makes me think of flipping through a book. An easy addition to the list, without question. I expect to see this cropping up all over the web.

Gluttony Theme

Features

Two-column
Widget-ready
Rounded-corners

Yet another fine example of a content based theme. Meaning it is simple and clean while still offering a variety of features. Though none of that detracts from letting the content shine through.

The Morning After Theme

Features

Clean grid-based design
Support for WordPress widgets
A three-column home page
Featured post highlighting
Associating images/thumbnails with recent posts
Customizable logo/header image
Easy CSS classes for adding captions and wrapping text around images in posts
Support for asides
Option for readers to e-mail posts to friends
Option to switch to a print-friendly view to print posts

The theme was created based on a brief survey on the WordPress forums about what people would want to see in a unique magazine-style theme. Nice showcase layout for your recent posts.

Bonus Versatility Lite

Features

Two-collumn theme
Ad-ready
Widgetized Sidebar
Featured Post
Dropdown CSS Menus
Integrated related posts, social bookmarking buttons and more

As a bonus we decided to add a new theme that was just released this week. It’s a nice simple and clean blog theme released under the Creative Commons License.

What underused themes have you discovered recently on your trips around the web that you think would have made a nice addition to the list?

50 Most Fresh and Inspirational Favicons

Angie Bowen — Fri, 05 Dec 2008 12:00:54 +0000

Branding goes deep these days. Logos are not the only way web designers are leaving their mark on the world wide web. They are scaling down their focus to 16 pixels by 16 pixels, making a different kind of mark altogether. Favicons have exploded across the expanse of cyberspace, cropping up in browser tabs and address bars everywhere. These tiny pixel art impressions of the site can be a daunting task for a designer. With such a small canvas for creation, how does one capture the essence of the site? Well, they may be petite, but we found some examples of fashionable favicons that brilliantly use this minuscule medium with both skill and verve.

Check out the showcase below, and be sure to let us know of your favorite favicons that we may have overlooked!

A List Apart

Trap Solutions

Szpo

Nilesh Chaudhair – Shutterbug

Thinking Woman’s Diary

Reach Group Consulting

myGoya

Juice

India Macromedia User Group

HUGS

Flashaholics

Evozon

Enlightened Lamp Recycling

Jeffery Zeldman Presents

ITC Fonts

Ornamentals Photoshop Brushes

30 Most Inspirational Business Websites

Angie Bowen — Wed, 03 Dec 2008 12:00:15 +0000

It’s no secret at this point, this internet thing is going to be big! Most businesses today have some kind of online presence, usually focused around their website. The marketing value of this tool is virtually immeasurable. Unless you are a company that specializes in measuring the marketing value of of the internet as a mainstream tool for enhancing your business, then you might have an idea. And if that is your business, what kind of website would you have?

Business sites have a different goal than most, to be sure. For most business sites, usability is the main focus when putting the site together. They want to make sure that function takes precedence so that users can easily find their way around to everything that they are looking for. Some businesses believe the look of the site is as important as everything else, and they have achieved usability with an equal focus on aesthetics. Here are the thirty most inspirational business websites that we found.

PhotoImageArt

Group8020

Cad & the Dandy

Assaroe Falls

Mia and Maggie

Coconut Grove Apartments

Expression Tints

Porters Carpet and Furniture

Sunderman Construction

Rock Creek Strategic Marketing

Tastebook

Dornoch Castle Hotel

The Resume Girl

30 Elm

Hotel Oxford

Pink Comb Salon

Best Mortgage Deals

Depozit De USI

101 Prints

Miami Angel Properties

Madame Surto

Empower Walk

EarthGoods Natural Foods

Eliteak Outdoor Furnature

Merchant Vinyl

Fox Plumbing

Oypro Commercial Real Estate

Adcapital Industries

Paul Geller Enterprises

Advanced Recovery Computer Recycling

The Harsh Future Of Web Design?

Matt Hamilton — Mon, 01 Dec 2008 12:00:31 +0000

I think we can all agree that design has been in a constant change since the burst of the Internet, however it seems that the direction of who is doing the designing has also changed from those who are ‘professionals’ in their field to the new breed – ‘home designers’.

So – is this the direction for design in the future? Will design professionals be shunted off to the side to make way for other, cheaper alternatives? Or will people recognize this is killing the industry and the extra money that is paid is for quality?

Spec work seems to be the design of the future. For those who don’t know, spec work is when you hold a ‘competition’ where designers compete against each other in order to win the prize money. The thing that annoys professionals however is that the cost they can charge is being lowered as their profession is cheapened and that they could be competing against unqualified and inexperienced designers.

I myself (being an early design student) have participated in a few spec competitions to experience first-hand what it is like. Out of the 7 or so I entered, I did not come first, however, I received a commendation prize for a good design in which the ‘client’ purchased the exclusive rights to. Out of most of the competitions I entered there were 40-300 participants. Positives can be drawn from these experiences (e.g. practicing design with a real design brief) and that can be good for students however, the still-obvious downside is the cheapening of the industry.

Main reasons why spec work can be seen as ‘bad’.

There can only be 1 winner out of potentially hundreds of entrants
It lowers the amount of business they can receive. Clients see much more opportunity in paying $300 for 100 different designers.

If you take a look at the current spec sites (99designs, CrowdSpring and Incspring) you can see an evident explosion in popularity as word has spread around. As with Newton’s third law of motion, there has been refute for the idea. Protest websites like NO!SPEC have been set up to counter these various spec websites. On the NO!SPEC website it outlines all the various reasons as to why they oppose this idea so I will let you go and read that if you desire. This opens up to the main part of the post where you have your say.

Is spec work the way of the future? Is it going to cheapen the industry permanently or is it just a fad? Are the new younger designers going to replace the current experienced designers? Does education still have a place within the industry with spec work booming?

22 (New) Free High Quality Icons Sets

Brian — Fri, 28 Nov 2008 12:00:19 +0000

Icons are a staple of the design industry – every day new sets are being released into the world, most often with little to no attention. Today we are going to showcase twenty-two new fresh high quality icon sets perfect for your design project. Enjoy!