Weekly Design News – Resources, Tutorials and Freebies (N.125)

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

New Features in Photoshop CS6 (Infographic)

New Features in Photoshop CS6 (Infographic)

More Noticeable HTML Bookmarks

Responsive Content Navigator with CSS3

Getting Started With Node.js and Geddy

Starting a Design Project

How to Create Infinite Scroll Pagination

Maintaining CSS Style States using "Infinite" Transition Delays

Build a 360 view image slider with JavaScript

Free Legal Documents, Contracts and Agreements

AppView: Free iPhone App Template

CSS3 UI Kit

Impressionist UI Free

Stumblr – Free Tumblr Style WP Theme

Simple Tape – Free Minimalistic HTML site template

Stitched Vector Speech Bubbles

Silverfake Free Font

This Week on CodeVisually

Here are our favorite webdev resources from the past week:

Previous Weekly Design News…

Design News Roundup Archives →

Speckyboy Design Magazine

CSS3-Only Tutorials and Techniques for Your Next Design

Today we are showcasing some of best tutorials and techniques that will help you create beautiful and functional designs by using only CSS, focusing primarily on the properties of CSS3. All with absolutely NO JAVASCRIPT. For the most part, the techniques we have highlighted below, can be used for everyday use, others probably not. Please do check browser compatibility when implementing any of these techniques.

CSS3 Image Galleries, Slideshows and Image Effects

Sliding Image Panels with CSS3

In this tutorial you’ll be shown how to create some neat sliding image panels. The idea is to use background images for the panels and animate them when clicking on a label.

Sliding Image Panels with CSS3 →

Fullscreen Background Image Slideshow with CSS3

You’ll create a CSS-only fullscreen background image slideshow with this tutorial. You’ll learn how to create different image transitions and also make an animated title appear.

Fullscreen Background Image Slideshow with CSS3 →

CSS3 Lightbox

With this tut you will be shown how to create a lightbox effect using only CSS. You will have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, you will learn how to make the larger image appear in a sleek and fancy way.

CSS3 Lightbox →

CSS3 Image Styles

In this tutorial you will be shown how much you can do with background-image. You’ll be shown how to use box-shadow, border-radius and transition to create various image styles.

CSS3 Image Styles →

CSS3 Menus, Navigation & Buttons

The Apple.com Menu Created Using Only CSS3

The Apple.com Menu Created Using Only CSS3 →

Making a CSS3 Animated Menu

In this short tutorial, you will be using the power of CSS3 effects and transitions, to build an animated menu, using some neat features such as the :target pseudo selector and :after elements.

Making a CSS3 Animated Menu →

CSS3 Menu Navigation Effect

CSS3 Menu Navigation Effect →

Animated Buttons with CSS3

The idea of this tutorial is to create some animated link elements with different styles, hover effects and active states.

Animated Buttons with CSS3 →

Creative CSS3 Animation Menus

With a simple composition of elements, an icon, a main title and a secondary title, you will learn how to create an animated menu on hover using only CSS transitions and animations.

Creative CSS3 Animation Menus →

Circle Navigation Effect with CSS3

In this tutorial you will be shown how to create a beautiful hover effect for an image-based navigation using CSS3.

Circle Navigation Effect with CSS3 →

CSS3 Dropdown Menu

Here you will be shown how to create a simple drop-down menu and insert CSS3 transitions to make it more interactive.

CSS3 Dropdown Menu →

CSS3 Navigation with Transitions

CSS3 Navigation with Transitions →

CSS3 Animations

Animated Web Banners with CSS3

In this tutorial you will learn how to create some amazing animated web banners with CSS3.

Animated web Banners with CSS3 →

CSS3 Loading Animation Loop 2 Set

CSS3 Loading Animation Loop 2 Set →

CSS3 Tooltips & Alerts

CSS3 Tooltip with Animation NO jQuery

In this tutorial you will learn how to create a simple animated tooltip with CSS3. The effect created is amazing, and the most important thing is that you will not be using any Javascript.

CSS3 Tooltip with Animation NO jQuery →

CSS3 Effects

Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes”.

Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 →

Experiments with Background-Clip: Text

With the CSS property “background-clip: text”, you can add a background image to a text element. With this tutorial you will experiment with it and create some fun examples by adding CSS3 transitions.

Experiments with Background-Clip: Text →

Filter Functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, you can toggle states of other elements by checking a checkbox or a radio button. This tutorial will explore those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Filter Functionality with CSS3 →

Original Hover Effects with CSS3

The power of CSS3 is enormous and in this tutorial you will be shown how to exploit it in a very creative way, by creating some thumbnail hover effects with CSS3 transitions.

Original Hover Effects with CSS3 →

CSS3 Sliders and Charts

CSS3 Progress Bars

In this tutorial you will learn how to create the awesome CSS3 Progress Bars you can see above.

CSS3 Progress Bars →

CSS3 Layouts & Pages

Splash and Coming Soon Page Effects with CSS3

In this tutorial you will be shown how to go wild using CSS3 animations and create an amazing splash and coming soon page.

Splash and Coming Soon Page Effects with CSS3 →

Slopy Elements with CSS3

In this tutorial you will see some simple examples and ways to create slopy, skewed elements with CSS only.

Slopy Elements with CSS3 →

Page Transitions with CSS3

In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Here you will be shown how you can have your own, but instead, using CSS Transitions and the :target property to do all the magic.

Page Transitions with CSS3 →

Creating a PHP and CSS3 Powered About Page

In this tutorial, you will be creating a simple about page that is powered by PHP, HTML5 and CSS3.

Creating a PHP and CSS3 Powered About Page →

Miscellaneous

How to Create a Beautiful Icon with CSS3

In this tutorial you’ll create a document icon with pure CSS3.

How to Create a Beautiful Icon with CSS3 →

How To Create Depth And Nice 3D Ribbons Only Using CSS3

In this tutorial you will learn how to create beautiful 3D ribbons only using CSS3.

How To Create Depth And Nice 3D Ribbons Only Using CSS3 →

Bokeh with CSS3 Gradients

In this tutorial you will learn how to create a beautiful Bokeh effect using CSS3 Gradients.

Bokeh with CSS3 Gradients →

You might also like…

CSS3 Compatibility Tools, Resources and References for Internet Explorer →
CSS Form Templates, Tools & Services →
25 Free Fonts Perfect for @fontface → & @fontface Icons →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
Pure CSS Alternatives to Javascript →
40 Essential CSS Templates, Resources and Downloads →
Or, you could browse our extensive CSS Archives →

Speckyboy Design Magazine

Weekly Design News – Resources, Tutorials and Freebies (N.119)

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

ZeroBundle – A bundle of freebies for designers

Terminology, Syntax, & Introduction – A Beginners Guide to HTML & CSS

Learn HTML & CSS – A book that teaches you in a nicer way

Git For Designers (Part 1)

CSS3 & jQuery Folder Tabs

CSS Image Reflection With Webkit

Star Ratings With Very Little CSS

Build Awesome Apps with CSS3 Animations

Minimal Single Page Portfolio With HTML5/CSS3

Photoshop Brushes by Blakravell

Twitter Bootstrap Assets for Adobe Fireworks

Infographic Vector Kit

Hand Drawn UI Kit

White iPhone 4S Mockup (326ppi)

Bispo – Desktop Free Font

Architekt – Free WordPress Theme

Danko – Free Charity WordPress Theme

This Week on CodeVisually

We recently launched CodeVisually, our site that focuses solely on resources and tools for web developers and offers a simple solution to painlessly find the resource needed and fast.

Here are our favorite webdev resources from the past week:

Previous Weekly Design News…

Design News Roundup Archives →

Speckyboy Design Magazine

Simple Cane Tutorials

The PCAGOE has a couple articles about caning including this one written by Jackie of the Pleasant Pheasant. This is more of a philosophy of caning (as well as a few of the simple canes) series that leads up to the PCAGOE’s monthly challenge vote. This month, not surprisingly, the topic is canes. Have a look…

Craft Gossip

Weekly Design News – Resources, Tutorials and Freebies (N.107)

Advertise here with BSA

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy

If you would like to receive our daily updates you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

CSS3 Tilt-Shift Text Experiment – Where are the trees

CSS Shaders: Cinematic Effects for the Web

