Design Community NewsSubmit News →

Welcome to the Community News section of Speckyboy Design Magazine.
Here you will find our reader submitted web design/development and graphic design related news, resources and inspirational showcases.
You could also grab the RSS Feed for the news.

20 Free Sans-Serif Fonts Licensed for @Font-Face

Submitted on 5th of March 2012Categories → Browser Tools, General Web Design

Remember back when @font-face and Google Fonts were first introduced? We only had the choice of a handful of custom fonts we could use. Nowadays it’s quite the opposite, we’re spoilt for choice with hundreds of cool fonts licensed for free @font-face embedding. This post rounds up a collection of 20 stylish sans-serif fonts, all of which can be downloaded and used freely to spice up your website design’s typography.

View the article →

How to Create Upload Icon in Photoshop

Submitted on 3rd of March 2012Categories → Browser Tools, Photoshop Resources

Learn How To Create Upload Icon In Photoshop! Today we will learn how to Create Upload Icon in Photoshop. We will firstly create the background

View the article →

Do You Design In The Browser?

Submitted on 3rd of March 2012Categories → Browser Tools, General Web Design

With the move toward responsive websites, designs are being pushed to the prototype stage sooner in the process. We’re designing more in the browser. Or are we? Do Photoshop comps still have a place in the design process? Depends who you ask.

View the article →

How Pinterest Changed Web Design

Submitted on 3rd of March 2012Categories → Browser Tools, Community News

In a basic conception Pinterest is an online pin board. Pinterest is a typical pin-board styled social image sharing website. Site look like mini web page with features like “re-pin”, “like” and “comment” button at the bottom

View the article →

15 Detailed Responsive Web Design Tutorials

Submitted on 3rd of March 2012Categories → Browser Tools, Just a damn good read!

In this post I would like to share 15 useful responsive design tutorials to help you get started with responsive designing including fluid grids, fluid images and media queries.

View the article →

Pinterest Icon Set (PSD)

Submitted on 3rd of March 2012Categories → Browser Tools, Icon Resources

The Pinterest Icon Set contains just the one icon but comes in 6 alternate we also include the icons in JPG, PNG & PSD format.

The 6 icon sizes included are 256×256, 128×128, 64×64, 48×48, 32×32 and 16x16px.

View the article →

Box – CSS Framework

Submitted on 1st of March 2012Categories → Browser Tools, CSS Resource

Minimal CSS Framework based on box-sizing: border-box and display:inline-block layout building techniques for making fast and easy solutions. The gutter size can be personalized very easy only with one change into the CSS.

View the article →

How to use FlexSlider with HTML5 Boilerplate, Initializr

Submitted on 1st of March 2012Categories → Browser Tools, General Web Design

The Initializr template is meant to be a simple one aimed at easing the kickoff to the HTML5 Boilerplate, hence it is free of fancy stuff like image carousels or drop down menus. But I needed a rotating image banner for my home page, so I did some research and found FlexSlider. I tried fitting FlexSlider into the Initializr template and after 30 minutes or so, it was working well!

View the demo and if you love it, download the source!

View the article →

CSS Clearing Floats Snippet

Submitted on 29th of February 2012Categories → Browser Tools, CSS Resource

Sometimes with float-based layouts you get to points where you need to clear the floats to get the desired layout you need.

An element that has the clear property set will not move up next to the floated element, but will move itself down past the floats.

Here is a small CSS snippet to clear floats on your page.

View the article →

Developing a Responsive Website: Secondary Page Part 2

Submitted on 29th of February 2012Categories → Browser Tools, Uncategorized

We’re going to wrap up our tutorial on how to develop a responsive website this week by making our secondary page, well, responsive. We created our large layout for the page in our last tutorial, but now we want to make it fluid so that it will display nicely across various platforms, ranging from tablets and mobile devices to PC’s.

View the article →

Line Chart (PSD)

Submitted on 28th of February 2012Categories → Browser Tools, General Web Design

PSD freebie: Line Chart PSD

All the elements is the psd are layered and fully editable.

You can use the Line Chart (PSD) any way you like. Be it commercially or personally, but design deck does have some restrictions on how the zip file is used.

View the article →

Design a Grungy Western Movie Poster in Photoshop

Submitted on 28th of February 2012Categories → Browser Tools, Photoshop Resources

Follow this step by step tutorial to create a grungy western poster design, see the whole design process from start to finish as the various stock resources are manipulated to complete the composition.

View the article →

Jengo – A FREE Portfolio & Business HTML Template

Submitted on 28th of February 2012Categories → Browser Tools, General Web Design

Jengo is a business & portfolio HTML template for freelancers and small business owners. It comes with five unique page templates including a custom home page design, a portfolio template, and a fully functional contact form. It also includes a standard page template (i.e. a main content area with a sidebar) along with an articles page template.

View the article →

Is It Time To Change Our CSS Practices?

Submitted on 28th of February 2012Categories → Browser Tools, CSS Resource

Many css “best practices” were developed years ago when css was newer and designers were learning how to work with it. Given all that’s happened and changed since, isn’t it time we start rethinking some of these practices and developing a new set of “best practices?”

View the article →

Creating Different CSS3 Box Shadows Effects

Submitted on 28th of February 2012Categories → Browser Tools, CSS Resource

In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS.

View the article →