BlogmyQuery – BMQ

Today we are glad to release a yet another freebie: a Facebook Fan Page GUI PSD, designed by Hike and released for Smashing Magazine and its readers. The PSD will speed up the process of creating previews, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. All layers are vectorized, allowing you to scale up the GUI without loss of quality. The mock-up is 100% pixel-accurate, it has 4 viewing modes (default wall, wireframe wall, default tab, wireframe tab), all layers labeled and grouped. Smart guides are included. The PSD is compatible with Adobe Photoshop CS3+.

With every update Facebook performs to its fan page design, Hike reproduces it 24 hours later and updates its download link with the latest version. The main idea behind this PSD was to provide all designers and agencies with a useful tool that will improvs their daily workflow when it comes to preparing Facebook-related previews for their clients or internal presentations. As usual, the goodie is absolutely free to use in private and commercial projects.

Download the PSD for free!

You can use the freebie for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the file as you wish.

• large preview (.png, 0,09 Mb)
• download the .zip-package (.zip, 2.1 Mb)
• official download from the designer’s site (.zip, 2.1 Mb, will be regularly updated)
• release post on designer’s website

Features

• 100% pixel-accurate
• 4 viewing modes (default wall, wireframe wall, default tab, wireframe tab)
• Fully vectorized
• Limitless scaling
• All layers labeled
• Smartly grouped
• Completely editable
• Includes smart guides
• CS3+ compatible
• Always up to date

Previews

Tab wireframe (large preview)

Default wall (large preview)

Wall wireframe (large preview)

Layer Pallett (large preview)

Behind the Design

As always, here are some insights from the designer:

“From our own experience we knew how time consuming it could be to have to recreate or prepare a decent Facebook template that allows you to implement custom tab graphics, profile banners etc. It’s a real pain and waste of time and it only takes away your focus from the actual artwork. At Hike we once decided to invest multiple days into creating a complete Photoshop template that would allow us to create design previews on the fly.

What sets this PSD apart from similar files is the fact that with every update Facebook performs to its fan page design, Hike reproduces it 24 hours later and updates its download link with the latest version. As listed under Features above, we actually reproduced each and every pixel of Facebook’s fan page UI. The PSD includes 4 viewing modes for the most common design tasks and it’s fully vectorized. Thanks to smart grouping and clever labeling, everybody will easily get along in our PSD. If you have suggestions for improving the file or feel like something is still missing, feel free to post it on our Fan Page wall and we will respond. Follow @HikeSocialApps for updates!”

Thank you, guys! We appreciate your work and your good intentions.

© Smashing Editorial for Smashing Magazine, 2011.

When we started Smashing Magazine, we didn’t expect anything. We didn’t have a grand master plan for a successful online magazine for designers and developers. We created something that we found useful and that we thought others would find useful, too. We did not lose focus, we relied on instinct more than once, we stayed patient, and we pulled the occasional night shift. That was 2006.

And then you came along.

You have passed the word along, left comments, dropped us emails. You let us know that we matter. You let us know that we are doing something meaningful. And you let us know that our humble work deserved your attention. And we listened — carefully.

Five years have passed, and the magazine has changed. That small, obscure blog of list posts and round-ups has evolved into a professional publication with a publishing policy, editorial structures and a house style guide. The Smashing family no longer has only two members, but rather a dedicated team of experienced authors, research assistants, expert advisors, editors and proofreaders.

We all do our best to bring you the trusted advice, techniques, tutorials, resources and opinions that Smashing Magazine is known for nowadays and that the Web design community around the world has come to rely on.

Smashing Magazine is a quality-obsessed, passionate team, but it is also you: you and every single reader who has been reading Smashing Magazine for all these years. Thank you for being with us; thank you for your support, criticism and encouragement over all these years. We could not exist without you.

A Smashing Magazine Anniversary Treat

Today, Smashing Magazine turns five. It’s hard to believe that the years have passed so quickly. Many things have changed, but when we look back, we realize how wonderful and sometimes even intoxicating the journey has been so far. And you — who made us what we are today — deserve a special thank-you.

To honor the occasion, we have a humble gift for you: the free “Best of Smashing Magazine” Anniversary eBook.

The eBook is available in PDF, ePUB and Mobipocket formats. This eBook is our gift to you for your support, criticism and encouragement over all these years. We’d like it to be your very own memory box of your last five years with Smashing Magazine — something perhaps to bring back memories a couple of years from now. We’d like you to have a part of Smashing Magazine with you when you are on the go.

What’s in the eBook?

The eBook contains the best articles that have been published on Smashing Magazine in the last five years — and by “best,â€� we mean the most useful, most interesting or most inspiring. The articles have been carefully edited, proofread and updated for your convenience and reading pleasure on your eBook reader.

It discusses usability issues and the principles of effective Web design. It covers the guidelines for beautiful and effective typography, and it spotlights methods of responsive Web design. In addition, you’ll learn how to master professional Photoshop techniques, explore storytelling in your designs, and focus on three key areas to polish your content strategy. Never thought that harmony between designers and developers was possible? Dig in to see how the two camps can collaborate productively and learn from each other.

Table of Contents

• “Thirty Usability Issues to Be Aware Ofâ€�  —  Vitaly Friedman
• “Ten Principles of Effective Web Designâ€�  —  Vitaly Friedman
• “Clever JPEG Optimization Techniquesâ€�  —  Sergey Chikuyonok
• “Typographic Design Patterns and Best Practicesâ€�  —  Smashing Editorial team
• “Ten Useful Usability Findings and Guidelinesâ€�  —  Dmitry Fadeyev
• “Setting Up Photoshop for Web and iPhone Developmentâ€�  —  Marc Edwards
• “The Ails of Typographic Anti-Aliasingâ€�  —  Tom Giannattasio
• “Mastering Photoshop: Noise, Textures and Gradientsâ€�  —  Marc Edwards
• “Better User Experience With Storytellingâ€�  —  Francisco Inchauste
• “The Beauty of Typography, Writing Systems and Calligraphyâ€�  —  Jessica Bordeau
• “Web Designers, Don’t Do It Aloneâ€�  —  Paul Boag
• “Making Your Mark on the Web Is Easier Than You Thinkâ€�  —  Christian Heilmann
• “Responsive Web Design: What It Is and How to Use Itâ€�  —  Kayla Knight
• “I Want to Be a Web Designer When I Grow Upâ€�  —  Michael Aleo
• “Persuasion Triggers in Web Designâ€�  —  David Travis
• “What Font Should I Use?â€�  —  Dan Mayer
• “The Design Matrix: A Powerful Tool for Guiding Client Inputâ€�  —  Bridget Fahrland
• “Why User Experience Cannot Be Designedâ€�  —  Helge Fredheim
• “Dear Web Design Community, Where Have You Gone?â€�  —  Vitaly Friedman
• “Make Your Content Make a Differenceâ€�  —  Colleen Jones
• “Two Cats in a Sack: Designer-Developer Discordâ€�  —  Cassie McDaniel
• “Print Loves Webâ€�  —  Mark Cossey

Previews of the Smashing Anniversary eBook

Take a look at the following preview to get a taste of the eBook’s contents.

Use the practical and inspiring articles in the Smashing Anniversary eBook to refuel, and get those brilliant ideas rolling again!

Download It Now For Free

Again, you can download the eBook in for free in PDF, ePUB and Mobipocket formats.

• Download your free copy from Apple’s iTunes Store
• Download your free copy from Smashing Magazine’s server (.zip, 55 Mb).

Please note that due to differing publishing policies around the world, downloading via iTunes is currently available only to customers with an iTunes account in the US, Canada, Australia, Great Britain, France and Germany. We are working hard to make future Smashing Magazine publications available to all of our readers around the world.

Cheers, dear friends. And here is to the next five years!

(al) (vf) (il)

© Smashing Editorial for Smashing Magazine, 2011.

When it comes to responsive design, it’s not just about fluid images or adaptive layouts. It’s also about the responsive methodology behind the entire design process. In responsive design, we are creating responsive experiences, meaning that all design components need to be able to adapt to the environment in which they are displayed and have to interact with. This is why we create tables, navigation menus, videos and other design elements responsive as well (see Responsive Web Design Techniques and Design Strategies for more details). It just makes sense to consider each and every design component — including the image slider.

In this post, we are glad to release a responsive jQuery slider plugin Flexslider which has been created, developed and maintained by Tyler Smith and released for Smashing Magazine and its readers. As usual, the plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. In three simple steps, you can have a fully responsive slider for your responsive design.

Download the Plugin for Free!

The plugin is released under the MIT license. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the plugin as you wish.

• Live Demo
• Large Preview (.jpg, 0,17 Mb)
• Download the .zip-package (zip, 0.6 Mb)
• Release on the Developer’s Site

Features

• Simple, semantic markup.
• Supported in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+.
• iOS and Android devices are supported as well.
• Slide and Fade animations.
• Highly customizable slider options.
• Directional, keyboard, and touch swipe navigation.
• Lightweight (5 Kb minified).
• You can use all HTML elements in the slides.
• Free to use under the MIT license.

You can find the installation guide and documentation on the developer’s release site.

Behind the Design

As always, here are some insights from the designer:

“My motivation behind creating this plugin was the difficulty I had building my first responsive slider. There were no resources to pull from and I spent hours banging my head against the wall working through the logic. My goal was to make it easier for others doing the same thing. I wanted to build a plugin that served the newest of beginners, while providing seasoned developers a tool they could use with confidence.

FlexSlider serves beginners by being virtually plug and play, needing only the FlexSlider files and some images to get started. To seasoned developers, FlexSlider should be seen as a tool that gets them rolling quickly. It doesn’t add unnecessary markup and gives complete freedom to use any HTML element within each slide.

The most exciting thing about FlexSlider at this point, in my mind, is the slide animation. It was a challenge to construct, but the resulting responsive behavior is very cool. When you mix the slide animation with touch gestures, it creates a great experience across iOS and Android devices.

Problems I encountered when building the plugin was ensuring that the plugin would work across all different types of responsive builds, browsers, and devices. To accomplish that, I made sure the plugin did exactly what it needed too, and nothing more. For example, many sliders use fixed dimensions and absolute positioning to create animation effects, but this is not possible with fully fluid responsive design. Avoiding this practice, I limited my use of the $(window).resize() function and let the slider dimensions remain organic to the content within. The downside to this is that the fade animations can’t overlap, which is indeed a nice effect.

The most important lessons I’ve learned are that overusing (window).resize() function to control element sizing will make you cringe, which is why you won’t find much at all in FlexSlider. Keep your responsive design as light as you can. Remember the audiences you are extending to reach are on far less capable devices, especially with JavaScript.

If you are having a problem installing FlexSlider, post a comment in the Community section and I will respond. Follow @mbmufffin for FlexSlider updates!”

Thank you, Tyler. We sincerely appreciate your work and your good intentions.

© Smashing Editorial for Smashing Magazine, 2011.

Today, we are glad to release a set of 20 high quality E-commerce Icons in 64×64px, available in .png-format. This set was designed by Web Icons Set with the purpose to be used in e-commerce websites and has been exclusively released for Smashing Magazine and its readers. The set includes icons such as Empty Basket, Full Basket, Credit Cards, Delivery, Secure Payment, Checklist, Gifts, Shop Open, Shop Closed, Contact, Wallet and others.

Download the Icon Set for Free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. Please link to this article if you want to spread the word.

• Preview
• Download the Set (.zip, 0.3 Mb)

Behind the Design

As always, here are some insights from the designer:

Web Icon Set aims to provide professional and quality Web icons to Web designers and developers. Every icon is 100% hand-crafted with a strong focus on consistency and usability. We’ve tried to create a set of professionally designed e-commerce icons that can help designers build their e-commerce websites.

Thank you very much, guys! We really appreciate the effort!

© Smashing Editorial for Smashing Magazine, 2011.

Let’s sit back for a while and admire the truly satisfying geometrical wonders of the universe. Out with squares, circles and other absolutely boring shapes, and in with cleverly crafted and charming bits and pieces! Lucky for you, we have had the extreme pleasure of stumbling through the interwebs, dodging stray triangles and dodecahedrons, on a quest to find the best shapes just for you at no cost whatsoever! That’s right, we’ve decided to bring to you 20 of the best FREE Photoshop shape set downloads!

Banners and Scrolls

The Banners and Scrolls shape set from Obsidian Dawn adds an exceptional charm to your work. Take your designs back to the days of parchment, ink and quills as you indulge in this PhotoShop shape set!
Banners and Scrolls

Birds

Let your imagination fly with these magnificent custom shapes from lukeroberts! Soar through chirpy designs like never before as you implement these bird shapes into your work.
Birds

Urban Designs

