How To Create a Detailed Briefcase Icon in Photoshop


Follow this step by step guide to create a detailed briefcase icon in Photoshop. We’ll build the rough outline with basic shapes, then add depth and definition with various Photoshop layer styles such as Inner Glow and Stroke. To really bring the icon to life we’ll use real photographic textures to give a tactile leather feel to the icon.

Briefcase icon

The icon we’ll be building has that crisp digital appearance popular in icons on the web. The sharp lines really help define what the icon actually depicts, which is important when it’s used at small scales in a web design or web app. What really brings the icon to life is the subtle gradients and textures. These additions don’t stand out when viewing the icon at a whole, but without them the design would appear flat and lifeless. Let’s go through the step by step process of how it’s made in Photoshop. Seguir leyendo “How To Create a Detailed Briefcase Icon in Photoshop”

If Design Blogs Were Vehicles, What Would They Be?


View the article

If design blogs were to be transformed into motor vehicles (Transformers style!), what would they be? Now’s your chance to find out! Here’s a roundup of your favourite design blogs along their mechanical counterparts, each comparison has been scientifically matched on general theme, style, persona and character – Which one do you think is the best fit?

Smashing Magazine

Smashing Magazine is the juggernaut of the design blog world with huge traffic and subscriber statistics. As a multi-author blog Smashing Magazine pumps out high quality articles throughout the week and touches on various design related topics. Seguir leyendo “If Design Blogs Were Vehicles, What Would They Be?”

Line25 Sites of the Week for September 3rd 2010


View the article

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from Awesome JS, Draftboard, Doodle Pad, Mooze Design and Theme Trust.

Awesome JS

View the website Seguir leyendo “Line25 Sites of the Week for September 3rd 2010”

Line25 Sites of the Week for August 27th 2010


Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from Little Black Dress Society, Themify, Hull Digital, CandyBar and Carbon Ads.

View the website

Themify

View the website Seguir leyendo “Line25 Sites of the Week for August 27th 2010”

Beautiful Mac App Web Design Showcase & Trends


View the article

Website designs for premium Mac application websites are amongst the most beautiful web designs on the net. Here’s an inspirational showcase of some of the best, along with a look at some common trends and features.

Kaleidocope

View the website

Cockpit

View the website

Transmit

View the website Seguir leyendo “Beautiful Mac App Web Design Showcase & Trends”

How To Add a Custom Facebook Like Box to Your Site


View the article

Facebook pages are becoming more and more popular with brands, bands, organisations and celebrities who want to boost their social exposure on the web. Facebook’s social plugins and widgets are a great way to link your Facebook page with your website. Let’s look at how to not only insert the popular Like Box code onto your website, but also how to customize it to fit with your design, and make sure the code correctly validates.

View the Facebook Like Box demo

View the Facebook Like Box demo Seguir leyendo “How To Add a Custom Facebook Like Box to Your Site”

Line25 Sites of the Week for August 13th 2010


View the article

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from BundleHunt, BBQWar, Tileables, Armitage Online and Forever Heavy.

BundleHunt

View the website

BBQWar

View the website Seguir leyendo “Line25 Sites of the Week for August 13th 2010”

Building a Stylish Blog Design Layout in WordPress


View the article

Over the last couple of weeks we’ve been through the process of creating a stylish blog design in Photoshop, coding it up into a static HTML and CSS concept, and now we’ll put the whole thing together as a fully working WordPress theme. Follow this step by step walkthrough of the various WordPress theme files, and see how the HTML is split up and injected with PHP tags to provide the complete blogging functionality.

View the coding tutorial

At the end of the last tutorial, we were left with a working HTML and CSS concept of the blog homepage. Since then, a generic inner page has been styled up, to give the CSS for page elements such as comments, author description etc that appear when viewing a complete blog post. Seguir leyendo “Building a Stylish Blog Design Layout in WordPress”

Creating a Stylish Blog Design Layout in Photoshop


View the article

One of my current projects is a redesign of my personal blog over at ChrisSpooner.com. The aim is to move away from the current fun and cartoony theme and give it a more sophisticated, minimal and stylish design. I thought this would be the perfect opportunity to create a blog design walkthrough. This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.

View full size concept

View full size concept

The design I’m working on for ChrisSpooner.com features a slightly retro beige and brown colour scheme with a burgundy red as a highlighting link colour. Subtle textures and patterns like the background noise, chiseled lines and inset text effects all help add the visual details to the design. Being a site that holds a fair few YouTube videos, the content area needs to be wide enough to accommodate at least 640px, which leaves just enough space for a thin sidebar to contain category links and a brief overview of the websites I run.
I wanted the footer to be a place where visitors could find a wealth of additional info about me, so it includes a list of latest posts from my design blogs, insights into the music I’m listening to and latest shots from Flickr. Seguir leyendo “Creating a Stylish Blog Design Layout in Photoshop”