We’re well into 2011, and many designers and developers around the world are planning their travels for the year, including the possibility of attending any Web design or development conferences. To help you out with your plans for the upcoming months, we’ve put together a list of conferences and events that you might want to consider.
This particular post covers events taking place in about a six month timeframe that ends in late August and early September. Later this year, we’ll post another article like this at the end of August that will cover events covering a six-month period beginning in September.
As always, there is no way for us to be able to include every possible event here, but we’ll be glad to update the list if you provide a comment to an upcoming event that you feel would be of interest to Smashing Magazine’s readers. This may also be the chance to eventually meet each other this year.
Drupalcon Chicago “In March of 2011, thousands of Drupal users, developers, designers, evaluators and businesspeople will descend on Chicago’s Sheraton Hotel and Towers for sessions, talks, code sprints, and more at DrupalCon Chicago. Whether you’re already using Drupal or considering it for your company or organization, you won’t want to miss out on this one-of-a-kind event.”
When: March 7 – 10, 2011 Where: Chicago, IL, USA at the Sheraton Chicago Hotel
FITC Amsterdam “FITC Amsterdam will feature over 50 presentations and panels covering the Creative, Technical, and Business aspects of Flash and digital media. The conference offers two full days and nights of events, plus one day of optional pre-festival workshops and over 750 attendees anticipated from around the globe.”
When: March 8 – 9, 2011 Where: Amsterdam, the Netherlands at De Meervaart
SXSW Interactive “SXSW® Interactive features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders, the incredible new SXSW Trade Show and an unbeatable lineup of special programs showcasing the best new digital works, video games and innovative ideas the international community has to offer.”
When: March 11 – 15, 2011 Where: Austin, TX, USA
The Big M “The Big M is a brand new independent mobile focused event aimed at those who want to learn from and connect with the very best people in the industry. Join us in beautiful Bath for two days of sessions and workshops on mobile development, mobile design and mobile business. Hear from leading industry figures, be inspired and connect.”
When: March 20 – 22, 2011 Where: Bath, UK
SES Conference & Expo “SES Conference & Expo is the leading global event series that educates delegates in search and social marketing, putting a special focus on tactics and best practices. SES Events provide instruction from the industry’s top experts, including representatives from the Search Engines themselves.”
When: Various dates starting March 21, 2011 Where: New York, Shanghai, Toronto, San Francisco, Chicago
DevConnections “Join us and explore the latest trends and get the most up to date information and training available. All while networking with your colleagues and building a valuable network of peers in one of the most entertaining cities in the world.”
When: March 27 – 30, 2011 Where: Orlando, FL, USA at the Grande Lakes JW Marriott Resort Hotel
An Event Apart Seattle “An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: March 28 – 30, 2011 Where: Seattle, WA, USA at the Bell Harbor Conference Center
Web 2.0 Expo “Web 2.0 Expo, co-produced by O’Reilly Media, Inc. and UBM TechWeb, showcases the latest Web 2.0 business models, development paradigms, products, and design strategies for the builders of the next-generation Web.”
When: March 28 – 31, 2011 Where: San Francisco, CA, USA at Moscone West
Photoshop World Conference & Expo “Designed to help you boost your training and experience, the Photoshop World graphic design and photography convention offers three days of pulse-pounding training with classes from renowned experts in the field and a once-in-a-lifetime experience guaranteed to enhance your skill set and help your work soar to new heights!”
When: March 30 – April 1, 2011 Where: Orlando, FL, USA at the Orange County Convention Center
IA Summit “The IA Summit is the premier destination for those who practice, research and are interested in the structural design of shared information environments. Some call themselves information architects (and many don’t) but all share a common desire to help people live better lives through meaningful experiences with information.”
When: March 30 – April 3, 2011 Where: Denver, CO, USA at the Colorado Convention Center
Think Vitamin Online Conferences “Membership includes valuable conferences. You can attend live, watch the video later or view videos of past online conferences. Ask the speakers your questions and chat with the other attendees.”
When: Numerous dates starting March 2011 Where: Online
The Usability Week 2011 Conference “Many conferences offer cavernous exhibit halls, brief seminars on second-hand discoveries, and a sense of anonymity that can be truly alienating. Usability Week takes a different approach. In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead full-day tutorials.”
When: Various dates between February 28 – May 13, 2011 Where: Hong Kong, Melbourne, London, Washington, and Minneapolis
April 2011 Events
FFK11 “The conference offers about 30 sessions about developing and designing applications and Web sites. 10 full day workshops with just 19 attendees in each workshop are available as well”.
When: April 5 – 8, 2011 Where: MediaPark, Cologne, Germany
Scottish Ruby Conference “The Scottish Ruby Conference rebrands the successful Scotland on Rails conference.”
When: April 7 – 9, 2011 Where: Edinburgh, Scotland at the Royal College of Physicians
Voices That Matter: iPhone Developers Conference “Reinforce your skills and discover emerging trends this April at the Voices That Matter: iPhone Developers Conference, where we will connect you with some of the biggest names in the industry, as they teach you how to create effective user interfaces, utilizing exciting design and the latest technology, for the iPhone, iPad, or both.”
When: April 9 – 10, 2011 Where: Seattle, WA, USA at the Bell Harbor International Conference Center
CodeConf “Coding is about more than code. Whether it’s building a solid community, writing good documentation, or hacking space exploration, CodeConf is about improving the software ecosystem through best practices. Come with an open mind and leave a better programmer.”
When: April 9 – 10, 2011 Where: San Francisco, CA, USA at the Hyatt Regency
360|Flex Conferences “360|Flex is the first and still the best Adobe Flex developer conference in the world. We’re not a publishing company pushing books, or a media company selling subscriptions. We’re a conference company, focused on community. Our goal is to bring the best and brightest in the developer community together for 4 days of incredible sessions, awesome parties, good times, and learning.”
When: April 10 – 13, 2011 Where: Denver, CO, USA at the Marriot Denver South
Breaking Development Conference “Join us for two days of quality talks describing how to design, develop, and leverage the mobile web. Our speakers will walk you through mobile strategies appropriate for your company, design considerations for the mobile platform, development techniques, and how to use web technologies to build cross platform applications.”
When: April 11 – 12, 2011 Where: Dallas, TX, USA at the Gaylord Texan in Grapevine
O’Reilly MySQL Conference & Expo “The O’Reilly MySQL Conference & Expo is an interactive learning community—four days packed with connections to MySQL developers and open source experts who know their subject inside and out. You’ll gain unique insights from speakers, vendors, project leaders, and other participants who are using MySQL to successfully run the world’s most demanding applications, saving millions of dollars over proprietary software and hardware solutions.”
When: April 11 – 14, 2011 Where: Santa Clara, CA, USA at the The Hyatt Regency
MIX11 “MIX is a gathering of developers, designers, UX experts and business professionals creating the most innovative and profitable consumer sites on the web. Sessions range from technical, code-based topics to expert advice on content strategy, usability and design. Explore the future of the standards-based web — join the conversation at MIX11.”
When: April 12 – 14, 2011 Where: Las Vegas, NV, USA at the Mandalay Bay Convention Center
UX London “UX London is a unique three-day event combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names. Whether you’re beginning your career, or a seasoned professional, UX London is your chance to add core skills, absorb strategic thinking, and learn advanced techniques from pioneers in the field.”
When: April 13 – 15, 2011 Where: London, UK at the Cumberland Hotel
WebDU “webDU is the premier Antipodean Web Technology Conference, taking place 14-15 April 2011 in Sydney, Australia. This is the ninth year the conference will be held. The conference offers the opportunity to get hands-on technical training, gain new skills, hear breaking news from the Web Industry, network with peers and industry leaders, and ultimately become more successful developing and delivering web applications.”
When: April 14 – 15, 2011 Where: Sydney, Australia at the Four Points by Sheraton Sydney, Darling Harbour
Where 2.0 “The O’Reilly Where 2.0 Conference explores the intersection of location technologies and trends in software development, business strategies, and marketing. The source for all things location-aware, Where 2.0 brings together CTOs, marketers, developers, technologists, researchers, geographers, startups, business developers, and entrepreneurs.”
When: April 19 – 21, 2011 Where: Santa Clara, CA, USA at the Santa Clara Convention Center
The Next Web Conference “The Next Web brings together the best from Europe and the United States to look at overall Internet trends.”
When: April 27 – 29, 2011 Where: Amsterdam, the Netherlands
LessConf “LessConf is a two-day conference with just 225 attendees. Lunch is provided on site. You’ll get the meet the speakers. You’ll get inspired (again). Between speakers and during lunch there are tons of opportunities to meet others in our industry. At LessConf you will hear great speakers, meet amazing people, and develop relationships.”
When: April 29 – 30, 2011 Where: Atlanta, GA, USA at the Georgia Institute Of Technology
May 2011 Events
JSConf “JSConf is one of the best tech conferences out there and rightly so, because JavaScript or JS is one of the best languages out there. The core focus of this conference is to present the wonders of JavaScript that are often overlooked. The content of the conference caters to all types of JavaScript developers from client interface to server development to testing.”
When: May 2 – 3, 2011 Where: Portland, OR, USA at the Portland Art Museum
FITC Toronto 2011 “Now in its 10th year, FITC Toronto is one of the largest and longest running events of its kind in the world. With some of the most unique and engaging presenters from around the globe, FITC Toronto is a three day blitz of presentations, demonstrations, and panel discussions, sandwiched between our legendary FITC parties and abundant networking opportunities. Topped off with the FITC Award Show, it’s three days and nights that will leave you inspired, energized and awed.”
When: May 2 – 4, 2011 Where: Toronto, ON, Canada at the Guvernment
An Event Apart Boston “An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: May 2 – 4, 2011 Where: Boston, MA, USA at the Marriott Copley Place
CMS Expo “You’re invited to compare the best of the best in CMS and learn first-hand, from leading developers, designers and business minds of our time.”
When: May 2 – 4, 2011 Where: Chicago, Illinois, USA at the Hilton Orrington Hotel
WordCamp Developers “The conference will feature 2 tracks, one targeting WordPress UX topics and issues, and the other targeting strictly development issues. The day will also be host to a WordPress Un-Conference where participants are encouraged to pitch talks and join in discussion.”
When: May 5, 2011 Where: Vancouver, BC, Canada
Make Web Not War “At this conference, attendees will have the opportunity to learn about the latest technologies and techniques available to the ever-evolving web community. Here we will explore the power and flexibility of new web paradigms, mixed web environments, interoperable applications, and PHP on Windows and Azure. MWNW is about bridging the gap between different platforms, communities, and developers of all trades and backgrounds.”
When: May 6 – 7, 2011 Where: Vancouver, BC, Canada
J and Beyond “An International Joomla! Conference.”
When: May 6 – 8, 2011 Where: Kercrade, the Netherlands at the Rolduc Conference Centre
Google I/O Developer Conference “Google I/O brings together thousands of developers for two days of deep technical content, focused on building the next generation of web, mobile, and enterprise applications with Google and open web technologies such as Android, Google Chrome, Google APIs, Google Web Toolkit, App Engine, and more.”
When: May 10 – 11, 2011 Where: San Francisco, CA, USA at the Moscone Center
UX Lx: User Experience Lisbon “Three eventful days in Lisbon to learn from world renowned speakers and meet UX Professionals from around the world. Hone up your skills with 16 practical workshops, 26 thought provoking talks and enjoy the city with lots of networking activities.”
When: May 11 – 13, 2011 Where: Lisbon, Portugal at the FIL Meeting Centre
Mobilism “In two days we’ll explore the mobile world from a web-centric point of view. All of our speakers are deeply rooted in the web and have at one time or another decided to take their talent to mobile. They will teach you which web techniques work on mobile, which don’t, and which new ones you need in order to keep up with a rapidly changing web.”
When: May 12 – 13, 2011 Where: Amsterdam, the Netherlands, in Felix Meritis
Web Directions Unplugged “HTML5 is fast becoming the way to develop not just web apps, but native apps for platforms like Android, iOS and webOS. Join us for two groundbreaking days of practical development and design presented by leading experts in this exploding field.”
When: May 12 – 13, 2011 Where: Seattle, WA, USA at The Conference Center
Valio Con “Conference at the beach where it’s all about actual fun and not sitting in a hotel lobby the entire time.”
When: May 13 – 15, 2011 Where: San Diego, CA, USA
RailsConf “RailsConf, co-produced by Ruby Central, Inc. and O’Reilly Media, Inc., is the largest official conference dedicated to everything Ruby on Rails. Through keynotes, sessions, tutorials, events, and of course lots of hallway hacking, RailsConf is the meeting place for the Ruby on Rails community.”
When: May 16 – 19, 2011 Where: Baltimore, MD, USA
Future of Web Design “The Future of Web Design is coming back to London in 2011. Following on from the success of last year we will be bringing you a beautiful three full days of essential web learning.”
When: May 17-18, 2011 Where: London, UK at the The Brewery
TYPO Berlin “To shift is to pick up speed, to push the envelope, to change your perspective. All three are useful strategies for TYPO 2011, in order to bring visual communications in line with the latest developments in technology.”
When: May 19 – 21, 2011 Where: Berlin, Germany
InDesignSecretsLive Print and ePublishing Conference “Founded by world-renowned InDesign experts David Blatner and Anne-Marie Concepción, and dedicated to the proposition that InDesign professionals deserve a great learning experience, the Print and ePublishing Conference brings together over a dozen of the leading InDesign experts minds for three days of non-stop inspiration and education!”
When: May 23 – 25, 2011 Where: Alexandria, VA, USA at the Westin Alexandria
Gravity Free “GRAVITY FREE 2011 is a celebration of excellence in multidisciplinary design innovation. It stars a remarkable cast of world-class designers who are changing the way we see the world, from a diverse group of design disciplines”
When: May 24 – 26, 2011 Where: San Francisco, CA, USA at the
Web Directions @media “HTML5, CSS3, JavaScript, Mobile, Interaction Design, User Experience, and everything else that’s hot right now—it’s all on the carefully curated Web Directions @media program for 2011.”
When: May 24 – 27, 2011 Where: London, UK at Queen Elizabeth Hall
mesh conference “mesh is happening because the five founders (see below) believed that Toronto deserved to have a world-class conference where people with an enthusiasm for the Web could talk about how it is affecting the media, marketing, business and society as a whole.”
When: May 25 – 26, 2011 Where: Toronto, ON, Canada
WebVisions “WebVisions explores the future of design, content creation, user experience and business strategy to uncover the trends and agents of change that will shatter your assumptions about the Web. Be ready to network, share ideas and be inspired by an all-star lineup of speakers.”
When: May 25 – 27, 2011 Where: Portland, OR, USA at the Oregon Convention Center
International PHP Conference “The IPC is the global recognized event for PHP developers, webworkers, IT managers and everyone interested in web-technology. Again, the conference will focus on main topics for developers and core-technologies for decision makers. We will show how to scale your applications, explain the details of Continuous Integration or evaluate different approaches to NoSQL.”
When: May 29 – June 11 Where: Berlin, Germany at the Maritim proArte Hotel
webinale “Business, Design and Technology are the three basic pillars for success on the World Wide Web. This webinar has been prescribed for these three pillars of the first conference in 2007.”
When: May 30 – June 1, 2011 Where: Berlin, Germany at the Maritim proArte Hotel
June 2011 Events
Interlink Web Design Conference “nterlink Conference will be a small and carefully crafted 3-day web event that will appeal to all web professionals. This international web design conference welcomes website architects, usability specialists, project managers, marketing coordinators, web developers, website designers and any other online professional that wants to meet others in the industry and get inspired.”
When: June 2 – 4, 2011 Where: Vancouver, BC, Canada at The Capilano Performing Arts Theatre
Internet Week “Since 2008, Internet Week has taken place all over the city, thanks to our many partners hosting diverse events in different locations. The result is a critical mass of web-focused events that raises the profile of NYC’s industry as a whole, as well as the partners who participate.”
When: June 6 – 13, 2011 Where: New York City, NY, USA at Metropolitan Pavilion & The Altman Building, and around NYC
DIBI Conference “DIBI (pronounced “dibby”), is the annual Design It. Build It. Conference held at The Sage Gateshead in the North East of England. DIBI brings together both sides of the web coin for an unusual two-track web conference. World renowned speakers leading in their fields of work will talk about all things web.”
When: June 7 – 8, 2011 Where: Newcastle upon Tyne, UK
TYPO3 “We invite you to the North American TYPO3 conference held this year in San Francisco. This will be a great time to learn more about the powerful system we use everyday and to connect with other developers from both North America and Europe. Several internationally-known leaders of the TYPO3 community will be attending and presenting.”
When: June 9 – 11, 2011 Where: San Francisco, CA, USA at the Fort Mason Center
When: June 9 – 12, 2011 Where: New York City, NY, USA
UXcamp Europe “The main rule of the conference is: No spectators, just participants! This BarCamp-rule does not mean everybody has to do a Session, but everybody should come prepared to participate in an active manner.”
When: June 11 – 12, 2011 Where: Berlin, Germany at Erwin-Schrödinger-Zentrum of the Humboldt University
WordCamp Kansas City “WordCamps are community organized meetings for users of WordPress, the blogging platform and content management system that is sweeping the online world.”
When: June 11 – 12, 2011 Where: Kansas City, MO, USA at Johnson County Community College
An Event Apart Atlanta “An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: June 13 – 15, 2011 Where: Atlanta, GA, USA at the InterContinental Atlanta
140 Character Conference “The #140conf events provide a platform for the worldwide twitter community to: listen, connect, share and engage with each other, while collectively exploring the effects of the emerging real-time internet on business.”
When: June 15-16, 2011 Where: New York City, NY, USA
Nordic Ruby Conference “Come to Nordic Ruby 2011 and you will get a two day, single track Ruby conference, featuring the winning concept of 30 minute talks and 30 minute breaks. Very appreciated last year.”
When: June 16 – 18, 2011 Where: Gothenburg, Sweden
HOW Design Live “What do you call a mega-gathering of thousands of designers, freelancers, in-house managers and—new for 2011—packaging designers, plus a speaker roster packed with some of the brightest minds in the industry? HOW Design Live! Click the links below for more on each HOW Design Live event, then sign up for The BIG Ticket for exclusive access to all four conferences!”
When: June 22 – 27, 2011 Where: Chicago, IL, USA at the Hyatt Regency
Eyeo Festival “Three days of inspirational talks, demos, labs, and workshops and opportunities to connect with people whose extraordinary creations are pushing the envelope. The line up is amazing. 30 brilliant individuals, one amazing collection of talent and insight. Add yourself to the mix, and it just gets better.”
When: June 27 – 29, 2011 Where: Minneapolis, MN, USA at the McNamara Alumini Center
Future of Web Apps “The Future of Web Apps is coming to Las Vegas in 2011. The brand new event is a beautiful three full days of essential web learning.”
When: June 27 – 29, 2011 Where: Las Vegas, NV, USA at Meet exhibition venue
July 2011 Events
Designer/Developer Workflow Conference “What’s the big deal about workflow? Workflow is something we all do, day in and day out – although you may not even think about it. Do you work with multiple applications during the day? Do you work with team members, departments, clients, etc.? Improving those workflows is what D2W is all about.”
When: July 14 – 16, 2011 Where: Kansas City, MO, USA at the Crown Plaza Hotel
Front-End Design Conference “Front-End Conf is an event dedicated to content, presentation and behavior and to the awesome people in the design and development community.”
When: July 23, 2011 Where: St. Petersburg, FL, USA
The O’Reilly Open Source Convention “OSCON provides a central place to gain exposure to and evaluate the new projects, tools, services, platforms, languages, software and standards sweeping through the open source community and the broader technology industry.”
When: July 25-29, 2011 Where: Portland, OR, USA
re:build Conference “re:build is an intimate one-day event hosted in Downtown Indianapolis. We’re busy lining up some of our favorite speakers from all across the country. ”
When: July 29, 2011 Where: Indianapolis, IN, USA
UXCampLondon “A one day BarCamp in Richmond, London for anyone involved or interested in user experience design, interaction design, information architecture or usability.”
When: Summer, 2011 Where: London, UK
August 2011 Events
An Event Apart Minneapolis “An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”
When: August 8 – 10, 2011, 2011 Where: Minneapolis, MN, USA at the InterContinental Atlanta
WordCamp “WordCamp San Francisco is the official annual conference of the WordPress open source project. WordCamp SF 2010 brought together 700+ WordPress users and developers from around the world. In 2011 we’re expanding the programming for publishers, bloggers, and developers.”
When: August 12 – 14, 2011 Where: San Francisco, CA, USA at the Mission Bay Conference Center
Drupalcon London “DrupalCon is an international event that brings together the people who use, develop, design and support the Drupal platform. DrupalCon London 2011 will feature content from the most influential people and brightest minds within the Drupal community and beyond, in addition to countless opportunities for networking, code sprints, and more.”
When: August 21 – 26, 2011 Where: London, UK
UX Australia “The conference covers core user experience design topics – strategy, user-centred design, interaction design, information architecture, information design, service design, content & visual design. It’s not just digital though, and will also include presentations on the design of physical objects and environments.”
When: August 22 – 26, 2011 Where: Sydney, Australia at Four points by Sheraton
UX Week “Calling UX professionals (or aspiring professionals) of all levels! Join us at UX Week 2011, the premier user experience conference, for fun times , inspiring sessions on the main stage and roll-up-your-sleeves learning during two full days of workshops. It’s going to rock.”
When: August 23 – 26, 2011 Where: San Francisco, CA at The Mission Bay Conference Center at UCSF
Related Links
Conference Roundup A web app inspired by the original conference roundup here on Smashing Magazine.
ontwik Lectures, Screencasts And Conferences For Real Web Developers & Designers
What Event Will You Attend?
Have you attended one of these conferences before, or do you plan to attend any in 2011? Why do you enjoy attending these types of events? Which ones do you recommend and why? Please let us know in the comments.
One of the greatest things about having access to the Internet, is the educational opportunities that it affords the public. People in all professions have the ability to expand their knowledge base through the wealth of information being shared via the Internet, and the same holds true for those who are studying graphic design.
The Internet is positively bursting with tutorials and resources that can help one advance through the various stages of becoming a successful graphic designer. All the way, from a newbie to an experienced pro. Today, that is our purpose here. Gaining knowledge about graphic design so that we can advance our skills and blossom in our chosen fields.
Here is a collection of invaluable educational resources on graphic design that have been broken down into different categories depending on your preferred methods of consumption. Each one of us has their own approach of learning, either learning visually, auditory or through repetitious means. It was in that vein in which the resources were collected.
We have tutorials for your hands-on approach, podcasts for a more auditory take and an assortment of PDFs and articles to read through.
PDFs
The first category of resources that we have gathered are some assorted graphic design PDFs that will freely add to the educational foundation on which you are building. These community supplied supplements cover a range of graphic design elements and areas. So take a look through and begin downloading your new skill builders from the list below.
Design Your Imagination is a valuable graphic design ebook that should be in any beginners toolbox. Deconstruct website design and learn to hone your creative skills with this comprehensive guide to the web:
As with any good learning experience, you need someplace to start, and some choose to start at the beginning. With The History of Graphic Design you can do just that. This informative PDF offers a brief rundown of the history of graphic design:
When it comes to teaching design in a whole new way, The Design Funnel: A Manifesto for Meaningful Design brings a unique look at the world of design, and guides the reader to honing their design process. From beginner to established pro, this manifesto could offer you a fresh perspective on your approach:
Graphic Design Teaching and Learning is a helpful learning tool that takes on both the approach of teaching graphic design as well as learning it. Definitely an interesting and a worthwhile read:
PDFoo is a large collection of ebooks and PDFs all related to the field of graphic design. This resource provides a full download and will keep your nose to the grindstone for days:
Pictorial composition and the critical judgment of pictures is a wonderfully informative ebook that will allow anyone, no matter their level of expertise, to dive in and learn the basics about the composition and overall aesthetics of images:
Just Creative Design’s Type Classification eBook is a fantastic educational resource for those wish to learn more about the fine art of typographical design. Whether type is to be your specialty or not, this ebook is worth a read:
A theory of pure design; harmony, balance, rhythm is another learning library must add. This ebook explores in great depth the fundamentals of design theory. It is an artistic exploration into the very principles which lie at the foundation of illustration and painting as fine art:
An Introduction to Graphic Design is another useful ebook to be stocked in any graphic designer’s learning library. It offers a look at the basic fundamentals of graphic design to build a more solid foundation:
The Q&A E-book : Interviews With 25 Popular Bloggers pretty much tells you all you need to know about it in the title. Gain insight into the processes of the big names in the design field through this interview filled ebook and learn tricks that you can implement in your own:
The final PDF we have for you is the Graphic Design Wikibook. Think of the Wikibook as an open-content collection of textbooks, in this case specifically focused on the graphic design world. Do not let its position fool you, it is definitely worth a gander:
Articles
This second section of resources is an array of great articles all geared specifically towards graphic design education. Combing through the archives of some of the best known sites for assisting the growth of the community, we have pulled some must-read posts from their pasts just in case you missed them. Even if you do not read another post from any of the sites they have come from, these articles you should not let pass you by!
Earlier, we mentioned needing someplace to start, well Teach Yourself Graphic Design: A Self-Study Course Outline is one of those places. This article is absolutely filled with resources that will help you begin your self directed graphic design studies:
Want to know how to design? Learn The Basics. is a fantastic article from Just Creative Design that gets at the heart of design through the very basic elements of design. These are the fundamentals that you cannot get by without:
The Difference Between Art and Design is an extremely insightful discussion about the difference between art and design. This is a long running debate in the design community, and if you are going to be a designer, you should certainly familiarize yourself with the ongoing dialog:
Art vs Design is another pertinent and well thought out dissection of the art vs. design issue. Part of a solid foundation of learning comes from having a firm understanding of the field you are working in, through this evolving dialog, any designer can gain better footing in this design landscape:
Underneath all of the fundamentals of graphic design lies the theory that drives it. In the article 50 Totally Free Lessons in Graphic Design Theory the TutsPlus family definitely delivers with a bevy of knowledge building lessons in theory:
For more on theory, Noupe’s Graphic Design Theory: 50 Resources and Articles is another wonderful collection of graphic design theory based resources from our sister site. Help expand your design horizons even more with this educational article:
Learn the Basics: 25+ Sites And Resources To Learn Typography is a great article from 1st Web Designer that will serve to enhance your typographical knowledge base. Typography is an important element in design and understanding it is key in your design growth:
As far as useful articles on design go, David Airey put together a post on the communities favorite books about graphic design. What ’s your favourite graphic design book? opens up the comments to the community and the post evolves from there as the replies pour in:
In your quest for graphic design knowledge you can even turn to About.com whose course Introduction to the Elements of Design will give you a grasp of the basics of graphic design. Another article that serves as a good starting point:
Speaking of graphic design books, this site has a brilliant article on them. 30 Delightful Graphic Design Books spans the various arenas of graphic design to find some of the industries most useful books that will aid you in your thirst for knowledge:
The Design Cubicle offers this insightful article Tips to improve as a graphic designer for anyone on an educational journey through the field of graphic design. It is certainly worth a look for new and old designers alike:
Finally, when it comes to growing as a designer and learning to hone your skills, the blogosphere is an invaluable tool. The following article 100 Must Read Design Blogs helps you to maximize your surfing by pointing you in the direction of some great sources for educating yourself:
Podcasts
In this category, we move into the auditory section of our graphic design learning experience with some selected podcasts. These informative online broadcasts take on the task of offering an educational outlet for the masses over the virtual airwaves with a different approach than you can get most anywhere else. Especially if you are more inclined towards audio forms of learning the podcasts are for you, but they are truly for anyone interested in learning more about this field.
For Graphic Designers Only is a business minded graphic design focused broadcast which talks with industry experts to gain insight and give advice to the community. From building an individual freelance business to a more business firm oriented perspective this is a useful podcast:
Rookie Designer‘s The Podcast for the Not-So-Accomplished Designer is a look at the graphic design landscape with a beginner’s gaze. This is a great place to start in the podcast pool, whether you are a newb or in need of a little refresher course:
Design Guy takes a simpler approach to the design principles, taking the time to explain them in laid-back basic ways that should be easy to wrap your head around. Get your new design projects off the ground in no time with a little help from the Design Guy:
Art a GoGo Podcast is certainly useful to anyone looking to solidify the base of their design work through an exploration of art. The Art a GoGo podcast features discussions about art news and the overall world of art in an educational and entertaining way:
There have not been many logo specific resources, but Logo Design is an informative podcast that does help balance the scales a bit. Learning about logos through tips and in-depth discussions has a new face, the “Logo Design” podcast:
Boagworld Web Design Advice is a fantastic weekly podcast which runs the proverbial gamut of the graphic design field. Offering the community interviews, reviews, and news Boagworld is a podcast for all levels of the designer from the learning to the learned:
Art History Podcast is another podcast that can help you learn more about the art that has shaped and paved the way for the design world today through thoughtful analysis of timeless classics. Unfortunately the show is not still active but there are plenty of past episodes to learn from:>/p>
PixelPerfect is another great resource for the designer looking to increase their knowledge base in both Adobe Photoshop and Illustrator. Complete with demonstrations to teach you the tips and tricks of both graphic programs. If you use either one, then you should check out this podcast:
The Rissington Podcast is another insightful broadcast in which the hosts take questions from their listeners and answer them for the entire graphic design community. This would certainly be the problem solver’s podcast for designers old and new:
CreativeXpert Design Interviews is a completely interview-based podcast which features a brilliant array of expert guests to provide the insight that lays the foundation for this informative show. With some of the brightest minds in the field sharing their techniques and inspiration, this podcast can enrich anyone’s educational journey:
Another interesting podcast with a bit of a different twist on the show is FEED – A Magazine of Graphic Design. FEED is exactly what it sounds like from the tagline; it is a community based submission driven graphic arts magazine in the form of a podcast:
The final podcast that we are going to feature for growing as a designer is Design Tools Weekly. This is another weekly broadcast that discusses the topics that designers are looking to have delved into. This is another show that bends the learning curve in your favor:
Websites
We are going to wind things down with some useful websites to keep bookmarked and tracking regularly through their feeds for feeding your thirst for graphic design knowledge. We thought this would be a good place to finish, because most of the sites themselves are a growing resource that will continue to deliver new opportunities to learn. If you have not seen these sites, or not seen them lately, then we recommend that you stop by for a refresher on what they have to offer!
Design is History is a fantastic resource for all those treading the design waters looking to learn more. The site scans so many eras in graphic design, teaching you the history and principles that shaped this dynamic field:
As far as starting points go, Smarthistory takes the seeker of knowledge back even beyond the start of graphic design, and into the history of art from around the world for a more comprehensive overview of the seeds that helped sew the graphic design field:
Arty Factory is an educational resource hub for design and art lessons online. They are totally free for all and provide an array of fully illustrated classes on drawing, painting, and design:
BBC Learning – Art and Design is an online resource for building and advancing your art and design knowledge. This site offers various courses to help you grow in your selected field:
The Metropolitan Museum of Art’s Heilbrunn Timeline of Art History is another wonderful place to turn for a more historical perspective and learning opportunity as you study through the great works of art from all over the world and all through time:
Graphic Design Forum is one of the largest forums on the web for all things graphic design. If it is experience that you need to gain, then you have come to the right place, no matter what level of designer you are:
All Graphic Design is an expansive resource in and of itself, all fed by the online design community. From forums to templates to articles and more, this is a one stop learning hub for graphic designers:
TutsPlus is a tutorial junkie’s playland for hands-on graphic design walk throughs. If you are not familiar with the TutsPlus site and family then you are selling your graphic design business short. They offer both free and premium levels of tutorials:
The MFA in Interaction Design program trains students to research, analyze, prototype, and design concepts in their business, social, and cultural contexts:
Speaking of invaluable hubs for all things graphic design Design Talk Board comes in to educate the online masses with piles of resources, jobs information, graphics news, talk forums, software training, and oh, so much more!
Graphic Design Principles Index is an installment based online graphic design course that is hosted by Duke University. The program is divided into 39 different parts:
AIGA is a site that all professional graphic designers should be aware of. This is an association that is dedicated to advancing the overall design field as ‘a professional craft, strategic tool and vital cultural force’ in our society:
HOW Design Forums is another wonderful and informative graphic design forum that will enrich any graphic designers learning experience. So many great communal contributions that you would be amiss to, well, miss:
If it is informational sites that you are looking for, then SitePoint certainly needs to be on your radar. No matter your level of learning, this fast growing online media company and information provider has something for all web professionals:
Graphics.com is a community resource that is shared by any and all graphic designers who wish to be apart of it. Complete with tutorials, educational videos, a full forum, and more, this is another resource center worth looking into:
Packaging Design Archive is a collection of very well designed product packaging that users can flip through to study the presentations that are housed there for learning purposes. Not to mention, a little inspiration:
Packaging of the World is another communal collection of product design, whose deep databases are full of helpful examples that you can once again study to learn from. If you like to learn by example, and package design is your passion, then look no further:
The Chicago Design Archive is another great place where you can browse through a collection of locally created designs from the Chicago area and learn from a more hands on approach:
STA Archive is an annual design contest where you can show off the skills that you have learned and been honing:
We thought we would cap this section off with one more graphic design based forums for the online community. Your Design Forums can provide learning opportunities through shared experiences and advice of the community:
Further Reading
If there are any sources for graphic design learning tools that you tend to turn to that we left off here, please let us know by adding it in the comments section below to keep the learning experience expanding!
This article is an excerpt from Eric Meyer’s recent book Smashing CSS, published by Wiley in cooperation with Smashing Magazine.
In this article, the focus is on what’s coming: styling techniques you’ll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they’re all on the cutting edge of Web design.
Accordingly, be careful not to get cut! A numberofusefulsites can help you figure out the exact syntaxes and patterns you need to use these techniques.
Furthermore, a number of JavaScript libraries can extend support for advanced CSS back into older browsers, in some cases as far back as IE/Win 5.5. Some are very narrowly focused on certain browser families, whereas others are more broadly meant to allow support in all known browsers. These can be useful in cases where your visitors haven’t quite caught up with the times but you don’t want them to miss out on all the fun. (Some of these libraries are CSS3 PIE, cssSandpaper, :select[ivizr], ie7-js, eCSStender).
There are also a good many CSS enhancements available as plug-ins for popular JavaScript libraries such as jQuery. If you’re a user of such a library, definitely do some digging to see what’s been created. Again: Be careful! While these techniques are powerful and can deliver a lot of power to your pages, you need to test them thoroughly in the browsers of the day to make sure you didn’t just accidentally make the page completely unreadable in older browsers.
Styling HTML 5
Styling HTML 5 is really no different than styling HTML 4. There are a bunch of new elements, but styling them is basically the same as styling any other element. They generate the same boxes as any other div, span, h2, a, or what have you.
The HTML 5 specification is still being worked on as of this writing, so this may change a bit over time, but the following declarations may be of use to older browsers that don’t know quite what to do with the new elements.
You may have noticed that I left out two fairly important new elements: audio and video. That’s because it’s hard to know exactly how to treat them. Block? Inline? All depends on how you plan to use them. Anyway, you can place them in the declaration that makes the most sense to you.
But what about really old browsers, like IE6? (Note I said “old,” not “unused.” In an interesting subversion of popular culture, browser popularity has very little to do with age.) For those, you need to use a bit of JavaScript in order to get the browser to recognize them and therefore be able to style them. There’s a nice little script that auto-forces old versions of IE to play nicely with HTML 5 elements. If you’re going to use and style them, you should definitely grab that script and put it to use.
Once you’ve gotten your browser ducks in a row and quacking “The Threepenny Opera,” you can get down to styling. Remember: There’s really nothing new about styling with these new elements. For example:
<img src="splash.jpg" alt="A toddler’s face is obscured by a rippled and dimpled wall of water thrown up by her hands slapping into the surface of the swimming pool in whose waters she sits.">
SPLASH SPLASH SPLASH!!!
Figure 7-1: A styled HTML 5 figure and figure caption.
Classing like HTML 5
Perhaps you like the new semantics of HTML 5, but you’re just not ready to take your sites to full-on HTML 5. Maybe your site’s user base is mostly older browsers and you’d rather stick to known quantities like HTML 4 or XHTML. Not to worry: You can have the best of both worlds with the venerable class attribute.
This approach was documented by Jon Tan in his article. The basic idea is to use old-school elements like div and span, and add to them classes that exactly mirror the element names in HTML 5. Here’s a code example.
<img src="spring.jpg" alt="A small child with twin pigtail braids, her back to the camera, swings away from the camera on a playground swingset while the late afternoon sun peeks over the crossbar of the swingset.">
<div class="figcaption">Swinging into spring.</div>
Figure 7-2: A styled HTML 4-classed figure and figure caption.
If you compare the styles there to those found in the preceding section, you’ll see that the only difference is that the names figure and figcaption are preceded by periods — thus marking them as class names. The markup is a little different, of course, though it’s the same basic structure.
The advantage of this approach is that if you have these styles in place at the point when you decide you can convert to HTML 5, then all you need to do is change your markup to use HTML 5 elements instead of classed divs and then strip off the periods to turn the class selectors into element selectors. That’s it. Easy as cake!
Media Queries
This could honestly be its own article, or possibly even its own book. Thus, what follows will necessarily be just a brief taste of the possibilities. You should definitely follow up with more research, because in a lot of ways this is the future of Web styling.
The point of media queries is to set up conditional blocks of styles that will apply in different media environments. For example, you could write one set of styles for portrait displays and another for landscape displays. You might change the colors based on the bit depth of the display. You could change the font based on the pixel density of display. You might even rearrange the page’s layout depending on the width or number of pixels available in the display.
Figure 7-3: A basic three-column layout.
How? Consider some basic layout styles for a three-column layout:
As nice as this might be (in a minimalist sort of way), it is likely to run into trouble on smaller—which is to say, narrower—displays. What if you could magically change to a two-column layout on such displays?
Well, you can. First, restrict the three-column layout to environments that are more than 800 pixels across. This is done by splitting the layout bits into their own declarations:
Then wrap those last two declarations in a media query:
@media all and (min-width: 800px) {
.col {
float: right;
width: 20%;
}
#two {
width: 40%;
}
}
What that says is “the rules inside this curly-brace block apply in all media that have a minimum display width of 800 pixels.� Anything below that, no matter the medium, and the rules inside the block will be ignored. Note the parentheses around the min-width term and its value. These are necessary any time you have a term and value (which are referred to as an expression).
At this point, nothing will really change unless you shrink the browser window until it offers fewer than 800 pixels across to the document. At that point, the columns stop floating altogether.
Figure 7-4: What happens below 800 pixels.
What you can do at this point is write another media-query block of layout rules that apply in narrower conditions. Say you want a two-column layout between 500 and 800 pixels):
Figure 7-6: Single-column layout, which shows below 500 pixels.
Note that in all these queries, layout styles are defined in relation to the display area of the browser window. More generically, they are defined in relation to the display area available to the document in any medium in which it is rendered. That means that if a printer, for example, is used to print the document and it has an available display area 784 pixels wide, then the two-column layout will be for printing.
To restrict the column shifting to screen media only, alter the queries, like so:
@media screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
But what if you want the three-column layout used in some non-screen media, like print and TV displays? Then add in those media using commas, like so:
@media print, tv, screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
The commas here act as logical ORs, so the first query reads “use these styles on print media OR TV media OR a display area on a screen medium where the display area is 800 pixels or more.�
And if you want the three-column layout used in all non-screen media? Add a statement to the first query using the not modifier saying “anything that isn’t screen.�
@media not screen, screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
As before, the comma joins the two in an OR statement, so it reads as “anything not on a screen medium OR a display area on a screen medium where the display area is 800 pixels or more.�
There is also an only modifier, so that a query can say something like only print or only screen and (color). As of this writing, not and only are the only modifiers in media queries.
You aren’t restricted to pixels for the previous queries, by the way. You can use ems, centimeters, or any other valid length unit.
Table 7-1: The base media query terms
Term
Description
width
The width of the display area (e.g., a browser window).
height
The height of the display area (e.g., a browser window).
device-width
The width of the device’s display area (e.g., a desktop monitor or mobile device display).
device-height
The height of the device’s display area.
orientation
The way the display is oriented; the two values are portrait and landscape.
aspect-ratio
The ratio of the display area’s width to its height. Values are two integers separated by a forward slash.
device-aspect-ratio
The ratio of the device display’s width to its height. Values are two integers separated by a forward slash.
color
The color bit-depth of the display device. Values are unitless integers which refer to the bit depth. If no value is given, then any color display will match.
color-index
The number of colors maintained in the device’s “color lookup table.� Values are unitless integers.
monochrome
Applies to monochrome (or grayscale) devices.
resolution
The resolution of the device display. Values are expressed using units dpi or dpcm.
scan
The scanning type of a “TV� media device; the two values are progressive and interlace.
grid
Whether the device uses a grid display (e.g., a TTY device). Values are 0 and 1.
Table 7-1 shows all the query terms that can be used in constructing media queries. Note that almost all of these terms accept min- and max- prefixes (for example, device-height also has min-device-height and max-device-height cousins). The exceptions are orientation, scan, and grid.
Styling Occasional Children
There are times when you may want to select every second, third, fifth, eighth, or thirteenth element in a series. The most obvious cases are list items in a long list or rows (or columns) in a table, but there are as many cases as there are combinations of elements.
Consider one of the less obvious cases. Suppose you have a lot of quotes that you want to float in a sort of grid. The usual problem in these cases is that quotes of varying length can really break up the grid.
A classic solution here is to add a class to every fourth div (because that is what encloses each quote) and then clear it. Rather than clutter up the markup with classes, though, why not select every fourth div?
.quotebox:nth-child(4n+1) {
clear: left;
}
Figure 7-7: The problem with floating variable-height elements.
Figure 7-8: Clearing every fourth child.
A quick explanation of the 4n+1 part:
4n means every element that can be described by the formula 4 times n, where n describes the series 0, 1, 2, 3, 4… .That yields elements number 0, 4, 8, 12, 16, and so on. (Similarly, 3n would yield the series 0, 3, 6, 9, 12… .)
But there is no zeroth element; elements start with the first (that is, element number 1). So you have to add + 1 in order to select the first, fifth, ninth, and so forth elements.
Yes, you read that right: the :nth-child() pattern starts counting from 0, but the elements start counting from 1. That’s why + 1 will be a feature of most :nth-child() selectors.
The great thing with this kind of selector is that if you want to change from selecting every fourth element to every third element, you need only change a single number.
.quotebox:nth-child(3n+1) {
clear: left;
}
Figure 7-9: Clearing every third child.
That might seem pretty nifty on its own, but it gets better. If you combine this approach with media queries, you get an adaptable grid-like layout.
@media all and (min-width: 75.51em) {
.quotebox:nth-child(5n+1) {
clear: left;
}
}
@media all and (min-width: 60.01em) and (max-width: 75em) {
.quotebox:nth-child(4n+1) {
clear: left;
}
}
@media all and (min-width: 45.51em) and (max-width: 60em) {
.quotebox:nth-child(3n+1) {
clear: left;
}
}
@media all and (min-width: 30.01em) and (max-width: 45.5em) {
.quotebox:nth-child(2n+1) {
clear: left;
}
}
@media all and (max-width: 30em) {
.quotebox {
float: none;
}
}
Figure 7-10: Two views of an adaptable floated grid.
Note that this particular set of queries is based on the width of the display area of the browser as measured in ems. That helps make the layout much more adaptable to changes of text size and browser window.
If you’re interested in selecting every other element — let’s say, every other table row — there are some more human alternatives to 2n+1. You can select even-numbered or odd-numbered children using :nth-child(even) and :nth-child(odd), as in this example.
tr:nth-child(odd) {
background: #eef;
}
Styling Occasional Columns
It’s easy enough to select alternate table rows for styling, but how about table columns? Actually, that’s just as easy, thanks to the :nth-child and :nth-of-type selectors.
In a simple table with rows consisting of nothing but data cells (those are td elements), you can select every other column like so:
If you’re after every third, fourth, fifth, or similarly spaced-out interval, then you need the n+1 pattern.
td:nth-child(3n+1) {
background: #edf;
}
Figure 7-12: Styling both odd- and even-numbered columns.
Figure 7-13: Styling every third data column.
That’s all relatively straightforward. Now, what happens when you put a th at the beginning of each row? In one sense, nothing. The columns that are selected don’t change; you’re still selecting the first, fourth, seventh, and so on children of the tr elements. In another sense, the selected columns are shifted, because you’re no longer selecting the first, fourth, seventh, and so on data columns. You’re selecting the third, sixth, and so on data columns. The first column, which is composed of th element, doesn’t get selected at all because the selector only refers to td elements.
Figure 7-14: Disrupting the pattern with row headers.
To adjust, you could change the terms of the :nth-child selector:
td:nth-child(3n+2) {
background: #edf;
}
Alternatively, you could keep the original pattern and switch from using :nth-child to :nth-of-type:
td:nth-of-type(3n+1) {
background: #fde;
}
Figure 7-15: Restoring the pattern by adjusting the selection formula.
Figure 7-16: Restoring the pattern with :nth-of-type.
This works because it selects every nth element of a given type (in this case, td elements) that shares a parent element with the others. Think of it as :nth-child that also skips any elements that aren’t named in the :nth-child selector.
RGB Alpha Color
Color values are probably one of the most familiar things in all of CSS; some people are to the point of being able to estimate a color’s appearance based on its hexadecimal representation. (Go on, try it: #e07713.) It’s not quite as common to use the rgb() notation for colors, but they’re still pretty popular.
In CSS 3, the rgb() notation is joined by rgba() notation. The a part of the value is the alpha, as in alpha channel, as in transparency. Thus you can supply a color that is partly see-through:
The alpha value is always represented as a number between 0 and 1 inclusive, with 0 meaning “no opacity at all� and 1 meaning “fully opaque.� So half-opaque (and thus half-transparent) is 0.5. You can’t put a percentage in there for historical reasons that are too messy to get into here.
If you supply a number outside the 0 to 1 range, it will (in the words of the specification) be “clamped� to the allowed range. So if you give an alpha value of 4.2, the browser will treat it as if you’d written 1. Also, it isn’t clear what should happen when an alpha of 0 is used. Since the color is fully transparent, what will happen to, say, invisible text? Can you select it? If it’s used on a link, is the link clickable? Both are interesting questions with no definitive answers. So be careful.
RGBA colors can be used with any property that accepts a color value, such as color and background-color. To keep older browsers from puking on themselves, it’s advisable to supply a non-alpha color before the alpha color. That would take a form like so:
{
color: #000;
color: rgba(0,0,0,0.75);
}
The older browsers see the first value and know what to do with it. Then they see the second value and don’t know what to do with it, so they ignore it. That way, at least older browsers get black text. Modern browsers, on the other hand, understand both values and thanks to the cascade, override the first with the second.
Note that there is no hexadecimal form of RGBA colors. Thus, you cannot write #00000080 and expect half-opaque black.
HSL and HSL Alpha Color
A close cousin to RGBA values are the HSLA values, and an even closer cousin to them are HSL colors. These are new to CSS 3, and will be a delightful addition to many designers.
For those not familiar with HSL, the letters stand for Hue-Saturation-Lightness. Even if you didn’t know the name, you’ve probably worked with HSL colors in a color picker.
Figure 7-18: An HSL color picker.
The hue is represented as a unitless number corresponding to the hue angle on a color wheel. Saturation and lightness are both percentages, and alpha is (as with RGBA) a number between 0 and 1 inclusive. In practice, you can use HSL colors anywhere a color value is accepted. Consider the following rules, which create the equivalent effect.
Figure 7-20: Boxes with opaque and translucent HSL backgrounds.
You can do old-browser fallbacks with regular RGB values, though having to specify an RGB color and then HSL color does sort of detract from the point of using HSL in the first place. HSL allows you to get away from RGB altogether.
Shadowy Styles
Ah, drop shadows. Remember drop shadows? In the mid-90’s, everything had a drop shadow. Of course, back then the shadows were baked into images and constructed with tables even more tortuously convoluted than usual. Now you can relive the glory days with some fairly simple CSS. There are actually two properties available: text-shadow and box-shadow.
Take the former first. The following CSS will result:
h1 {
text-shadow: gray 0.33em 0.25em 0.1em;
}
The first length (0.33em) indicates a horizontal offset; the second (0.25em), a vertical offset. The third is a blur radius, which is the degree by which the shadow is blurred. These values can use any length unit, so if you want to do all your shadow offsets and blurs in pixels, go to town. Blurs can’t be negative, but offsets can: A negative horizontal offset will push the shadow to the left, and a negative vertical offset will go upward.
Figure 7-21: Dropping shadows from a heading.
You can even have multiple shadows! Of course, whether you should, is a matter of opinion.
Note that the color of a shadow can come before all the lengths or after them, whichever you prefer. Note also that the CSS 3 specification says that the first shadow is “on top,� which is closest to you. Shadows after that are placed successively further away from you as you look at the page. Thus, the gray shadow is placed over the top of the blue shadow. Now to shadow boxes. It’s pretty much the same drill, only with a different property name.
h1 {
box-shadow: gray 0.33em 0.25em 0.25em;
}
Figure 7-22: A heading with multiple shadows.
Figure 7-23: Shadowing the element box of a heading.
Even though there’s no obvious element box for the h1, a shadow is generated anyway. It’s also drawn only outside the element, which means that you can’t see it behind/beneath the element, even when the element has a transparent (or, with RGBA colors, semi-transparent) background. The shadows are drawn just beyond the border edge, so you’re probably better off putting a border or a visible background (or both) on any shadowed box.
You can have more than one box shadow, just like you can with text shadows:
Figure 7-24: Multiple shadows on the element box of a heading.
Here’s where I have to admit a small fib: The previous examples are the ideal cases. As of this writing, they wouldn’t actually work in browsers. As of mid-2010, to make the single-shadow example work, you’d actually need to say:
That will cover all modern browsers as of mid-2010. Over time, the need for the prefixed properties (-moz- and –webkit-) will fade and you’ll be able to just write the single box-shadow declaration. When exactly will that happen? It all depends on your design, your site’s visitors, and your own sense of comfort.
If you also want to get drop shadows on boxes in older versions of Internet Explorer, then you’ll need to add in the IE-only Shadow filter. Read here to find out more.
Multiple Backgrounds
One of the really nifty things in CSS 3 is its support for multiple background images on a given element. If you’ve ever nested multiple div elements just to get a bunch of background decorations to show up, this section is for you.
Take, for example, this simple set of styles and markup to present a quotation:
One’s mind has a way of making itself up in the background, and it suddenly becomes clear what one means to do.
—Arthur Christopher Benson
Figure 7-25: Setting up the quotation’s box.
Now, adding a single background image is no big deal. Everyone has done it about a zillion times.
.quotebox {
background: url(bg01.png) top left no-repeat;
background-color: #fff;
}
Figure 7-26: Adding a single background.
But what if you want a little quarter-wheel in every corner? Previously, you would have nested a bunch of divs just inside the quotebox div. With CSS 3, just keep adding them to the background declaration:
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat;
background-color: #fff;
}
Figure 7-27: Applying two backgrounds to the same element.
Commas separate each background value to get multiple backgrounds:
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
url(bg04.png) bottom left no-repeat;
background-color: #fff;
}
Figure 7-28: Applying four backgrounds to a single element.
The effect here is extremely similar to nesting a bunch of divs. It’s just that with CSS 3, you don’t have to bother any more.
That similarity extends into the way background are composited together. You may have noticed that I split out the background-color declaration in order to have a nice flat white behind all the images. But what if you wanted to fold it into the background declaration? Where would you put it? After all, each of these comma-separated values sets up its own background. Put the color in the wrong place, and one or more images will be overwritten by the color.
As it turns out, the answer is the last of the values:
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
#fff url(bg04.png) bottom left no-repeat;
}
That’s because the multiple background go from “highest�—that is, closest to you as you look at the page—to “lowest�—furthest away from you. If you put the color on the first background, it would sit “above� all the others.
This also means that if you want some kind of patterned background behind all the others, it needs to come last and you need to make sure to shift any background color to it.
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
url(bg04.png) bottom left no-repeat,
#fff url(bgparch.png) center repeat;
}
Figure 7-29: One element, five backgrounds.
Because of the possible complexities involved, I prefer to split any default background color into its own declaration, as shown earlier. Thus I’d write the preceding as:
.quotebox {
background:
url(bg01.png) top left no-repeat,
url(bg02.png) top right no-repeat,
url(bg03.png) bottom right no-repeat,
url(bg04.png) bottom left no-repeat,
url(bgparch.png) center repeat;
background-color: #fff;
}
When you use the separate property, the color is placed behind all the images and you don’t have to worry about shifting it around if you reorder the images or add new images to the pile.
You can comma-separate the other background properties such as background-image. In fact, an alternate way of writing the preceding styles would be:
Different format, same result. This probably looks more verbose, and in this case it really is, but not always. If you drop the parchment background, then you could simplify the first declaration quite a bit:
Figure 7-30: Similar background, alternate syntax.
Given those styles, none of the background images would be repeated, because the single no-repeat is applied to all the backgrounds that are assigned to the element. The only reason you had to write out all the repeat values before was that the first four have one value and the fifth had another.
And if you were to write two values for background-repeat?
In that case, the first and third images would not be repeated, whereas the second and fourth images would be repeated along the y axis. With three repeat values, they would be applied to the first, second, and third images, respectively, whereas the fourth image would take the first repeat value.
2D Transforms
If you’ve ever wanted to rotate or skew an element, border, and text and all, then this section is definitely for you. First, though, a word of warning: In order to keep things legible, this section uses the unprefixed version of the transform property. As of this writing, doing transforms in a browser actually would require multiple prefixed declarations, like so:
That should cease to be necessary in a year or two (I hope!) but in the meantime, keep in mind as you read through this section that it’s been boiled down to the unprefixed version for clarity.
Time to get transforming! Possibly the simplest transform to understand is rotation:
Figure 7-31: Rotated element boxes. The red dashes show the original placement of the elements before their rotation.
In a sense, transforming is a lot like relative positioning: The element is placed normally and then transformed. You can transform any element at all, and in the case of rotation can use any real-number amount of degrees, radians, or grads to specify the angle of rotation. If you’ve ever wanted to rotate your blog by e radians or 225 grads, well, now’s your chance.
As you no doubt noticed, the boxes in the preceding example were rotated around their centers. That’s because the default transformation origin is 50% 50%, or the center of the element. You can change the origin point using transform-origin:
Figure 7-32: Elements rotated around points other than their centers.
Two notes: First, negative angles can be equivalent to positive angles. Thus, 270deg is equivalent to –90deg in the final positioning of the element, just as 0deg and 360deg are the same. Second, you can specify angles greater than the apparent maximum value. If you declare 540deg, the element’s final rotation will look exactly the same as if you’d declared 180deg (as well as –180deg, 900deg, and so on). The interim result may be different if you also apply transitions (see next section), but the final “resting” state will be equivalent.
Almost as simple as rotation is scaling. As you no doubt expect, this scales an element up or down in size, making it larger or smaller. You can do this consistently along both axes, or to a different degree along each axis:
One scale() value means the element will be scaled by that amount along both the x and y axes. If there are two values, the first specifies the horizontal (X) scaling, and the second, the vertical (Y) scaling. Thus, if you want to leave the horizontal axis the same and only scale on the y axis, do this:
Figure 7-34: Two scaled elements, one scaled only on the Y axis.
Figure 7-35: Two scaled elements, one scaled only on the X axis.
When writing CSS yourself, it seems most convenient to just stick with scale() and fill in a 0 for the horizontal any time you want a purely vertical scaling. If you’re programmatically changing the scaling via DOM scripting, it might be easier to manipulate scaleX() and scaleY() directly.
As with rotation, you can affect the origin point for scaling. This allows you, for example, to cause an element to scale toward its top-left corners instead of shrink down toward its center:
Figure 7-36: Two scaled elements, each with a different scaling origin.
Similarly simple is translation. In this case, it isn’t changing the language from one to another, but “translating� a shape from one point to another. It’s an offset by either one or two length values.
Again, this is very much like relative positioning. The elements are placed normally and then transformed as directed. When there’s only one length value in a translate() value, it specifies a horizontal movement and the vertical movement is assumed to be zero. If you just want to translate an element up or down, you have two choices. First is to simply give a length of 0 for the horizontal value.
There is also a translateX(), which does about what you’d expect: moves the element horizontally!
Figure 7-38: Two differently translated elements.
While you can declare a transform-origin in cases where you’re just translating, it doesn’t matter all that much whether you do so. After all, whether an element’s center or top-left corner is pushed 50 pixels to the right doesn’t really matter. The element will end up in the same place either way. But that’s only true if all you’re doing is translating. If you do anything else at the same time, like rotate or scale, then the origin will matter. (More on combining transforms in a bit.)
The last type of transformation, skewing, is slightly more complex, although the method of declaring it is no more difficult than you’ve seen so far.
Skewing an element distorts its shape along one or both axes:
If you provide only a single value for skew(), then there is only horizontal (X) skew, and no vertical (Y) skew. As with translations and scaling, there are skewX() and skewY() values for those times you want to explicitly skew along only one axis:
Figure 7-40: Two elements, each one skewed along a different axis.
Here’s how skewing works: Imagine there are two bars running through the element, one along each of the X and Y axes. When you skew in the X direction, the Y axis is rotated by the skew angle. Yes, the Y (vertical) axis is the one that rotates in a skewX() operation. Positive angles are counterclockwise, and negative angles are clockwise. That’s why the first box in the preceding example appears to tilt rightward: The Y axis was tilted 33.3 degrees clockwise.
The same basic thing happens with skewY(): The X axis is tilted by the specified number of degrees, with positive angles tilting it counterclockwise and negative angles tilting clockwise.
The interesting part here is how the origin plays into it. If the origin is in the center and you provide a negative skewX(), then the top of the element will slide to the right of the origin point while the bottom will slide to the left. Change the origin to the bottom of the element, though, and the whole thing will tilt right from the bottom of the element.
Figure 7-41: Two skewed elements, each with a different skewing origin.
Similar effects happen with vertical skews.
So those are the types of transforms you can carry out. But what if you want to do more than one at a time? No problem! Just list them in the order you want them to happen.
In every case, the transforms are executed one at a time, starting with the first. This can make a significant difference. Consider the differing outcomes of the same transforms in different orders.
There is one more transformation value type to cover: matrix(). This value type allows you to specify a transformation matrix in six parts, the last two of which define the translation. Here’s a code example:
Figure 7-43: The differences caused by transform value ordering.
Figure 7-44: Matrix transforms.
Basically, the first four numbers are a compact form of expressing the end result of rotating, skewing, and scaling an element, and the last two translate that end result. If you understand matrix-transformation math, then you’ll love this. If you don’t, don’t worry about it overmuch. You can get to the same place with the other transform values reviewed in this chapter.
If you’d like to learn about matrix transforms, here are two useful resources:
Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. This book is for developers who already have some experience with CSS and JavaScript and are ready for more advanced techniques.
Valentine’s Day is just around the corner. Since it take places only once a year, most of us try our best to explicitly show our loved ones how much they mean to us. And so it remains to be, graphic designers are very much occupied with work this time of the year since each agency wants to reach a different approach with their products as well as remain unique.
With the help of Photoshop, designers can achieve some tremendous graphics and eye-catching designs. This software provides numerous effects and has a wide range of functions that let you discover your creative side more each time. Last year we had filled Valentine’s day with a nice free icon set as well as some really creative gift wrapping ideas.
Here is a roundup of some really useful tutorials to help you save time and give your work a special appeal so that you all can spend a memorable Valentine’s Day with your loved ones. Let the creativity begin!
Love Is In The Air – Cloudy Text Effect
In the following tutorial you will learn how to use different brushes to turn an ordinary photo into your very own personalized Valentine’s card:
Create a Cosmic Love Goddess With Photoshop CS5
In today’s tutorial the author will demonstrate how to create a cosmic love goddess using some of Photoshop CS5′s new tools including the Refine Edge Feature which really helps to streamline the process of masking and removing objects from the background:
Love Wallpaper For Your Desktop
In this lesson the author will try to show you how it’s possible to create very nice wallpapers for your desktop:
Spirit Dove
In this tutorial, you can see how a dove can be created like a spirit bursting out of a woman’s body amidst the cloudy sky:
Saint Valentine Creations
This tutorial shows a magical Saint Valentine design can be created with curls, ornaments and abstract patterns:
Valentine’s Day Ideas
Learn in this tutorial how to create a vector Valentine’s heart with additional effects and textures:
Create a Colorful Background for Valentine’s Day
In this tutorial you can see how you can create a colorful background for Valentine’s Day, using the Custom Shape Tool, Layer Styles, gradients, and other Photoshop tools:
Valentine Cards
This example shows how to create a Valentine’s Day card for your loved ones. With the collage creation program AKVIS Chameleon it is simple, and it makes the creative process a pleasure. Your gift will be original and unique:
Make a Valentines Day Card
With Valentines around the corner, why not make your very own Valentines card for a loved one with not just love and sincerity… but some of that creativity you have built up inside you too:
