We need to create our templates in a special format, but it can be edited in any HTML editor. If you want Dreamweaver to recognize the .ss file extension as HTML you need to follow these instructions.

If putting together the HTML is not really your thing, I would suggest heading over to SmashingMagazine’s list of free HTML templates.

Also, I am not posting my CSS files. You can take this raw HTML and use CSS to do your own layout (or you can even just use the loops in the .SS file and use different HTML markup).

The .ss file is basically just an HTML file. There is one .ss file that holds the header and footer, and then various other files that handle the middle of the page. You can find better explanations of the templating language here.

We need to create only one page-specific template – the PortfolioHolder.ss template. We do not need a PortfolioPage template, as we are displaying all portfolio items on one page.

The PortfolioHolder.ss template is as follows:

<div class="hr grid_12 clearfix">&nbsp;</div>

		<!-- Catch Line and Link -->
			<h2 class="grid_12 caption clearfix">My <span>portfolio</span> is pretty darn awesome, don't you think?</h2>

		<div class="pr grid_12 clearfix">&nbsp;</div>
        <% control Children %>
        	<div class="grid_3 textright" >
				<span class="meta">$NavSubTitle</span>
				<h4 class="title ">$Title</h4>
				<div class="hr clearfix dotted">&nbsp;</div>
				<p>$Content</p>
			</div>
            <div class="grid_9">
				<% control PortfolioProjects %>
				<a class="portfolio_item float thickbox" href="$Fullsize.URL" title="$Caption">
				<em>$Title</em>
                <img src="$Thumbnail.URL" />
				</a>
				<% end_control %> <!--end PortfolioProjects -->
            </div>
            <% end_control %><!--end Children-->
		</div>

What we are doing here is looping through the page’s children (the PortfolioPages), displaying their info and then looping through the dataobjects (PortfolioProjects) that we have associated with each of those pages. We use the $FullSize.URL method of retrieving the images, so that we can add alt text to our images.

This file goes in the Templates/Layout folder. I am leaving the rest of the theming to you, but now you know how to set up all the crucial bits for your portfolio.

The inspiration for this post is OrigninalMoxie. It is my personal portfolio, and I built it in SilverStripe in about half the time it would have taken me in WordPress – and it is only the third SilverStripe site that I have built. Now, I did get help from their community when building this site, but that is quite OK. I am going to pass their insights on to you.

What first needs to happen is you need to install SilverStripe. It is almost as easy to install as WordPress, but it actually requires a few extras.

To be able to run SilverStripe, you need to have PHP5 enabled on your server. And, you might need a little bit of patience.

First, download SilverStripe and upload it to your webhost. Navigate to yoursite.com and follow the install directions. For the record I am pretty sure that it always says that it cannot determine if Mod_Rewrite is enabled. (At least on MediaTemple).

Once you have your shiny new installation of SilverStripe up and running, it is time for the fun stuff…writing the PHP functions that make the site work. This is the beauty of SilverStripe – the ability to write custom data & page types with a few lines of code.

You will also need to install the Dataobjectmanager and SWFupload modules. To install, simply download them and upload them into your main directory and run yoursite.com/dev/build. You will need to rename them to dataobject_manager and swfupload before running the dev/build.

Now that those are installed, we can move on to building the site.  (I am also assuming that you have written your HTML/CSS and that your site is designed). I find it is always best to write the HTML/CSS before delving into the PHP. If it doesn’t work when the page is static, it is definitely not going to work once you start messing around with the theme.

Time for the PHP! (For this example, I am assuming that you have only one page for your portfolio, but that your work is divided into multiple categories)

We start by determining how we are going to display our data. In this example we want to break down our work into categories. But, the beauty of this is that we don’t have to go writing data types for each category. We are going to create the following files:

• PortfolioProject.php
• PortfolioPage.php
• PortfolioHolder.php

PortfolioProject is not a page, it is a dataobject, and it is the most specific of our files. This file creates the live entry for each portfolio piece that appears on your site. PortfolioPage is essentially the category. This means that if you ever want to change your portfolio so that pieces for each category are on their own page, you can. PortfolioHolder is the page that will display the content from all of its children (the portfolio pages).

Confused yet?

Let’s start by creating the PortfolioProject.php file.

<?php
class PortfolioProject extends DataObject
{
static $db = array (
'Title' => 'Text',
'Caption' => 'Text'
);
static $has_one = array (
'PortfolioPage' => 'PortfolioPage',
'Thumbnail' => 'Image',
'FullSize' => 'Image'
);

static $summary_fields = array (
'Title' => 'Title',
'Caption' => 'Caption'
);

public function getCMSFields()
{
return new FieldSet(
new TextField('Title'),
new TextareaField('Caption'),
new ImageField('Thumbnail'),
new ImageField('FullSize','Full size image')
);
}
}
?>

We just created a custom dataobject. Pretty cool, eh? We also told the system what fields we need to be able to edit on the front end. Copy your file to the mysite/code folder and go to yoursite.com/dev/build to create the page type in the database and make sure there are no errors.

Now the PortfolioPage (or category):

<?php
class PortfolioPage extends Page
{
static $has_many = array (
'PortfolioProjects' => 'PortfolioProject',
);

public function getCMSFields() {
$f = parent::getCMSFields();
$f->addFieldToTab("Root.Content.Portfolio Projects", new ImageDataObjectManager($this,'PortfolioProjects','PortfolioProject','Thumbnail', 'Category'));
return $f;
}
}

class PortfolioPage_Controller extends Page_Controller
{
}
?>

Copy your file again to the mysite/code folder and go to yoursite.com/dev/build to create the page type in the database and make sure there are no errors.

And finally the Portfolio Holder. This page is going to aggregate the information from its child pages.

<?php
class PortfolioHolder extends Page
{
static $allowed_children = array(
	'PortfolioPage'
);
}

class PortfolioHolder_Controller extends Page_Controller
{ 

}
?>

We have now written our “Holder” page.

Copy your file again to the mysite/code folder and go to yoursite.com/dev/build to create the page type in the database and make sure there are no errors.

Check back later this week for how to enter your data and then show it in a template.

CONTEST IS CLOSED!

These are the folks who handle my printing services (and most of my clients’ printing). I have never been disappointed with what arrived from them. They even have a picture of my business cards on their Yelp! page…Their color business cards are always spot on with what I sent.

To enter:

Leave a comment here.
Tweet this post with @purpleurbia and @uprinting mentioned.
Leave a comment on our Facebook page.
(you may enter once via each method for a total of three entries)

Giveaway Prize:

500 Business Cards
2 x 3.5”, 2 x 2” (square card) or 1.75 x 3.5” (slim card)
14 pt gloss cardstock, 14 pt matte cardstock or 13 pt recycled uncoated cardstock
Full Color Both Sides; Offset Press; 3 Business Day Printing
Shipping: FREE UPS Ground Shipping
Eligibility: Limited to US Residents only. Must be 18 years old and up.

Contest ends May 22.

Please don’t hate me for calling these folks out. There is nothing inherently bad about their sites. However, the layots & graphic elements are becoming all too common from one site to the next. These are all well put together examples, and to someone who doesn’t read 30 design blogs everyday, they look pretty darn good. But are they worthy of being showcased for their individuality? Probably not.

“3 bar” layout

Here are 5 sites with the “3 bar” layout – a top nav with a logo, a middle bar with headline content and main content below that. Usually the top nav is in a dark grey, the middle is a bright blue or green and the bottom is a light color.

http://www.solidshops.com/ – This layout has become ubiquitous with web apps. I could have filled 5 blog posts with web apps that use this style and layout. It looks clean and professional, but gets an F for layout originality.

http://niagakit.com/ – Same as above.

?http://www.proudcloud.net/

http://www.yaronschoen.com/ – At least the illustrations and breaking of the grid make up for the standard layout used.

http://www.nabru.co.uk/ – Again, it looks clean and professional and the elements add a more organic feel, but the layout is still too out-of-the-box for me.

Here is where to go to learn how to do this effect:

PSD Tuts+ – How to design a family of websites

And, here is how to do it right:

http://madebygiant.com/ – Giant Creative has taken this layot and made it their own simply by making their navigation “talk”. The bright colors contrast with the neutral background. The superb typography makes the design shine.

http://www.stanleysolutions.in/ – This site is broken into those same 3 visual sections, but the diagonal lines on the center text box as well as the lack of line dividing the nav and the feature area make this site own its design.

The pinking shear effect.

I like textured edges as much as the next guy. Heck, I probably like sewing and handmade edges more than the next guy. But it has become an over-used design trend. Evidence below:

https://epicevent.com.au/ – To me this site is overdone and Photoshop heavy. The overall effect is nice, but there is just one too many effects here.

http://www.stthomasartgallery.org/ – You cannot take pinking shears to wood. The zig-zag line makes little to no sense here. No background behind the nav and darker text would have made more sense.

Culinary Culture

http://www.culinaryculture.com/- This one has me on cute overload. This is another case where someone needed to turn off 30% of the Photoshop effects. It isn’t bad, but it isn’t terribly awesome either.

Here is where to go to learn how to do this effect:

Grafpedia – Design a unique WordPress theme

Grafpedia – Gritty website design

And here is how to do it right:

http://analog.coop/ – The effect is used sparingly. And tastefully. It adds to the design without being an over-powering element.

In conclusion, the web design world is slowly being over taken by what is “trendy”. And, yes, it can still be good design even if it is “trendy”. What you want is a site that acknowledges the trends in the industry and then takes them and makes them their own, instead of letting the trends take control.

That being said, all of the websites here are designed well (I don’t like ugly websites, and don’t want to call out people for having terrible skills, just doing what is “trendy” or “typical”), some are just more original than others. These sites were all put together by designers with tremendous skill. Some are just a little too attached to the bandwagon.

What should you do? You should have a landing page! One that lets people know that you are getting ready, and if you know a tentative launch date. You have probably purchased your domain name well in advance of your site, and having some information on the site will probably be handy if it comes up in a search.And with a launch page in place, you don’t need to be afraid of passing out your card with your yet to be unveiled site on it.

Things that you should include on your page:

• A way to contact you (e-mail, phone, etc. for those looking for your services or information quickly)
• An e-mail sign-up list. E-mail marketing is critical, and a MailChimp account is free for up to 500 subscribers there is a pre-built subscribe form that you can style to your heart’s content.
• Information about who you are and what you do. This is kind of basic, but a paragraph or two will do.
• Social media links. Your Facebook, Twitter, LinkedIn, etc. profiles (if you have them) should all be hooked up here. It is time to find yourself some fans.
• A look and feel that is similar to what you are going for on the final site. It doesn’t have to be exact, but it shouldn’t go from web 2.0 to grunge.

There are a couple of free WordPress themes out there that do this (such as LaunchPad and Changing Room) to get you started.

To all you designers, this should be something you consider adding to your standard offering. Up your price by a couple hundred dollars, but add this to your package and explain the SEO benefits and marketing benefits to your clients, and they will appreciate your knowledge! And the extra hour it will take will pay off!

(header image credit : Dennis Wong)

Brooklyn Brewery

Brooklyn Brewery

This site is just like walking into my favorite pub, dark and green. The logo is even in the form of a neon sign. Well done.
Bridgeport Brewing Co.

Bridgeport Brewing Co

This site is gritty and collage-y with out being over-done or un-done. The animation flows seamlessly and the look is cohesive from top to bottom.
Bard’s Beer

Bard's Beer

Here the look is completely different from the first two. Light and bright the site showcases the beer in the middle. The beer bottles act as navigation (some would call this mystery meat navigation, but the navigation is duplicated on the right of the screen so you can easily navigate if you don’t catch on to the bottles).
MacTarnahan’s

MacTarnahan's

Lovely, vintage-y and my second favorite color, green! The site has a retro feel and is just grungy enough to satisfy my need for web trends.
Mother Earth Brewing

Mother Earth Brewing

If life were as easy as peace love & beer, the world would definitely be a better place. The site has a wonderfully clean layout, but the textured background and wheat make it feel natural, which is what I assume they were going for.

Hopefully the sites were inspirational. I know in researching this article, beers I know to have great labels have surprisingly terrible websites. It took a lot of digging to find these gems, mainly because I was looking for ones that were not big name sites.

(header image credit tico24)

Almost every website has a featured content slider or tabbed section of some sort, so today, we will make an auto-scrolling, fancy-schmancy featured tabbed content thingy. Which will be primed and ready for us to make add some WordPress code to next time.

Take a look at this bad boy!

We are going to start by downloading a couple of important files:

jQuery

jQuery UI (the core and tabs)

Put these in your project folder/js.

Now create an HTML file in your root folder.

And create a blank stylesheet in your project folder /css.

Now, we need to make sure that we are calling the script files and css.

 		<link type="text/css" href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/ui.core.js"></script>
		<script type="text/javascript" src="js/ui.tabs.js"></script>

The core and tabs js files can be found in the development folder of your download.
Now, lets have some fun. In your HTML file, you will need to create an unordered list which will become the tabs, and a series of divs that will contain the corresponding content.

        <div id="Container">
            <!-- Tabs -->
            <div id="tabs">
                <div id="tabs-1" class="feature">
                    <h3>my<strong>robot</strong></h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip x ea commodo consequat.
                    </p>
                    <img src="images/robot1-big.jpg" alt="Featured Product" class="bigIMG" />
                </div>
                <div id="tabs-2" class="feature">
                    <h3>big<strong>robot</strong></h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipx ea commodo consequat.
                    </p>
                    <img src="images/robot2-big.jpg" alt="Featured Product" class="bigIMG" />
                </div>
                <div id="tabs-3" class="feature">
                    <h3>cool<strong>robot</strong></h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                        x ea commodo consequat.
                    </p>
                    <img src="images/robot3-big.jpg" alt="Featured Product" class="bigIMG" />
                </div>
                <ul id="tabby">
                    <li>
                        <a href="#tabs-1"><img src="images/robot1.jpg" alt="robot" /></a>
                    </li>
                    <li>
                        <a href="#tabs-2"><img src="images/robot2.jpg" alt="robot" /></a>
                    </li>
                    <li>
                        <a href="#tabs-3"><img src="images/robot3.jpg" alt="robot" /></a>
                    </li>
                </ul>
            </div>
        </div><!--end Container-->

This is where it gets fun! We are now going to make the slider look pretty and act the way it is supposed to.  I used Eric Meyer’s CSS reset to start with, and you probably should too.  It is followed by the styling telling the featured content how to look and finally the CSS telling the tabs how to behave.

/*Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/*End Reset*/
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height::21px;
}
#Container {
	width:960px;
	margin-left:auto;
	margin-right: auto;
	position:relative;
}
.clrBOTH {
	clear:both
}
img {
	border: none;
	}

#tabs {
	background-color: #6cb9c7;
	height:275px;
	padding-top: 25px;
}
.feature p {
	color: #ffffff;
	float:left;
	font-size: 1.166667em;
	margin-left:30px;
	margin-right:30px;
	line-height: 1.5em;
	width: 520px;
}
.feature h3 {
	color:#ffffff;
	float:left;
	font-size: 2em;
	font-weight:normal;
	line-height: 0.875em;
	margin-top:00px;
	margin-left:30px;
	margin-bottom:10px;
	width: 620px;
}

.bigIMG {
	margin-left:20px;
}
#tabby {
	position:absolute;
	left:0px;
	bottom:-75px;}
/* Tabs
----------------------------------*/
.ui-tabs {
    padding: 0em;
    zoom: 1;
	z-index: 100;
}

.ui-tabs .ui-tabs-nav {
    list-style: none;
    position: relative;
    padding: 0em 0em 0;
}

