Ever been looking for that secret recipe to build a business from your writing or blogging? Then this is the perfect day to find this information, Collis from Envato has finally released his new book, “Build a Successful Blog Business“. From what I’ve got from the preview your able to download, it looks more than great. Then again, could we really expect any less from the founder of, Envato?

The book is available in two different formats, a PDF copy or a printed copy from Lulu.com. I’m picking up both copies next month, I’ve already decided where to place the book in my shelf. You’re interested in picking up a copy for yourself? Which I strongly recommend that you do. You’re able to order your copy via the amazing banner below, be one of the first people to own this magnificent book today!

A Little About the Book

How to Build a Successful Blog Business is a straight forward guide to building a publishing business online that covers everything from choosing a niche to hiring staff, registering a business to selling it, finding traffic to monetizing it.

Whether you are interested in creating an additional income stream or building a fully-fledged business, this is an essential read for web entrepreneurs and online publishers.

Source: RockablePress

Have you purchased the book? Will you pick up a copy? Either way, let us know your feelings and thoughts on this book.

Since our first round-up of Clients From Hell quotes got really popular, we simply decided to make another one. As you will notice this time the list of amazingly funny quotes is the 10 best quotes from January this year. All for your funny bones and to give you all a great big laugh.

Next part will contain the best quotes from February through March and is due to be posted in late August this year, so make sure to stay tuned by subscribing and follow us on Twitter.

All quotes below comes from our friends over at Clients From Hell. So make sure to visit them often for more hilarious quotes, we promise you won’t get disapointed one bit.

January

1.)

2.)

3.)

4.)

5.)

6.)

7.)

8.)

9.)

10.)

This has to conclude our first part of the Best “Clients From Hell” quotes from this year, our next part will be published late august so make sure to subscribe and follow us on Twitter.

Have any other quotes you like? You have a specific favourite from our little round-up?

As I mentioned in our small description, we’ve received a small discount offer from Rockable Press for the ever so amazing “Rockstar WordPress Designer” e-book. This is a LIMITED time offer and is only valid until 26 July, 2010 so make sure to pick up your copy for ONLY $19 USD right now! This is a $10 USD discount, so what are you waiting for? I’ve already picked up my book and it comes strongly recommended to Everyone who want to start learning WordPress development.

A Little About the Book

Managing web content has always been tricky, but with WordPress, any web designer can have a flexible, free and powerful CMS to use not just on blogging projects, but on all sorts of websites. In How To Be a Rockstar WordPress Designer you will learn step by step how to take a straight HTML site and power it with WordPress.

During the course of the book you’ll build THREE WordPress themes, a blog, a portfolio site and a general site with menus and submenus. Each theme demonstrates different aspects of WordPress theming and all three are packaged in with the book so you’ll have Photoshop, HTML, CSS and WordPress PHP files to refer to.

(source: Rockable Press)

Who is this discount for?

Discount offer ended 26 July 2010! You can still get the book for it’s original price of $29 USD. It’s still worth every penny!
Get the book here – Rockstar WordPress Designer

Other Great Books from Rockable

If you for some odd reason have missed any of the books they have, make sure to check out some of them below. I promise you, you won’t get disapointed one bit. I own a few of these books myself, and I strongly recommend them all.

1.) Doorstep Dairy

2.) BARSTIEK

3.) Tiny Fluid Grid

4.) Jai Pandya

5.) Tea Round App

6.) Flayks

7.) Squared Eye

8.) Riot Industries

9.) Veerle’s Blog

10.) Wip It

11.) Giant Media

I’ve been using Magento for a few weeks now and let’s just say it wasn’t an easy journey. I don’t want that to put you off though, because I approached it the wrong way.

I had a quick skim over the Magento For Designers Series on NetTuts+. (Not all parts had been posted when I started reading them), I read up to chapter 4. If you’ve read them then you can imagine my confusion when parts weren’t working and I couldn’t get the shop to show what I wanted.

Magento, at it’s core is quite hard to get the hang of at first. Just setting it up locally can be tricky for someone who isn’t at all familiar with eCommerce solutions such as me. I managed to get there in the end though.

The Back-End Interface

The back end interface is something that took me by surprise at first. The main things that I didn’t like straight of the bat were the navigational links. Nine links, almost each with at least 5 – 10 sub-links. On top of that, there is also another layer of links that appear from time to time. Yes, three levels worth!

Apart from the navigation the back-end admin panel is rather nice once you get the hang of it. It’s very clear what each page does, (that’s if you know a bit about eCommerce or just Commerce in general), and the design isn’t half bad either, although it’s no WordPress. There are also some warning dialog boxes which come up exactly where and when you need them, very helpful, especially on a live site.

The Products and Categories

The main things I’m going to go over are the Products and Categories. Adding products can be a nightmare at first, there must be at least 30+ to 50+ options on each new item and just getting the basic info put in can be a bit of bother. However, there is and upside, all of these options give you incredibly freeing functionality over how your store and products in general are run and displayed.

The Categories. The categories are, in a way, the same as the products; They can be hard to set up when you’re new to it all but in the end the amount of options are incredibly useful. The problem that plagues the categories interface is a simple problem, which isn’t that hard to fix, the copy. The copy really does bring that old feeling of:

It’s a problem that brings Magento down to a level it doesn’t need to go. I would like to see and interface that didn’t ask me for a URL Key or which CMS Block to add a new product to.

The Code

The code is surprising easy to understand. It reminds me of WordPress. As with WordPress you would just type the name of a PHP Function to get what you wanted here it’s just a matter of:

[sourececode language="php"]
getChildHtml(‘topMenu’) ?>
[/sourcecode]

The above code would get the list of categories that you’ve set up for the shop from the back-end. Please remember that they’ll only show up if you enable it with the back-end options.

The XML Side of Things

The XML is something you’ll have difficulty with. At first they seem a little bit pointless but as time goes on you’ll notice that quite a lot, if not all the functionality of you’re site is done through these. There’s a vast amount of XML files that you can use, ranging from the basic page template to the code for the wish list and even Google Checkout. I won’t pretend I know what the more advanced files are for because I honestly have no clue

If you’re a developer then I would suggest going through a few tutorials which teach the basics of theming for Magento, like the Magento For Designers Series on NetTuts+. Then just go for it and dive straight it. I found it easiest to find out what each file, (that I actually needed of course), did, then I would strip away the the few I didn’t need one by one, until I had my own basic Magento version of Starkers for WordPress.

The Conclusion and My Final Thoughts

Although this has obviously been a short post compared to others I hope you either now have a reason to use Magento or have decided to go somewhere else. I know that this review seems a touch negative in most places but when using Magento the benefits are obvious. You get a free piece of incredibly powerful eCommerce software. I hope that by showing you the things I disliked then you can decided on whether these things can be put up with, because to me, Magento is what I’ll be using for the future.

Typography

Smashing Slab-Serif Typography

Typography has been around for Centuries if not Millennia. It has played a major role in communication and a world without type can be extremely hard to comprehend. Ever since the first letter was punched , typography has advanced significantly. There are now a number of different styles and fonts to choose from, that almost anyone can use on their website or magazine/book. Read More…

Elegant 3D Text Effect in Photoshop

In this tutorial you’ll learn how to create an elegant 3D Text effect using simple the shape tool, layer styles and paths. Read More…

Creative Sessions: Illustrative Lettering

Illustrative Lettering touches on numerous creative fields. Historically, one could look to calligraphers, hand painted signage, and more. Even with early printed books it was small print runs and hand set type. In this session, you’ll learn how professional illustrators are inspired by lettering traditions from the past, and how they integrate this into their digital workflow. Read More…

How to Create an Incredible Typographic Illustration

All work and no play makes Jack a dull boy. In this two-part tutorial, we’re going to learn how to bring a simple proverb into a complex typographic illustration that achieves a level of realism without actually using any photos. Yes, we’re going to build this idea from the bottom up. In the first part, learn how to model your own objects in Cinema 4D and prepare them for isolation in Photoshop. Read More…

Create a Typographic Wallpaper

In order to create a typographic wallpaper, it would make sense to know a bit about Typography in the first place. Typography is the art and technique of arranging movable type. What does this mean? It means that text itself portrays a message all of its own. Read More…

Typography Eye Candy

The other day, while I was sorting out and organizing my bookmarks, I ran across this site called Letterhead Fonts . I had completely forgotten about this site and the moment I saw it, I knew I had to feature them here on Design Informer. If you like typography, then this showcase is definitely for you. Read More…

Web Development

Create a Vibrant Digital Design Poster with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS. Read More…

PHP: What You Need To Know To Play With The Web

In this article, I’ll introduce you to the fundamentals of PHP. We’ll focus on using PHP to access Web services and on turning static HTML pages into dynamic ones by retrieving data from the Web and by showing different content depending on what the user has entered in a form or requested in the URL.
Read More…

10 Regular Expressions For Efficient Web Design

In programming, regular expressions are a very useful tool designed to validate, search, and match text patterns. In this article, I have compiled more than 10 incredibly useful regular expressions, for any language, that will probably be very beneficial to you. Read More…

Magento For Designers: The Series

Magento is a stunningly powerful e-commerce platform. In celebration of ThemeForest’s new Magento category , this mini-series will you teach how to get started with the platform, getting to know the terminologies, setting up a store and all related aspects of it, and finally how to customize it to make it our very own. Read More…

The Intricacy of Simplicity: CSS3

Ever wondered how a particular effect was achieved in a web design, and, after zooming in several clicks, you found that the author added several subtle shadows, borders, gradients, etc? In the past, this was achieved simply by slicing out an image, and setting it as a background of some element. Luckily, with CSS3, we can be afforded much more flexibility. Now, while the code for such a simple effect might be a bit tedious, it’s well worth it, and that’s what we’ll review in today’s written and video quick tip! Read More…

WordPress hack: Get popular posts by comments count

In blogging, it is useful to be able to display your most popular posts. There’s WordPress plugins to do that, but you don’t need it: This code will display your most popular posts, accordoing to the comments count, without requiring you to use a plugin. Read More…

Graphic Design

Adagio for Design Tutorial

In this Photoshop tutorial I’ll be showing you a really easy technique that can be used to enhance any kind of subject with amazing light effects. The main Photoshop tools we will be using will be selection tools, gradients and brushes to achieve the result below. Read More…

Adding Depth To Your Design Elements

Yes, I did just link to a post that I wrote myself How about we take a look at how to give your elements that touch of magic that so many other professionals seem to have. The reason for this post is because I’ve noticed over the past few weeks that sometimes designers and developers try to give there creations something a little bit different, but ultimately fail. Read More…

How to Create Bamboo in Adobe Photoshop

In this tutorial you will learn how to draw semi-realistic bamboo in Adobe Photoshop—perfect for textures and backgrounds. How to Create Bamboo in Adobe Photoshop

Design a Retro Styled Poster

Learn how to combine patterns, textures and typography to create a retro styled poster. You will also learn how to manipulate shapes and images, in addition to integrating blending options and layer masking. Read More…

Top 7 Design Tips For Ecommerce Sites

When it comes to ecommerce, design is everything. If you have any intention on making profit, you’re going to need a site that is designed so as to be appealing and comforting to the user. You could be selling the best products on the market for extremely reasonable prices, but the fact is, a poorly designed site is going to damage your sales immensely. Here are seven tips to help move your ecommerce website design in the right direction. read More…

How to Drastically Improve Your Designs

Design is everywhere. We see it in on billboards as we drive down the street. When we go to a restaurant and look at the menus, we see it. When we sit down on our couch and watch television, it’s visible on the commercials, advertisements, and even the movies and TV shows. Read More…

Final Words

So I hope you enjoyed my little round-up. I didn’t make it too long in case nobody liked it, but if you did then please do say in the comments below and make sure to link to a tutorial or article that you really liked so far this year. If you do, then I’ll make sure to try and include in the next round-up I do.

Step 1: Getting Started

Setting Up The Layers

So lets get on with the tutorial. First thing to do is open up PS, (yes that’s short for Photoshop), and make a new image, sized at: 590×200. Then create a new group named Dark Button. This is obviously where the dark button is going to be placed. A new layer is now needed called BG. You can now delete the original Background layer that photoshop adds to every new file. Then fill in the BG layer, (which should be inside of the Dark Button group), with #1b1b1b.

Another new layer is now needed. First create the layer ‘Button’; this is where the actual button will be designed…But wait!…How will we position it? Well that’s where the helpful guides come in. Grab a guide from the top and place it 50px from the top. Another one 50px from the left then just continue with the right and bottom.

Step 2: The Button Design

So for the button we need to grab the Rounded Rectangle tool, (right click the Rectangle Tool. Keyboard shortcut is U). Make a selection inside of the guides like so:

The Layer Styles

Now the fun part happens. Making it look good. So for this we’ll use layer styles. The colours are: #474747 to #262626. Below I’ve included an image that demonstrates how to apply each layer style.

Step 3: The Text

It’s time to give our button some text. I’ve decided to go for a nice light colour with some drop shadow and a nice gradient. The first thing to do is to make a new text layer by either choosing it in the Text Tool or by hitting the shortcut key T. Now make a selection inside of the guides, it should be roughly 65px-70px in height. Here are the font options I chose:

• Typeface: Myriad Pro
• Font-Weight: Bold
• Size: 50px
• Anti-Aliasing: Crisp
• Align: Center
• Colour: #f1f1f1 (Colour doesn’t really matter since we’ll be using a Gradient Overlay)

Next thing to do to our text is to add the gradient and outer-glow. Just double click the layer and the layer styles box will appear. The colours used for the gradient are: #c6c6c6 to #ffffff. Here are the options I chose:

Step 4: The HTML & CSS3 Awesomeness

Let’s get this show on the road, shall we? So the first thing to do is set up our files, we need an index.html and that’s pretty much it. Next it’s the code.

The HTML

Let me explain. The HTML is all pretty basic, to be perfectly honest I wanted the HTML to take a back seat in this tutorial so all I’ve done is the following few lines:

<div id="container">
     <div class="button">
          <a href="#">CSS3 Button Baby!</a>
     </div><!--end .button-->
</div><!--end #container-->

The container is just used to center our fancy CSS3 button on the page; Then we have the actual button. If you’re going to use a selection of buttons, (like we have in our new design), then I would suggest using an Unordered List but for this a simple div will do. Inside of the Div we have an Anchor link to hold our text, this will also be the actual element to be selected in the CSS.

The CSS…With Added CSS3

This is where the tutorial actually gets interesting. Below I’ve included all the code used for the button. It may seem like quite a chunk to get through but if you keep reading then It’ll be planted firmly in your brain in no time at all!

Non-Commented Version

.button a {
    font-size:50px;
    font-weight:bold;
    color:#f1f1f1;
    text-decoration:none;
    padding:20px;
    display:inline-block;
    text-shadow:0px 0px 5px #000000;
    -moz-box-shadow:0px 0px 15px #000000;
    -webkit-box-shadow:0px 0px 15px #000000;
    border:1px solid #525252;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    background:#262626;
    background:-moz-linear-gradient(#474747 60%, #262626);
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#474747), to(#262626))
}

.button a:hover {
     border:1px solid #5e5e5e;
     background:-moz-linear-gradient(#525252 60%, #303030);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#525252), to(#303030));
 }
 .button a:active {
     background:-moz-linear-gradient(#262626, #474747 60%);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#474747));
 }

Commented Version

.button a {
    /*Font Values*/
    font-size:50px;
    font-weight:bold;
    color:#f1f1f1;
    text-decoration:none; 

    /*Fundamental Properties*/
    padding:20px;
    display:inline-block; 

    /*Shadow*/
    text-shadow:0px 0px 5px #000000;
    -moz-box-shadow:0px 0px 15px #000000;
    -webkit-box-shadow:0px 0px 15px #000000; 

    /*Border And Background Properties*/
    border:1px solid #525252;
   -moz-border-radius:20px;
   -webkit-border-radius:20px;
    background:#262626;
    background:-moz-linear-gradient(#474747 60%, #262626);
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#474747), to(#262626));
}

.button a:hover {
     border:1px solid #5e5e5e;
     background:-moz-linear-gradient(#525252 60%, #303030);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#525252), to(#303030));
 }

 .button a:active {
     background:-moz-linear-gradient(#262626, #474747 60%);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#474747));
 }

Explaining The Code

Since this is an advanced tutorial aimed at people with some experience handling CSS then I won’t go through explaining the #body and #container styling.

To start off with we have set a font-size for our button, this is very important because it will make our button more liquid than fixed, especially helpful if you want it to be flexible. Following the other basic font values, I’ve given it some padding to help give the text some breathing room.

We’ve also added a display:inline; property to the button. This now allows it to to be manipulated, as you would with a Div.

The Shadowy Effects

Now comes the CSS3! The first thing I’ve done is add some shadow, to the actual text and the outside of the button. We have to use the special code for Mozilla Firefox, (-moz-) and Google Chrome/Safari, (by using the WebKit property, -webkit-). If you’re wondering what the values of 0px 0px 15px #000000 mean then let me explain:

• 1.) 0px = The placement of shadow of the X Axis. That means left and right. It can also accept negative, aswell as positive values, (-3px, 3px).
• 2.) 0px = The placement of the shadow on the Y Axis. That means up and down. It can also accept negative, aswell as positive values, (-3px, 3px).
• 3.) 5px/15px = This is referring to the amount of blur on the shadow.
• 4.)As you may have guessed, the #000000 is the colour of the shadow. If you didn’t know that, then please stop reading this tutorial and go and learn what #HEX values are.

The Border Radius

You may notice that the border properties are targeted the same here as with the shadow effects, by using -moz- and -webkit-. Even though I’ve only given one parameter here, (20px, which means round the corners by 20px on each side), you can also have a custom radius on each corner. Try pasting 20px 10px 5px 30px in the place of the single 20px value. You’ll notice that each corner now has a different radius. The first 20px value is for the top left, the second the top right, the third the bottom right and the fourth the bottom left. Just like using the margin property.

The Awesome CSS3 Gradients!

We finally get to the part you’ve been waiting for, the gradients! First we have the Firefox specific gradient. Here’s a run down of everything included for FF.

• 1.) -moz-linear-gradient – This can be used to specify whether our gradient is going to be either Linear or Radial. In this case I’ve used linear.
  • 1.) We start with the lighter colour at the top of the gradient. We make it so it covers a little more of the button, (60%), than the darker colour used.
• 2.) -webkit-gradient – This one can look a little tricky at first, but no worries, in just a few seconds it”ll be embedded into your brain. Also this property does not disclose the type of gradient in the value name.
  • 1.) Firstly we declare that it will be a linear gradient.
  • 2.) We then declare where it will be placed. In this example we have 0 0 (from the left and from the top – top left).
  • 3.) Next is giving the size of the gradient. Here we have 0 100% which means start at the very top, (0), and go to the very bottom, (100% of the element).
  • 4.) After that I think the rest is pretty self-explanitory. Just which colours we’re using.

Final Thoughts

In conclusion I would like to say a big thank you to those people who have stuck around through-out this tutorial. If you have any thoughts, be sure to share them below.

The Podcast

You can also listen to the MP3 version of the podcast here aswell as being able to subscribe to the podcast via RSS Feed!

What We Talk About

There are some big changes coming up this summer, so make sure to subscribe and stay tuned for more podcasts and news today.

So what do we have in store for you? There´s actually a few more things to look for that we don´t cover in this weeks, Creative Radio Episode. But we´ll make sure to announce it very soon. So if you´re eager to know what we have in mind for now, make sure to listen and subscribe to our podcast as well as our general feed.

• Re-Design
• Re-Launch
• New Podcasts
• More Feed Options
• New Sitemanager

And belive it or not, there´s actually even more than what we listed above. So you see, you really need to make sure to subscribe.

Resources We Featured in the Podcast

• SonicCube – Powerful Experience
• AudioJungle
• Scott Wills – AudioJungle Sitemanager
• ReviewMyDesign
• Simon North – Simnor Computing
• WooThemes – Premium WordPress Templates
• Drew Douglass – How To Create An ‘Easy Gallery’ jQuery Plugin

Want To Feature Our Podcast?

If you liked our podcast so much you really want to feature it on your site? Then use the image below for the feature and give it a link back to the correct episode or our podcast feed.

The Search Area

Please Note: This tutorial is almost a carry on from an earlier tutorial I did titled Enhance Your Designs With Simple Techniques.

I’ve found that the best way to learn is to actually get your hands dirty and dig straight in. So here we have our first example, a simple search box with a search icon. The first version to the is a pretty bare-bones example of a basic search box. It’s functionality is obvious to the user.

As you can see in the second version to the right, I’ve given this nice, simple search box more depth and visual appeal by adding the following:

• Very light inner-shadow along the left and top sides of the input field.
• Given the button/icon a nice gradient.
• Added some text. Typography can affect design in more ways than you may realize.

The Navigation

Ahhh the nav, it’s an element that can really make or break a design. There’s definitely a set of certain challenges when giving any project navigation because almost every site has there’s designed differently. Below I’ve again designed a basic element and then transformed it into something more appealing.

OK then, so in the above example there haven’t really been that many changes made; however what I’ve done is try and illustrate the difference between a good piece of design and an out-dated piece of design. The first example is nice enough, it’s not terribly ugly, as I’m sure you know some navs can be and it does what it is suppose to do. The problem is that the design is out-dated by a few years, an obvious point here is the underline and the non-current links.

The second example gives a more up-to-date affect because of two reasons. The first is the way the links are setup, it’s obvious which is the current page link. The second is the single highlight going around the inside of the darker border.

I know from experience that this could have been designed a million different ways but for the sake of this tutorial I wanted to keep it simple with as little changing of the basic design as possible.

The Footer

Now we’re onto the last part of this tutorial, the footer. For this section I’ve designed a nice simple footer, a thick border at the top to give it some detail and just three nicely aligned columns.

Click Image For A Larger Version

In the second version I’ve given some real depth to the footer so that it really catches your eye. The first thing that’s changed is the thick border at the top, as you can see I’ve been able to add detail by first making it look indented. This is a really simple effect that can give your design something fresh. Just make it darker than the actual footer. Then add a border to it that’s a little bit lighter than the lightest background colour. Then to give it even more detail I gave it a very fine gradient. Here are all the details:

• The top border has been refined.
• The hover effect of the links has also been given the same refinement.
• An underlining separator has been placed underneath the headers.

I used the font ‘Blue Highway’ not only for the headers but also for the links. I decided on this since we now have the use of services such as Cufon and developers have also started to use Font-Face a lot more now.

If you want to then you can download the Blue Highway font here. So if you’ve got any good short techniques that you’d like to share in the comments below don’t be afraid to tell us.

WPBundle appears to be the new project from the amazingly talented designer Liam McKay. He is, (as I understand it), the owner of Function. A small design and development company which makes custom WordPress themes.

If you haven’t yet checked it out, WPBundle is a brand new WordPress Themes bundle. Here is a little info directly from the site:

My first impression was WOW! Very excited about this, I’m also eager to see the sorts of designs Liam has ready for us. You can actually read more about the project over on his blog, I’m especially happy now I’ve found out what the following images from Liam’s Dribbble account are all about:

WPBundle – Info Video

Also be sure to tweet the post so that everyone gets the chance to hear about it. From one designer to another, great job and good idea to Liam and the rest of his team!