Add some extra jazz to your work with this fantastic urban pack from Obsidian Dawn! From barbed wire to skyscrapers and all sorts of urban designs in between, this shape set is perfect for designing concert posters or simply adding a little something to a logo design.
Urban Designs

Butterfly Shapes

Transform your work into a thing of elegance and beauty with these many butterfly variations. Flutter on over to Dezignus to download this elegant set!
Butterfly Shapes

Natural Leaves/Bushes

These natural leaves and bushes made by the Vector Lady are absolutely perfect for any green designs you happen to be creating. Can you imagine just how fantastic logos would look with plantlife growing from them!
Natural Leaves/Bushes

People Silhouette

What better way to add personality to your work than to use these people shapes! This pack contains a large variety of many different people doing various things. These would look lovely in logos, posters, business cards or anything else your creative mind can conjure up!
People Silhouette

Vector Wings

Glide through projects gracefully with this diverse wing shape set! Add any type of wing to your creations and watch the magnificence soar! This set is a must have for anyone wishing to implement elegance and beauty into their work. Vector Wings

Elegant Floral

Feeling a tad bit fancy? Well these are just for you then! The elegant floral shape set is a pleasure to use and works extremely well with designing logo’s, posters or business cards. They would also do well on fancy invitations. Elegant Floral

Valentines

You will love simply LOVE these various heart shapes. Who needs cupid when when you have PhotoShop? These would be great for creating cute stationary designs, or a letter for your love. There are many styles to choose from, so this time you’re allowed to be picky! This pack comes with brushes too! Valentines

Smooth Arrows

This arrow set by Magdalena M Proszows really points to success. The many cartoonish styled arrows would most definitely add a little something to a logo or poster. They would even fit in with graphic novel design, if thats up your alley. Dont be fooled by these arrows though, the rest of the article is actually below! Smooth Arrows

Grunge Splashes

Splash this shape set on your designs for a grungy look. The set contains a very impressive 173 various splash shapes and so chances are you’ll like at least one of them! These shapes could look effective on any sort of graphic design so don’t hesitate to download the set and get splashing! Grunge Splashes

Floral Shapes

Add a twirl to your work with this fantastic and vast set of PhotoShop Shapes. From small sprouts to extravagant floral shapes, this set has it all!! With 258 spirals, curves, and arcs, this set is almost a necessity! Floral Shapes

DS Decor Shapes

For some fantastic fairytale shapes, check out this set by dmitryseliv! The floral intricacy blended with old parchment really makes this pack something special! If ever you need a magical title bearer, you know where to go. Bear in mind that it is only for Personal Use though! DS Decor Shapes

Frame and Border Shapes

Fancy a portrait of yourself in a nifty frame? Or perhaps you want to frame a splendid picture you drew? Look no further! Download Shelby Kate Schmitz‘ Free Frame and Border Shapes and get to it. These shapes would look great on invitations, logos and whatever else you can think of.
Frame and Border Shapes

Chandelier Shapes

Throw yourself a grand ball with this delightfully detailed shape set by hotpinkscorpion. Be a bit fancy and use these shapes to decorate posh invitations or whatever else you find is lacking the rich factor.
Chandelier Shapes

Kiddy Stuffs

Go back to your childhood, where anything you could find was your canvvas and crayons were your tools of wacky art! This pack by hikaridrops is full of cute and nostalgic shapes perfect for designed aimed for children. Stationary, birthday invites or a nostalgic gateway, this pack is waiting for you to download right away!
Kiddy Stuffs

Floral Banner Shapes

Add a little charm and a lot of extravagance to your designs with these impressive shapes by eurochronix! You won’t regret downloading this set. It comes with 5 equally impressive floral banners ready to add text to.
Floral Banner Shapes

Animal Shapes

Having a zoo of shapes at your fingertips will prove to be useful to you again and again. UnidentifyStudios did a fantastic job in capturing sufficient detail whilst still retaining a nice simple style.
Animal Shapes

Gear Shapes

Watch the cogs of graphic design come together with these gear shapes! These are a must have for your shape arsenal. And the best part? There’s 90 of them!!
Gear Shapes

850 Assorted Shapes

And to finish off, here is a massive assortment of various shapes from naderbellal. The set contains over 850 shapes so there’ no doubt something in there that will tickle your fancy.
850 Assorted shapes

The post 20 Awesome FREE PhotoShop Shape Set Downloads!! appeared first on Design Reviver.