.ui-tabs .ui-tabs-nav li {
    position: relative;
    float: left;
    border-bottom-width: 0 !important;
    margin-top:5px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
	text-align: center;
    text-decoration: none;
    padding-top:30px;
	width:320px;
	color: #ffffff;
	height:75px;
	font-size: 1.5em;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
	background-image: url('../images/arrow.png');
	background-repeat: no-repeat;
    padding-bottom: 0px;
    border-bottom-width: 0;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
    cursor: text;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer;
}
 /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
    padding: 0em 0em;
    display: block;
    border-width: 0;
    background: none;
}

.ui-tabs .ui-tabs-hide {
    display: none !important;
}

  Here’s why that is working: we positioned the div contianing the tabs below the content area, but allowed the padding (the area where the arrow is) to overlap. We set the arrow to be a background image on the selected li (the selected class will be applied by the jQuery. Pretty nifty, eh? Meh, that’s alright, but it is still lacking a little magic. We want it to cycle through the featured content automatically, all sexy and such. How do we do that? We add a little bit more javascript!

$(function(){
 
    $('#tabs').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 2000);
    
   });

 Make sure to wrap that in <script> tags or put it in an external js file and link to it after your other files. And, voila! You have now made our slider! Hooray!

No, we are not knocking those things, but we know that they are not enough. We understand the internet. We live on the internet. It is what we do. But it is not where our clients live. It is not what they do. We have to find them in a real world where there are real people in real business clothes with real business cards talking about real business things.

So, how do you go about bringing your virtual business to people in a not-so-virtual world? You start off virtually, of course. You need to make sure your LinkedIn profile is all snazzy’d up before you get going, because these not so virtual people tend to hang out in this one virtual environment.

Ok, now for our 12-step Get Real Virtual Program:

1. Order business cards.
   Paper ones that feel good when you hold them. And whatever you do DO NOT GET THE FREE ONES FROM VISTA PRINT. (Sorry to have to name names). They print their logo on the back and limit you to templates that are ugly. Spend a little bit of money on them. If you need some inspiration check out Creattica, CardObserver or Flickr. Just make sure that your cards look as professional as you want to be taken. Try using a local printer, they might cost more, but they might be able to refer you some business in the future.
2. Find a networking group.
   Or 10.  Find a group of local entrepreneurs or a local leads group. Local chambers of commerce are also good places to start. If you want to start this search virtually, places to start are LinkedIn, MeetUp and NetworkingMonkey (Chicago only). Then, go to the networking group!
   
3. Find an industry group.
   This is different than a networking group. This allows you to show you care about your industry, such as an AIGA or a WebGrrrls membership. You can become involved in your community and show off your mad skills. People take notice.  Why on earth would we build a twitter application for free? For the karma. And the industry publicity. We know it makes us look good. Now, go make yourself look good.
4. Go speak.
   To a women’s group. A high school. It really doesn’t matter to who. Just start talking to people. If you go talk about your career path at a high school there is always the possibilty that the right kid was listening and has the parents who own a company who need a website. Or, there is the karma thing again. Next time the school needs a website you might just find yourself first in line. 
   
5. Meet people.
   Go to small businesses in your area and introduce yourself. Schedule informational meetings. Be genuinely interested in the services you can receive in your own home town or neighborhood. People like to help locals, it’s true. I promise. If you make a point of meeting 10 new people every day, your business will grow beyond belief.
6. Host a seminar.
   But don’t do it just to sell. Do it to teach. If you give a little of yourself people will appreciate you. They might even pay for your knowledge. If you host a free seminar, people still need to feel like they came and learned something and not that they came to hear a sales pitch.  Their time is valuable, make sure they have something (knowledge) to take away.
7. Communicate.
   Wether you send postcards, flowers, promo items or e-mails make sure you stay in touch with all of your contacts and clients on a regular basis.  They need to hear from you.  You need to keep them close, so that you stay top of mind.