20 htaccess Hacks

How To Create Custom Post Meta Boxes In WordPress

Practical CSS3 Tables with Rounded Corners

Are You Using CSS3 Appropriately?

The making of FF Tundra

OhMyGrid Tumblr Theme

The Ultimate Wireframe UI Kit

PSD Web UI Elements Kit

20 Free 16x16px Ecommerce Icons

500+ Free Web Icons

IC Mini Social Icon Set

Metro RTE (Rich Text Editor) Icons

Free VDS Font

This Week on CodeVisually

We recently launched CodeVisually, our site that focuses solely on resources and tools for web developers and offers a simple solution to painlessly find the resource needed and fast.

Here is our favorite webdev resources from the past week:

Previous Weekly Design News…

Design News Roundup Archives →

Advertise here with BSA

Speckyboy Design Magazine

Weekly Design News – Resources, Tutorials and Freebies (N.105)

Advertise here with BSA

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy

If you would like to receive our daily updates you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

How to Create a CSS3 3D Text Plugin for jQuery

Responsive Image Gallery with Thumbnail Carousel

jmFullWall- FullZoom Portfolio with jQuery

CSS3 Image Styles

How to Create a Beautiful Icon with CSS3

How To Create A Clean And Stylish CSS3 Menu

Slick login form with HTML5 & CSS3

Free Illustrator Wireframe Elements

Mini Player PSD

Payment Method Icons Set Vol 1

Free 12px Glyphs (PSD)

Typeface Adec2.0 (free)

InDesign Shortcuts Cheatsheets

This Week on CodeVisually

We recently launched CodeVisually, our site that focuses solely on resources and tools for web developers and offers a simple solution to painlessly find the resource needed and fast.

Here is our favorite webdev resources from the past week:

Previous Weekly Design News…

Design News Roundup Archives →

Advertise here with BSA

Speckyboy Design Magazine

Weekly Design News – Resources, Tutorials and Freebies (N.104)

Advertise here with BSA

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy

If you would like to receive our daily updates you can follow us on Twitter, on Facebook or by subscribing to our RSS feed.

Our New Site: CodeVisually – Web Developer Tools & Resources

Huge Collection of Code Snippets: HTAccess, PHP, WordPress, jQuery, HTML, CSS

Recycling and animating icons with CSS

Mobile HTML5 – compatibility tables for mobile devices

Cube – Open-source system for visualizing time series data

Kendo UI – A HTML5, CSS3, and JS framework for modern HTML UI

iOS Frameworks – Curated catalog of iOS frameworks and classes for the pragmatic iOS developer

How To Create a Simple WordPress Blog Theme

iOS Boilerplate – A base template for iOS apps

Color Picker Pro – An easy to use color detection tool for developers and designers

Soundsgood – Free Video Blogging WordPress Theme

DefaultIcon v.2 (653 Icons)

Facebook Fan Page GUI PSD

Free PSD Apple Glyphs

Anatomy of the Perfect Banner Ad (Infographic)

Previous Weekly Design News…

Design News Roundup Archives →

Advertise here with BSA

Speckyboy Design Magazine

Weekly Design News – Resources, Tutorials and Freebies (N.102)

Advertise here with BSA

This is our weekly column were we share our favorites design related articles, resources and resources all from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook, on Stumbleupon or by subscribing to our RSS feed.

The Evolution of the Web

LESS Elements – A Collection of Useful LESS Mixins

Cabin CSS Framework – Lean, Modular & Responsive

BluCSS – Your best buddy when it comes to creating responsive layouts

NegativeGrid – Fluid CSS Grid

bluePen editor – Online Visual CSS Editor

YouTube”/>

Making the Transition to HTML5

accounting.js – format money / currency in JavaScript

Adaptive Images in HTML

The Most Popular Fonts Used by Designers

Make a Realistic Motorola Xoom Smart Tablet in Photoshop

How To Create a Retro Style Typographic Poster Design

Launch Effect – A WordPress Theme for Viral Launches

jQuery Notification Menu

iMagineLab Coming Soon HTML/CSS/PSD Template

Swatch – Free WordPress Theme

Previous Weekly Design News…

Design News Roundup Archives →

Advertise here with BSA

Speckyboy Design Magazine

30 Photoshop Tutorials for Graphic Designers

Advertise here with BSA

Photoshop is near-ubiquitous with graphics design. Even if you don’t consider yourself a graphic designer, having some Photoshop skills can really come in handy with your poster design/photo/text/etc. work. And tutorials take a lot out of the learning curve, since you can just follow the steps and get up to speed fairly quickly with a certain technique or style. This article shares with you the 30 Photoshop Tutorials for Graphic Designers.

Specifically, it covers photo manipulations, photo effects, painting, text effects, and poster design Photoshop tutorials. Think of it as a followup to our previous article that showcased 30 Fresh Photoshop Tutorials for Graphic Designers.

Without further ado, here are the 30 Photoshop tutorials for graphic designers:

Photo Manipulations Photoshop Tutorials

Create an Amazing Abstract Heart Surreal Photoshop Tutorial

Create a surreal abstract artwork. Starting with just a single photograph, you’ll learn how to apply adjustments to bring it into an easily workable color scheme, as well as then using the pen tool to create surreal shapes. Then, you’ll learn how to finish it off with a few other effects and another stock photo, for a surreal artwork.

Photo Manipulator’s Guide to Blending

This tutorial covers basic blending techniques which are essential for every photo manipulation. Without proper blending your images won’t look believable. There are several ways how to blend images together.

Create a Futuristic Photo Illustration with Photoshop

Take an image of a model and turn it into a futuristic composition that uses various Photoshop techniques. The tutorial shows how to do some work with masks and implementing color and light effects to achieve the end result.

Mix Hand Drawing Sketch with Photo

Create a unique photo effect from a sketch and photo. You’ll need some skills in drawing as to create this effect you will need to draw a sketch. This tutorial will show you how to use you sketch and combine it with a real picture.

Create Beauty Woman Effect in Photoshop

Add light effects to your photo and create a cool photo effect from your usual image. This tutorial offers tips on how to work with lights in Photoshop, mainly focusing on working with layers, blending modes, brushes, as well as using some textures and stock images.

Photo Manipulate a Falling Angel

Photo manipulate a photo to make the model look like a falling angel.

Photo Effects Photoshop Tutorials

Photoshop Skin Retouching

Retouch skin in a photo using Photoshop. First, the impurities of the skin are removed, then the color differences of the skin are balanced, and last the skin is smoothed while taking into account natural pores.

Professional Beauty Retouch

Enhance a beauty portrait to give the model a flawless appearance in three simple steps.

How to Create a Vibrant Image Using Photoshop

Add more energy and dynamism to a photo. The effects can be extended and used on many types of photos to create a feeling of motion and vibrancy to a static image.

Enhance Photos While Still Keeping Skin Pores

Get your photos enhanced using Photoshop while still keeping skin pores. This tutorial shows you how to make the model look good while still looking real.

Fantastic Disintegration Effect inspired by Watchmen in Photoshop

Create the Watchmen-inspired disintegration effect using brushes and the blur filter in Photoshop.

Painting Photoshop Tutorials

Photoshop CS5 Digital Painting Tutorial

Convert a photo into a great-looking digital painting using Photoshop.

How to Create Bamboo in Adobe Photoshop

Draw a semi-realistic bamboo in Photoshop. Perfect for textures and backgrounds.

Paint a Fun Alien Diner Scene in Photoshop

Digitally paint a fun alien diner scene using Photoshop.

Use a Tablet to Create Stunning Comic Book Fan Art Illustrations

Draw a comic book illustration using Photoshop. Specifically, this tutorial uses a fan art illustration of the Knights of the Zodiac manga character Capricorn Shura (Masami Kurumada). This tutorial reviews some tips and tricks when working with a digital tablet and Photoshop.

Making of the Imaginary Paint Dancers

Create a digital painting of imaginary paint dancers using Photoshop.

Create a Fantasy Girlbird Illustration in Photoshop

Create a fantasy bird girl illustration using digital painting and photo manipulation techniques.

Text Effects Photoshop Tutorials

Create an Extruded Glossy 3D Text Effect in Photoshop

Combine the two popular styles of 3D effects and shiny glossy graphics to create an extruded 3D glossy text effect in Photoshop.

Create a Spectacular Grass Text Effect in Photoshop

Create a spectacular grass text effect in Photoshop. Perfect for a cover or poster of a nature-focused video, book, or something else entirely.

Create a Smashing Composition Text

Use simple and easy techniques to create a smashing composition text in Photoshop.

Master 3D Type Effects

Create text with 3D characters that weave in and out of each other using Photoshop’s masking tools and layers.

Create a Dark Grunge 3D Text Scene in Photoshop

Create some dark and grungy 3D text using Photoshop. The tutorial shows how to use consistent lighting, layer styles to create shadows for our type, Photoshop filters, and how to add a dark textured background that seems to fade out as it approaches the edge of the canvas – a popular design technique.

Create Super Glossy 3D Typography in Illustrator and Photoshop

Create a super-glossy 3D text using Photoshop and Illustrator.

Poster Design Photoshop Tutorials

Create a Remarkable Poster with Decorative Elements

Create various decorative elements including geometric shapes, halftones, ribbons, 3D stars, and 3D text in Illustrator and then merge, compose, enhance, and texturize them in Photoshop. The tutorial shows how to use both of these powerful tools for their strengths and take advantage of both vector and raster graphics.

Create Blood and Milk Typography Poster in Photoshop

Create a edgy yet sleek typography poster. This tutorial uses some paint splashes, custom fonts, a few stocks from deviantART, and basic Photoshop techniques.

Create Abstract Poster Effects

Create an abstract poster with strong but simple shapes and bold colors using Photoshop and Illustrator.

How to Create a Dynamic Nature Poster in Photoshop

Create a dynamic nature poster using stock images, vectors, and brushes in Photoshop.

How to Create a Retro Aesthetic Poster in Photoshop

Blend a stock image with shapes and a pattern, then add lightness and color to get a nice retro poster – all in Photoshop.

Retro Poster Tutorial Using Photoshop

Create a dynamic retro poster in Photoshop that’s inspired by various night club posters.

Photoshop Tutorials for Graphic Designers: What’s Missing?

Over to you: what’s missing from this list of recent Photoshop tutorials for graphic designers? Feel free to share your favorites in the comments section below.

You might also like…

A Round-Up of 50 Fresh Photoshop Tutorials and Techniques →
The Best 40 Photoshop Text Effects from 2009 →
49 Most Creative Photoshop Tutorials of 2009 →
50 Imaginative Fantasy Art Tutorials for Photoshop →
37 Cool Movie Poster and Text Effects Photoshop Tutorials →
29 Cool and Creative Text Effects Photoshop Tutorials →
28 Incredible Photoshop Image Manipulation Techniques and Tutorials →
33 Photoshop Tutorials for Designing Amazing Posters and Ads →
42 Amazing Photoshop and Illustrator Icon Design Tutorials →

Advertise here with BSA

Speckyboy Design Magazine

Weekly Design News – Resources, Tutorials and Freebies (N.95)

Advertise here with BSA

This is our weekly column were we share our favorites design related articles, resources and resources all from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook, on Stumbleupon or by subscribing to our RSS feed.

The Best FREE Design Bundle Ever (WP Themes and Freebies)

Buzz – Javascript HTML5 Audio Library

CSS3 Button UI Framework

The Labs – A Collection of CSS & jQuery Experiments

Building the 3D Web

BoxJS – A Simple Package Management Service

BoxCss – A Simple Package Management Service

HTML5 Video Voting

Grid – A Minimal CSS Grid Utility

Make Your HTML Email 5½ Times More Mobile Friendly

Creating a PHP and CSS3 Powered About Page

The Google+ Cheat Sheet

Git Cheat Sheet

Volume Control Completely Rendered in CSS

Visually – Explore the Best Data Visualizations on the Web

Weston Round Slab Free Font

Scruffy Uppercase Only Free Font

Blue Elegant Ui PSD

Vectorian Free Pack (85 Vector Ornaments & 30 Border Brushes)

Social Fries – Free Social Icons

Previous Weekly Design News…

Design News Roundup Archives →

Advertise here with BSA

Speckyboy Design Magazine