8. Advertise.
   Again, it can be a promo item or a newspaper ad, or an ad on an industry news site, but it has to reach the contacts that you are trying to make. It has to show them value. If a USB drive to 25 people with your logo has more value to your potential clients than an ad in an industry publication, then come up with a targeted list, make appointments and give away some presents. This is different than communicating because you are reaching people who you do not currently have a relationship with.
9. Volunteer
   Do something that has absolutely nothing to do with your business. Just get out there and help people. It might be a soup kitchen, a BEDS program, Project Linus (we might be partial to them), or just about anything else, but get out there and do something with no agenda. The people you meet know people. And the karma points here are the best.
   
10. Go back to that networking group.
    Over and over again. Become a regular. Get to know people. Make people think you are successful before you are successful by being there and always talking about how you are successful.  People like to do business with successful people. 
    
11. Approach your current clients
    Notice how we waited til almost the end for this one? There is a reason for that. If you wait to approach them until you have a lot of them, you have probably not done work for some of them for a while. It could be high time to offer some updates or some social media work (a twitter background perhaps?)
    
12. Go get some coffee!
    All that hard work deserves a break! And some coffee. And time to make sure that all of those real world contacts are connected to you virtually. Via e-mail, on your e-mail marketing list, linked up on linked in, friended or fanned on Facebook, followed on twitter and entered into a contact management database (Highrise, Salesforce, etc.)
    

(Image credit: BatgirlBob)

We thought we could help point you in the direction of some good folks who know what they are talking about.

Smashing Magazine

I would say they are one of the leading authorities on the internet well, on the internet. With articles covering everything from WordPress to CSS to HTML 5 to Design Inspiration they are a good reference for all designers and developers out there.

Build Internet

This blog is only about a year old, but they have some handy tutorials and excellent tips. There are series of “5 minute upgrades” and “Website Anatomy” which are great reads. I particularly like their color inspirations.

Webitect

I recently discovered this blog and am enjoying discovering articles on it. There is a wide range of tutorials and design inspiration and it is the second blog on the list written by a college student. (Sure makes us feel old!)

Web Designer Depot

The illustration on this one just mezmirizes me. But it is a good source of tutorials, web design trends and general articles.

jQuery for Designers

Everyone should know some javascript, it makes your website do a little pop. And this is a great resource for someone just starting out with jQuery (it is our preferred javascripting method).

Blog.SpoonGraphics

Freebies. High quality design tutorials.  The kind of stuff you actually want to reproduce.

BittBox

An excellent repository of freebies. There is an amazing collection of free Photoshop brushes on the blog and he gives out new free textures every Tuesday.

Net.Tutsplus

A great place for tutorials on some more complicated web stuff. PHP frameworks, interacting with the twitter API and OOP are all covered here.

Fuel your Creativity

This blog is written by an ever growing community of writers. Topics are as varied as the writers and has everything from tutorials to

Purpleurbia – We couldn’t leave out ourselves! This fledgling blog will continue to bring you 3-5 articles a week including tutorials, roundups and freebies.

This time it is their business cards! We actually bought our company’s cards from there before they started giving us stuff to give away for free. Here is a picture:

Purple Crayon Web Studio business cards

Ours our 2×2″, 14pt matte cards, 4 color on both sides. We have ordered 3,000 cards like this and have yet to be unhappy with an order. We are excited to be giving some away to a lucky reader!

Giveaway Prize:
250 business cards for One Lucky Winner (Free UPS Ground Shipping in USA)
Sizes: 2 x 3.5”, 2 x 3”, 2 x 2” (square card) or 1.5 x 3.5” (skinny card)
Paper: 14 pt gloss cardstock, 14 pt matte cardstock or 13 pt recycled uncoated cardstock
Specifications: Full Color Both Sides; Offset Press; 3 Business Day Printing

To enter:

Comment on this post what you would use the card for (a promotion, a business card, an enclosure card, etc.). For more chances to win, tweet this giveaway @purpleurbia @uprinting with the #giveaway tag!

Enter by October 15, 2009!