Mastering Photoshop for Web Design is the third book in our eBook series, and it’s definitely the best eBook we’ve published so far. It was written from scratch by our regular writer Thomas Giannattasio, exclusively for Smashing Magazine and its readers. We are very proud of the result, in particular because of the high quality of tips, ideas and techniques that Thomas — who is a deep expert in Adobe Photoshop — presents in his book.Mastering Photoshop is written for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills. The eBook contains 178 pages, explaining fundamental techniques that Web designers need to know to produce high-quality work in Photoshop. You won’t find any generic step-by-step tutorials or learn random effects. You will gain a profound understanding of what you can do with Photoshop and how to use it effectively in your work.All chapters have undergone a careful technical review by well-known designer, illustrator and speaker Elliot Jay Stocks. The book was proofread by our regular proofreader Andrew Lobo, and it has an attractive layout. The PDF can be printed and read on all devices.The AuthorThomas Giannattasio is an interactive designer who resides in the Washington DC metro area. He specializes in Web design and front-end development, particularly art direction, website design and application design, and has 14 years of experience. Thomas cares strongly about typography, simplicity and user experience. He works as a senior designer for a global marketing firm and freelances under the name attasi.Thomas’ articles on Smashing Magazine prove his expertise in Photoshop: The Ails of Typographic Anti-Aliasing and Unknown Photoshop Tricks and Time-Savers are two of the most useful Photoshop-related articles that Smashing Magazine has published over the years.The Expert’s Opinion“Photoshop is a powerful tool, and although the basics can be easy to grasp, mastering the application can be extremely difficult. This is where Mastering Photoshop comes in: it takes readers through the app in depth and relates all tasks back to the creative process. There’s much to learn in here, for beginners and experts alike.” — Elliot Jay Stocks, designer, illustrator and speakerThe eBook, in PDF format, is ideal for archiving, for armchair or mobile reading (including the iPad and iPhone via iBooks and other apps) and of course for printing. You can order your copy of Mastering Photoshop for just $19,90 (or €16.95 if you live in the EU) starting now and exclusively in our Smashing Shop.The book contains eight chapters:Color Management Colors can appear lighter or darker, more or less saturated, cooler or warmer, or just plain wrong depending on the user’s environment. This can be quite a problem, especially with a client’s brand-specific colors. As Web designers, our responsibility is to ensure that the experiences we craft are as true to the original as possible.Paths While Illustrator’s vector tools are much more powerful, Photoshop’s benefit lies in its ability to blend vector and raster data together seamlessly. Because Photoshop documents are based on a pixel grid, the path tools in Photoshop make them superior to Illustrator for designing on-screen media.Layer Styles Layer Styles are essential to creating flexible and non-degradable documents, because they’re separated from the layer’s actual content. In this chapter, we’ll cover how to create great-looking and reusable styles. We’ll also cover some unique effects and non-typical uses that help to consolidate excess layers.Brushes Mastering the digital brush is by no means easy. It carries the same difficulties as the sable brush hidden at the bottom of your art bin. In fact, the difficulty is multiplied by the disconnect between the hand and monitor. Developing Photoshop brush skill takes time, but it is well worth the effort.Typography While the majority of type on the Web is rendered by HTML, Photoshop is still necessary to handle treatment beyond the grasp of CSS. In this chapter, we’ll explore Photoshop’s type tools and discover ways to maximize the software’s typesetting capabilities.Photography A photograph — especially of the human face — immediately draws the user’s attention and can be used to direct eye flow to important areas of the page. Placing a large photograph above the fold is a common way to provide an entry point to the content. Because photographs are high above other elements in the hierarchy, they need to be handled with care and precision.Exporting Once you’ve polished every last pixel, it’s time to get your work into the browser. This is a pretty straightforward process, but properly optimizing your images is crucial. You need to maintain a balance between clarity and download speed. This requires multiple formats, varying levels of compression and other optimization techniques. In this chapter, we’ll explore the workflow of exporting images via the “Save for Web and Devices” dialog.SummarySample Chapter and ScreenshotsYou can download the Chapter 4, Brushes (4.7 Mb, PDF) for free. Please consider buying the eBook if you find it useful or helpful.Large viewLarge viewLarge viewMotivation behind the bookIn the foreword, Thomas describes his motivation:“This book was written in the hope of filling a gap — a gap that has existed for as long as designers have been using Photoshop for Web design; a gap that we so often fill with tutorials focused on the latest trends and on inspiration galleries that are quickly browsed and forgotten; a gap that is growing as quickly as our technologies. It’s a gap of foundation.The fast pace of the Internet has focused us on the latest and greatest techniques, which typically have a lifespan of only a few months. Rarely do we focus on the fundamentals — the principles that outlive the trends. Unfortunately, the principles often appeal to us less than the shiny and new.Photoshop tutorials offer quick results. They hold our hands step by step until something incredible appears, but they rarely explain in depth the principles that allow us to create something unique and incredible of our own. If you’re a beginner, I hope this book gives you the comprehension you need to bring your ideas to life. If you’re a veteran, I hope it unveils some of the mysteries that have always boggled you.”The book is not protected by DRM and is available exclusively in the Smashing Shop. Please respect our work and the hard effort of our writer. If you received this book from a source other than the Smashing Shop, please support us by purchasing your copy in our online store.Thank you.(al)© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: ebook, mastering, photoshop, smashing
-
I posted to smashingmagazine.com
New eBook From Smashing Magazine: Mastering Photoshop For Web Design
http://feedproxy.google.com/~r/SmashingMagazine/~3/z7ljILtW-Wo/
July 27 2010, 5:23am | Comments »
-
I posted to smashingmagazine.com
Behind The Scenes of Smashing Magazine: Interview With Our Writers
http://feedproxy.google.com/~r/SmashingMagazine/~3/1uXMx0mu_iA/
July 16 2010, 2:59am | Comments »
-
I posted to smashingmagazine.com
Smashing Network Update: Add Widget To Your Site and New Members
http://feedproxy.google.com/~r/SmashingMagazine/~3/tmhWtGaG7fI/
In the last few months, you may have noticed some major changes happening on Smashing Magazine’s front page. Since November 2009, when we launched the Smashing Network, which features manually selected articles from the best design blogs, we’ve been working hard to improve the usability of our website and make the navigation easier to use and the content easier to read.Indeed, we have been continually looking for a nice clean design that would allow Smashing Magazine’s brand to dominate the website, while boosting the visibility and exposure of our network members. We have considered various solutions, and one seemed to be just perfect. The result (we hope) is a cleaner separation of the magazine’s posts and network’s posts, by way of tabbed navigation at the top of the page.[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]Magazine And Network TabsSo, what exactly does this mean? It’s very simple. At the top of the page, you’ll notice two tabs, one for Smashing Magazine’s posts and one for the Smashing Network’s posts. You can now easily switch between the magazine and network’s content without using the scroll bar. You can also visit the network’s content page, which wasn’t possible before, and use Smashing Magazine’s good old front page, which now features only Smashing Magazine’s posts. Also, the tabbed solution is the first step towards something huge that we have planned for 2010. Smashing tabs in use. You can now easily switch between the magazine and network’s content on every single page of Smashing Magazine.This change obviously means that our network members would get much less traffic from our website to theirs. So, to compensate, we have decided to add the tabbed navigation not only to our front page (as was done earlier) but to all pages on Smashing Magazine. This is why you see the tabbed navigation at the top of this page now. Aside from that, we have come up with a couple of new exciting features that will roll out this year, one of which is the Smashing Network widget.The Smashing Network WidgetWe are pleased to release a simple and customizable widget that displays the latest posts from the Smashing Network. It’s up to you to decide how to style our updates on your website. You can use your own CSS to customize the look of the widget as you wish. The widget is available right now!To embed the widget on your website, simply include a JavaScript code. You will find the details, including implementation examples, on our page “How to Add the Smashing Network Widget to Your Site“.We hope many designers and developers will integrate the widget on their websites. The main goal of the widget is to promote high-quality design-related content on the Web. We are confident that the design community will benefit significantly from the mutual support of the network websites, particularly in terms of traffic, so it would be great if you integrated it on your website, too.Welcome New Members!We are also very happy to announce that we have accepted new members into the Smashing Network. All applicants were carefully considered and tested for the relevance and quality of their content. In this second round, we have accepted the following websites.CSS-TricksCSS-Tricks is a Web design community curated by CSS ninja Chris Coyier. The website offers a variety of articles, tips, tutorials and screencasts on front-end development, mostly CSS and jQuery. The website also features useful snippets and freebies and has a growing community forum.CSS-Tricks websiteCSS-Tricks channel on Smashing MagazineDesign InformerDesign Informer is a fresh new blog that brings the latest in Web and graphic design. It has Photoshop tutorials, freebies, resources, inspiration and much more. It is one of the fastest-growing design blogs, and it strives to always deliver high-quality content to readers.Design Informer websiteDesign Informer channel on Smashing MagazineCats Who CodeCreated by Jean-Baptiste Jung in June 2008, Cats Who Code provides practical Web development tutorials and resources for both beginners and advanced developers. With a focus on such topics as WordPress, jQuery and CSS, Cats Who Code helps you build better websites. Meow!Cats Who Code websiteCats Who Code channel on Smashing MagazineUsabilityPostUsabilityPost is a blog about design. Design isn’t about what something looks like but about how it works. Making something usable means understanding what people expect from your product and thinking of ways to make their use of it simple and enjoyable. The aim of UsabilityPost is to provide relevant resources, tips and insights related to good design to help you make great products. UsabilityPost was founded by Dmitry Fadeyev in 2008.UsabilityPost websiteWeb Designer NotebookThis blog’s purpose is to shed light on CSS and front-end development for those who are starting out, while also going deeper into more complex areas such as CSS3. Created by CSS master Inayaili de León.Web Designer Notebook websiteLine25Line25 is the drawing board of creative Web design, a place where ideas and inspiration are drafted into articles, tutorials and round-ups of cutting-edge Web design. Created and updated by Chris Spooner.Line25 websiteLine25 channel on Smashing MagazineUX MagazineUX Magazine was created to provide a central place to discuss the critical disciplines that enhance user experience. An extraordinary user experience should be the goal of every interaction you deliver to users at any level. All too often, businesses (large and small) get it horribly wrong. It’s painful to watch and even worse when it happens to you.UX Magazine websiteUX Magazine channel on Smashing MagazineImpressive WebsImpressive Webs is an article and tutorial website dedicated to providing practical information on and solutions to common front-end Web development problems and issues. Created and updated by Louis Lazaris.Impressive Webs websiteImpressive Webs channel on Smashing MagazineWe are very pleased and excited to welcome these new members to the Smashing Network! We will do our best to continue promoting the best stories from the Smashing Network and to spread the word in social media.Bonus: The Smashing WordPress BookAside from the network updates, we have even more exciting news for our friends and fans. In cooperation with Wiley & Sons, we have just released Smashing WordPress: Beyond the Blog, a new book in the Smashing Magazine book series.The book shows you how to use the power of the WordPress platform, and it offers a creative spark to help you build WordPress–powered websites that go beyond the obvious. You will learn the core concepts needed to build just about anything in WordPress, resulting in faster deployment and greater design flexibility. The book was written by WordPress expert Thord Daniel Hedengren and costs $44.99 / €27.90.Chapter 1: Anatomy of a WordPress Install (PDF)Full table of contents including sub-chapters (PDF)Index (PDF)Buy the book in the Smashing Shop!What Do You Think?Your opinion has always been very important to us. Please let us know what you think of the changes and the widget, and let us know how you see Smashing Magazine and the Smashing Network evolving. We look forward to your constructive criticism and are open to your ideas and suggestions!Also, we will be adding more exciting features and revealing more exciting projects in the months to come, so please stay tuned for updates. Thank you.(al)© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: network, smashing
February 16 2010, 2:30am | Comments »
-
I posted to smashingmagazine.com
The Smashing Book: Join In!
http://www.smashingmagazine.com/2009/02/24/the-smashing-book-join-in/
No, we’re not giving anything away in this post. Instead, we’ve got some work to do, and we need you to play an important role in it. Our most interesting (and important) project for 2009 is something we are modestly calling “The Smashing Book”: a smashingly written, beautifully designed and professionally printed book. It will be created by and for the Web design community. Four key decisions have already been made: the book’s title will be “The Smashing Book”; it will be a paperback; the price is fixed, as is the release date, which is early September 2009.
We want to create a totally unique and exciting book, full of insightful and useful articles; a book that contains only articles that a reader of Smashing Magazine would really want to read. No fluff, no cruft, just hearty meat and potatoes content. To achieve this, we need the help of our community: your help. And what could be better than working on this important project together with our readers? If you want to participate in our project, please visit the forum (the registration is required for replies) and help in any of the following ways: 1. Suggest The Book Content First, you can suggest a topic for The Smashing Book. Let us know what you want to read and what topics we should cover. What enticing, creative, useful articles should be written? What should a Smashing Book contain? You can propose any topic you think would be great, but it must fit the small universe of Smashing Magazine and relate to design and Web development.
Once we receive your suggestions, we’ll evaluate them, filter and sort them. If necessary, we’ll open a second and third round of voting, which will (hopefully) help us select the most important and relevant topics. Afterward, we’ll present the final list of topics to our authors team, discuss the ideas with them and assign topics. Articles for the book can also be written by members of the Web design community. So, if you want to propose an article for the book, please suggest your idea in the Book topics forum. 2. Suggest The Cover Design (Front And Back) We want you to decide what The Smashing Book will look like. You can propose ideas for an unforgettable book cover design (any colors can be used), and you can also present your drafts in the Cover design forum. We’d love to see first drafts and invite forum members to discuss them, too! We haven’t decided anything about the appearance of the book yet, so free your imagination.
Suggest The Book Layout Help us decide on the perfect layout for The Smashing Book. How should it be designed? What typefaces should be used? What about font sizes, headings, columns, footnotes, image captions, page numbers, markup? What structure should the book have in general? We are open to your suggestions, so please participate in the Book layout forum: suggest your ideas and submit your drafts.
Help Us Out, And Spread The Word! We want you to be part of The Smashing Book. Help us out by designing some outstanding buttons, badges, banners, pins, icons, graphics and whatever else you can think of. We are confident that together we’ll achieve truly outstanding results, even if the process will be a long one and see the inevitable hurdles along the way. Of course, we will reward you! And as you would expect, we’ll also have small, exclusive rewards to give away to the most active helpers and participants. Thanks for reading. And now, let’s get to work! (al)
© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. | Permalink | 33 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: book, community, smashing
February 24 2009, 1:02pm | Comments »
-
I posted to smashingmagazine.com
Smashing Forum Launch and Books Giveaway
http://www.smashingmagazine.com/2009/02/09/smashing-forum-launch-and-books-giveaway/
The Smashing Magazine Forum is now officially launched. For a while, we have been working on its design, functionality and details, and today we are happy to finally welcome our readers to the new forum. The idea behind it is to provide our community with a place to discuss problems, developments and ideas, ask to questions and provide answers. You can also discuss Smashing Magazine’s articles or just chat with the members of our community about anything you want.
Okay, we know there are plenty of Web forums dedicated to design and Web development; but that didn’t really matter to us. We just wanted to have our own smashing place for our truly smashing readers. After all, in just over two and a half years of its existence, Smashing Magazine has managed to establish itself as a serious and quite popular online magazine. So what we want to achieve something simple yet extremely important with this forum: to bring the readers of our magazine together and offer them a nice place to exchange ideas. The readers are already there and have been here for a while; now they can talk to each other beyond the borders of our magazine. We Need Your Support! The forum is still very young and needs active members who are willing to help and contribute. So, we welcome everybody to check out the forum and browse its threads. Everybody can read most threads, but if you would like to participate in the discussion, you’ll need to register and log in first. It’s really no big deal, registering is easy, and members can customize their profiles however they wish. Everything is brand new: if you participate from the very beginning, you can have a huge impact on the forum, on the community and on its future. Comment In The Forum, Win A Book! And to celebrate the launch of the Smashing Magazine Forum, we are giving away 11 Web design-related books to our forum members. The winners will be selected randomly among all commenters in this thread. The winners will be announced this Friday, 13 February 2009, in the forum. To participate, just:
Register on the forum and log in. go to this forum post, Select the number (below) of the book you are interested in. Write it down in a reply to the post. On the next line, answer the question, “How can the SM Forum help me in future?” And you’re done!
Books You Can Win
# Cover Title Author
1
Universal Principles of Design Jill Butler, Hardcover
2
Swiss Graphic Design: The Origins and Growth of an International Style 1920-1965 Richard Hollis, Paperback
3
Don’t Make Me Think!: A Common Sense Approach to Web Usability Steve Krug, Paperback
4
The Design of Everyday Things Don Norman, Paperback
5
Designing Interfaces: Patterns for Effective Interaction Design Jenifer Tidwell, Paperback
6
The Art of Looking Sideways Alan Fletcher, Hardcover
7
The Principles of Beautiful Web Design Jason Beaird, Paperback
8
Hand Job: A Catalog of Type Michael Perr, Paperback
9
Web Standards Solutions: The Markup and Style Handbook Dan Cederholm, Paperback
10
CSS Mastery: Advanced Web Standards Solutions Andy Budd, Paperback
11
The CSS Anthology: 101 Essential Tips, Tricks and Hacks Rachel Andrew, Paperback
What Advantages Does The Forum Bring Me?
Communicate and exchange ideas with people like you across the globe. Ask questions that would be otherwise overlooked in the comments of posts. Help other designers, get a good karma and make your mark in the community. Suggest ideas and URLs, gain new insights and work with us on upcoming Smashing posts. Get in touch with the authors and founders of Smashing Magazine.
Apart from that,
We will use forum to ask for your suggestions for design showcases. You can help decide which articles get posted next on Smashing Magazine. Our authors will use forum to find new article ideas and help other members. You can take part in new contests and giveaways, which are on the way!
P.S. By the way, this post (and only this one) cannot be commented on. If you would like to discuss it, please go straight to the forum! Cheers and, most importantly, have fun! (al)
February 9 2009, 5:42am | Comments »
-
I posted to smashingmagazine.com
Ask SM [CSS/JS]: Pixel Width Decisions, Modal Boxes
By Chris Coyier This is our second installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. If you have a question about one of these topics, feel free to reach me (Chris Coyier) through one of these methods:
Send an email to ask [at] smashingmagazine [dot] com with your question. Post your question in our forum. You will need to sign up (yes, the forum is not officially launched yet, but it is running!). Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag “[Ask SM].”
Please note: I will do what I can to answer questions, but I certainly won’t be able to answer them all. However, posting questions to the forum gives you the best opportunity to get help from the community. 1. Different Color for List Item Bullets @christopherscot writes: I wish there was an easier way to specify color on list bullets… list-style-color maybe? Hey, Christopher. Alas, list-style-color does not exist. There are a couple of different ways you could go about it though. One way would be to wrap the content of each list item in a span, like this: <ul> <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></li> <li><span>Aliquam tincidunt mauris eu risus.</span></li> <li><span>Vestibulum auctor dapibus neque.</span></li> </ul> Then, in your CSS: ul { list-style: disc; color: red; }
ul li span { color: black; }
View Demo Another way would be to remove the bullets entirely by setting list-style-type: none. Then, apply a background image to the list items, making sure to nudge the text over to make room. ul { list-style: none; }
ul li { background: url(images/bullet.png); padding-left: 20px; } 2. Roll-Over Button @jonfreeze writes: How can I create a roll-over button but still be able to copy and paste text on the button? Hey, Jon. In order to make the text copy-and-pastable, the text needs to be real Web text. But we can still create a nice roll-over effect by shifting the background image of the button on roll-over. I like creating a special toolbox CSS class for buttons. So, anytime I need to make a link look more button-like, I just apply class="button" to any link or input button.
Here is the CSS: .button { padding: 5px 15px; background: url(images/button-bg.png) repeat-x; color: #222; border: 1px solid #ccc; font: bold 18px Helvetica; text-decoration: none; } .button:hover { background-position: bottom left; } Notice that all we’re doing is shifting the background position on roll-over, not swapping it for a new image. This has the double benefit of one less server request and a smoother, quicker transition. View Demo 3. Pixel Width Decision Jon Schwenn writes: I know more and more websites, especially the ones with high-quality design, are pushing wider. As I start a new project, I think about my client’s demographics and the purpose of the website. I just checked out the analytics report for one of the larger e-commerce websites that I run. There were about 1,300 visits from people whose resolution was under 1024 pixels wide. I then looked up the revenue generated from this group, and it was almost 5% of orders over the last 30 days. Is it still best practice to stick with the good ol’ 800 width? Or should I realize it’s 2009? What about the 5% of sales coming from 800×600 resolution set of computers? That’s still a decent chunk of sales to just toss aside and a decent chunk of people to annoy (and possibly lose) with a side-scrolling website.
Hey Jon, I think you already have the perfect mindset for making decisions about website width. You are looking at real analytics data of the website in question. That is exactly what you need to read to make the right call. I don’t think any business in the world would be willing to potentially lose 5% of its sales without a darn good reason. So the real question becomes: “Are there tangible benefits to designing wider than 800 pixels?” If you have cooked up a really sweet design that benefits from that extra horizontal room, that new design may just make up for that 5% and then some. But if you are widening just for the sake of widening or because of current trends, then don’t. Let the design itself guide you. If you can pull off everything you need and fit it nicely on an 800 pixel-wide monitor, do it. If you do go wider, make smart decisions about the viewable area for the 800 pixel crowd. For example, don’t put the “Add to cart” button on the far-right side, where it is liable to get cut off. For fun though, let’s look at more general statistics, supposing we were building a new website without existing analytics data. w3schools puts out screen-resolution data for its website every January. It doesn’t include 2009, but assuming the trend continues, it sees 5% or less of visitors with 800×600 monitors. Here are some other screen-resolution data from my own analytics: CSS-Tricks.com (audience of Web designers and computer-savvy people):
January 2009, 800×600 - 0.33% June 2008, 800×600 - 1.08% Most popular resolution: 1280×1024
BeaconAthletics.com (e-commerce website targeting school and government workers):
January 2009, 800×600 - 7.49% June 2008, 800×600 - 7.47% Most popular resolution: 1024×768
JewishStudies.wisc.edu (university website with audience of academics and press):
January 2009, 800×600 - 2.07% June 2008, 800×600 - 4.16% Most popular resolution: 1024×768
My advice? If your website is e-commerce or has an older and less computer-oriented audience, design to 800px (probably a maximum width of 775px). Otherwise, you are safe going wider, but perhaps stick to something around the popular 960px. 4. Bringing up Modal Page on Page Load Rich Staats writes: I would like to create a simple modal box that appears on document.ready, and not on a click event. This would be the “Latest contest” message to users, and I would like to use cookies to show it only once. But if possible, I would like to have the cookie cleared when a new contest message is created. Even if cookies were cleared on the 1st of every month, we could work the contests around that. Hey Rich, rather than re-invent the wheel with modal boxes, I went in search of a jQuery plug-in that could handle it. One of the first ones I checked out, jqModal, fits the bill nicely. Some modal box plug-ins only provide a function that you can call with certain elements, which will bring up the modal box on a click event, but this one has an additional function that allows the modal box to come up via an independent function. This is just what we need, because we aren’t waiting for a click; we want to open it after a cookie check. Since we are already using jQuery, we might as well make it easy on ourselves and use a plug-in for the cookie work as well. This gives us some new functions that make it really easy to set and get cookies. Turns out, we can accomplish your task pretty darn easily with these plug-ins. Here is the whole bit, including all the includes and loading jQuery itself. <script src="http://www.google.com/jsapi" type="text/javascript\"></script> <script type="text/javascript\"> google.load("jquery", "1.3.1"); </script> <script src="js/jquery.cookie.js" type="text/javascript\"></script> <script src="js/jqModal.js" type="text/javascript\"></script> <script type="text/javascript\"> $(function(){ var modalCookie = "modal_cookie\"; var options = { path: '/', expires: 10 }; var shouldOpen = $.cookie(modalCookie);
$('#dialog').jqm(); if (shouldOpen != "no") { $('#dialog').jqmShow(); $.cookie(modalCookie, 'no', options); }; }); </script> In your markup, the page element with the ID of #dialog will be used for the modal box. You can put whatever you want in there! The cookie in this example lasts only 10 days, but you can easily change the expires number in the code above. If you wanted to “clear” the cookie early, just change name of the cookie. View Demo | Download Files 5. Tabs on the Left Eric Rasmussen writes: I am looking for a simple way to create tabs on the left side of a file browser, similar to the file browser in MobileMe. Here is an example of what I am am trying to accomplish. Hey Eric, I think the ticket here is to create a two-column layout. I understand the ultimate goal is probably to have more columns than that, but I’ll get you started here with this example, and then you can take it from there. To visually separate the columns, we’ll use color variation. Right off the bat, we run into the classic problem of making the columns equal in height. We’ll get around this by using “faux columns,” which is a classic technique of “faking” equal-height columns by wrapping both columns in another element and setting a background image on that.
Our left column is simply an unordered list, and the right is a div where we can put content. Here is the entire markup: <!-- For centering and faux columns --> <div id="page-wrap">
<!-- Left Column --> <ul id="nav"> <li class="current"><a href="#">Home</a></li> <li><a href="#">Documents</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Movies</a></li> </ul>
<!-- Right Column --> <div id="content"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p> </div>
</div> Notice the class of current on the first list item. We’ll use this CSS hook to apply special styling that will visually link that tab to the right column. A slight shadow will be applied to the other tabs (via a background image) to make them look tucked under. Here is the important CSS:
page-wrap { width: 500px; margin: 30px auto; border: 1px solid #999;
background: #eee url(images/nav-bg.png) repeat-y; overflow: auto; }ul#nav { list-style: none; width: 140px; float: left; padding: 10px 0 10px 10px; } ul#nav li { margin: 5px 0; } ul#nav li a { padding: 8px 3px 8px 10px; display: block; text-decoration: none; font: 18px Helvetica; letter-spacing: -1px; color: #222; outline: none; background: #666 url(images/nav-bg-off.png) top right repeat-y; } ul#nav li a:hover, ul#nav li a:active { border-left: 3px solid #999; }
ul#nav li.current a { background: #eee; border: none; }
content { width: 340px; float: right; padding: 15px 0; }
View Demo | Download Files As a bonus in the demo, I included some jQuery to dynamically swap the content and change the “current” tab as you click through the tabs. Check out the code! (al)
February 5 2009, 3:42pm | Comments »
-
I posted to smashingmagazine.com
Smashing Magazine Comic Strip: Episode 1
http://www.smashingmagazine.com/2009/01/16/smashing-magazine-comic-strip-episode-1/
A couple of weeks ago we celebrated Cartoons and Comic Strip Art and, to be honest, there was a good reason why we took some time to research on this topic. The truth is that we are pretty tired of the same kind of content appearing in the Web over and over and over again. During our winter break in December we came up with some new ideas, concepts, formats and projects that we will try to achieve with Smashing Magazine in 2009.
Discussing new formats for SM, we came up with the idea of creating a weekly cartoon that would cover recent developments in web design and in the Web in general. In December we stumbled across Paddy Donnelly’s blog, the home of a talented web designer and illustrator in Belfast, Northern Ireland and we’ve seen that Paddy is actually creating a comic strip on his blog. After a couple of e-mails we were pretty sure: we are going to have a regular comic strip, exclusively on Smashing Magazine and exclusively for Smashing Magazine readers. In this post we present the first episodes of the new Smashing Magazine cartoon / comic strip. We are very excited about this new section in our magazine and we would love to hear your opinion about it! Please feel free to post your ideas, suggestions, remarks and critique in the comments to this post. Please also suggest story lines - e.g. what are the things that frustrate you most about the Web or web design? And, most importantly, have fun!
What do you expect from SM comic strip? ( polls)
January 16 2009, 10:15am | Comments »
-
I posted to smashingmagazine.com
Smashing Highlights 2008
http://www.smashingmagazine.com/2008/12/22/smashing-highlights-2008/
2008 was a successful year for us and for Smashing Magazine. Reviewing what has happened on Smashing Magazine over the last year, we could have told a couple of impressive stories that happened here and there, but we won’t do that. Instead, we would like to take a rather critical look back and discuss what we’ve done and what has changed in 2008. And in fact, many things have changed. The magazine has grown with the tremendous help of articles written by Steven Snell, Jacob Gube, Vailancio Rodrgiues, Dmitry Fadeyev, Andrew Lindstrom and other truly smashing contributors. We express sincere gratitude to our authors for all the ideas and hard work they’ve put into their articles. We also express sincere gratitude to Andrew Lobo, who has been catching errors, typos and grammatical mistakes in our articles before they get published (since summer 2008).
We also genuinely thank our readers for your attention, criticism, ideas, suggestions and numerous emails and links over the last year. We have tried our best to improve the quality of our articles and increase its value for designers and developers. In this post, we review what has happened on Smashing Magazine over the last year: smashing highlights, setbacks and small sensations of 2008, in a brief overview, month by month. You can also compare the highlights of 2008 with those of 2007 (which, by the way, include links to some really useful articles). January If you need backlinks, try compiling a list of beautiful Wordpress themes. Our post 100 Excellent Free WordPress Themes has gotten over 850 backlinks since January 2008. Not bad for one post.
In January, we kept busy discussing the hand-drawing style and grunge trend in modern Web design. Some of our readers got excited, some were disappointed, but the trend indeed developed and is still apparent today. Our readers found our article 10 Principles Of Effective Web Design useful and the review of innovative designs and devices quite inspirational. And so did we!
February We start thinking about developing the Smashing community and offering new services and new ways to make the magazine even more useful. For instance, we consider releasing freebies and inviting professional authors to post articles. Result: in February, we launch our first “Smashing project”: Smashing Jobs, and since then several hundred companies with vacancies have been searching for the right talent among our readership.
We continue to pay attention to essential design elements, such as navigation menus, but also start to pay closer attention to small design details — for example, reviewing best practices for the design of date stamps and shopping carts. The best posts of the month are eye-catching and useful: one showcases (really) stunning desktop wallpapers, another presents powerful CSS techniques for effective coding.
Probably the most inspirational article of the month takes a look at award-winning newspaper designs. Unexpectedly, we gain a lot of backlinks and references from small and huge blogs. And our commenters are happy! Now, that doesn’t happen too often! March In the beginning of March, we’re concerned with useful guidelines for creating a successful online portfolio and developing a grid-based design. We discover that many readers find the post about Adobe Fireworks Tutorials and Downloads extremely useful and find Adobe Fireworks itself really underestimated. Maybe we should prepare another article on Fireworks in 2009.
We find out that our readers just love to see beautiful photos. The best article of the month is, without a doubt, the showcase of HDR pictures. Some readers love it, some readers hate it, but traffic never lies. In March, we launch our Desktop Wallpaper Calendar series. Everybody can participate and feature his or her work in our magazine by submitting a desktop wallpaper for the upcoming month. Our first is the one for April 2008.
All wallpapers are designed by our readers. We have published over 350 wallpapers from over 100 designers so far. Because we offer them in various resolutions and formats, the result is over 2200 files, with a total size of 770 MB. The series will continue until February 2009, so don’t miss your chance to join in for the next 2 months. By the way, the January 2009 edition is coming soon! April April at Smashing Magazine is full of beautiful photos. (Really) Stunning Pictures and Photos is one of the posts with the most comments in 2008. The photos for the post were collected over two and a half weeks, yet some readers complain that we “push” articles that don’t meet our quality guidelines and that we collect them “in a rush.” We keep it in mind in preparing posts for subsequent months.
In April, we observe a large increase in retro and vintage websites on the Internet, which is why we prepare a post on retro and vintage designs. Yes, we love retro, and we love vintage, and we certainly love Web designs that combine these styles!
Apart from that, we discuss Web form design and PNG transparency. And we also pay tribute to beautiful lettering and book covers. May An outrageous scandal in May! We decide to discontinue our “Best Of” series. Reason? The posts always take way too much work and don’t get enough traffic (compared to other articles). Still, we continue to collect useful references and bookmark them; they’ll all be presented in one-off posts. At the beginning of May, it’s all about pixels, baby! Pixels Go Mad, and we get a huge amount of backlinks and positive feedback in the comments.
We look for new ideas and new concepts for our articles. We decide to conduct a thorough review of WYSIWYG editors, CSS editors and other source-code editors. We select the most advanced tools in each category, install them all, test them, compare them and present the results over a few posts. A great amount of time went into preparing these three articles. Our readers appreciate it and comment on the articles with new suggestions and some really useful alternative editors. We also announce a contest that ends up receiving the most entries so far: the Smashing Texture Contest, a collection of various textures that can be downloaded and used for free. We receive over 740 emails from over 600 participants, resulting in way more than 2000 photos.
June We invest three weeks in preparing and conducting a thorough study of the most influential blog designs in the blogosphere. We identify 30 design problems and analyze how 50 popular blogs solve them. The results are presented in two parts: A Small Design Study Of Big Blogs and A Small Study Of Big Blogs: Further Findings. Our readers appreciate our efforts, and we know exactly what articles they want.
We set a new personal (and maybe even world) record: our books giveaway post has 3,875 comments, is 2.5 MB in size and takes 35 seconds to load. Because we don’t want any extra server load, the article isn’t linked. Be prepared: new giveaways are already on the way. We also announce the Style Switchers Contest, with the modest prize of an Apple Cinema 20″ flat-panel display.
For the first time in a long time, professional, profound discussions take place in the comments. The article Flexible Layouts: Challenge For The Future sparked an interesting discussion — in our magazine and in the design community. We are proud of our small but strong and knowledgeable community. And we take pointers and new guidelines for us and our authors. July In July, we believe in the beauty of pop art. We don’t gain much traffic with the post, but we get a lot of new and interesting ideas and suggestions for further posts. We spark new discussions by publishing the controversial article Should Links Open In New Windows? Some readers think we have no idea, others support us, and readers gain new insight from practice and from professionals. We are harshly criticized, but we are happy: professional discussion is taking place in the magazine, and that’s what we’ve been after for a long time!
Probably the most important contest for Smashing Magazine this year is the Smashing Author Contest in August. Its main goal: find good professional authors for the magazine. We receive 252 submissions. The choice is tough and time-consuming, because we want a nice mix of various articles represented in the contest. In the end, we select 15 articles and publish them. The winner is the author of a post about the top 10 CSS-based table designs and is awarded an Apple MacBook Air. It turns out the winner lives in Indonesia. You can imagine then that delivery of the prize is quite adventurous… and expensive. But we don’t care.
We also conduct an extensive study of Web Form Design Patterns (part 2) and suggest some guidelines for the design of beautiful and effective Web forms. Our readers are partly overwhelmed, and we are completely off our schedule — and tired, too! August In August, our magazine is full of posts from the participants in our Smashing Author Contest. Unfortunately, some readers don’t understand why Smashing Magazine suddenly changed its format and publishes briefer articles more frequently. We try to offer “traditional Smashing” posts as well, and we succeed with appealing posts about 10 Futuristic User Interfaces and 5 Useful Coding Solutions For Designers.
One of the most popular articles is our showcase of 45 Motion Blur Photos. This is among the very few posts that don’t get the “Worst post ever” comment that starts to wander through our posts in August.
In August, we start Twittering behind the scenes. We have been aware of various lifestreaming applications for a couple of months now, and we decide to try one out and see how it works. To be honest, we are quite skeptical at the very beginning, but we get used to it. And we use Twitter almost every day now.
September In September, Smashing Magazine celebrates its 2nd anniversary. We contact the talented artist James White and ask him to create a beautiful, exclusive poster for our anniversary. We print 10 posters and give them away to our readers. The giveaway post gets over 1700 comments. Please don’t try to load the page now: your browser may crash, and our server may encounter some serious problems.
September is also “toolbox” month at Smashing Magazine. We come up with the idea of collecting the most useful resources and tutorials for the most popular content management systems. We start with WordPress and Drupal, and in the next months ExpressionEngine, Textpattern and Movable Type are covered as well. Thanks to the hard work of our brilliant author Steven Snell (applause, please). The award for the most inspirational post of the month goes to 40 Creative Design Layouts, with few comments, few backlinks and little traffic, but many truly creative ideas.
We also take a closer look at the programming side of Web development. We review version control systems, present useful JavaScript techniques and suggest best practices for jQuery. October October sees the most articles published on Smashing Magazine in any month. We offer our readers various types of content, a good mixture of different things, we risk new ideas and release a couple of freebies. And it works! Well, partly. Some articles don’t get the attention they deserve: Showcase of Pricing Tables gets only 59 comments, and Vintage and Retro Typography only 78 comments.
Our readers complain about too few Web design-related posts. We respond with showcases of retro and vintage websites and beautiful blog designs.
The most successful posts of the month are Jacob Gube’s Ultimate Collection Of Useful Photoshop Actions (applause, please) and Steve Snell’s collection of Best Adobe Illustrator Tutorials. We appreciate it and increase the payment to our authors. November In November, Jacob Gube strikes again with 15 Helpful In-Browser Web Development Tools. The article spreads like a virus in social media. Steven Snell explores Newspaper Website Design and comes up with interesting trends and examples.
We also declare war on cluttered, unreadable code and present Principles For Keeping Your Code Clean. And in the post about Billboard Top 40 Design Showcase, our community agrees that music industry websites are in trouble: the websites just look bad, both from aesthetic and usability points of view.
December In December, we once more show our love for small design details. We explore various ideas and techniques for designing the search box. Jean-Baptiste Jung shares useful RSS and SQL hacks for WordPress, and Dmitry Fadeyev discusses 10 useful techniques for improving your user interface design.
We also return to our roots and provide our readers with well-researched posts on CSS and graphics: one showcase on dual-screen wallpapers and another on CSS tools. Neither article gets as much traffic as we expect, and we are a little bit disappointed, but we know we did the right thing and that these articles are the kind our readers expect.
Meanwhile, Steven Snell collects custom shapes for Photoshop, Dirk Metzmacher takes care of Christmas Photoshop tutorials, and Jacob Gube looks around for Digital Photography Photoshop tutorials. This has been a trend throughout 2009; in fact, we have never delivered as many tutorials and resources on Adobe Photoshop, Illustrator and Fireworks as we did in 2008. And we’ll definitely continue this in 2009. Freebies, freebies, freebies Since the very beginning of the year, we’ve been releasing freebies in our magazine. In the end, we released so many freebies that we had to create a new category for them. So far, we have released over 60 free icon packs, brush sets, WordPress themes and vector graphics. In fact, many readers complained about “way too many freebies” in our magazine, another reason we ask our readers for their opinion. The poll results were quite clear, and now we know exactly what our readers expect and what we have to do to meet those expectations. In the next year we’ll release fewer freebies, we’ll revise our quality guidelines and we’ll release only the best ones.
Exemplary results of our cooperation with various designers worldwide are the WordPress theme Notepad Chaos, designed by Evan Eckard, and the Dellipack No. 2 icon set designed by Wendell Fernandes. Smashing Team in 2008 Smashing Magazine is not just Vitaly Friedman, Sven Lennartz and Michael Dobler. The magazine couldn’t exist without the tremendous support of our brilliant Smashing team. Here are some of the people who helped our magazine over the last year. Thanks, guys, we really appreciate it.
Andrew Lobo is happy to have had a little Smashing in his life in 2008. He edited a good chunk of the magazine’s posts this year. Based in Toronto, Canada, Andrew runs Edit Owl, an editing service for online news and blogs.
Jeff Gardner is a business nerd. He loves Excel, making graphs and helping companies figure out how to perform better. He also enjoys writing, building websites, photography and being outside. You can check him out at his blog or look at some of his photos on his photography site.
Dmitry Fadeyev is the co-founder of the Pixelshell web design studio. He enjoys creating functional websites and is especially interested in all the small details that add up to make great user interfaces. Dmitry also runs the Usability Post blog where you can read his thoughts on good design and usability.
Chris Coyier is a web designer, wannabe developer, and amateur banjo player currently living in Portland, Oregon.
Jean-Baptiste Jung is a 26 years old* blogger/web developper/web designer who lives in the French-Speaking part of Belgium. Jean-Baptiste maintains two blogs: Cats Who Code where he and other authors write about Web Development, Web design, Blogging tips and WordPress, and WpRecipes where Jean shares useful WordPress snippets on a daily basis. When he’s not blogging or having fun with codes, Jean loves to spend time with his wife and cat, and travelling everywhere he can (*until january 12 ;o)).
Jacob Gube is a web developer, designer, and founder of Six Revisions. He has 9 years of experience being a web professional, starting out as a freelance graphic designer building brand identities of small to medium-sized companies and now currently works as a web developer/web designer.
Steven Snell is a web design from the U.S. who is active in the design blogging world with his own blogs and as a freelance writer.
Andrew Lindstrom is a freelance web designer based in Vancouver, Canada. When not geeking out over design, he’s likely geeking out over film, technology or pretending to play the guitar.
Torley Wong amplifies your awesome with the useful and fun. His passions include origin stories about art, audio engineering, and using the Web to inspire and enlighten.
György Fekete is a freelance web developer since 2004 also working for other companies. “Living in Romania my main goal is to deliver beautiful and more importantly accessible websites to people. In 2007 I started my own web design company called Primal Skill. I learned a lot on how to run company and deal with large projects. I’m still learning.”
Cameron Chapman is a web designer, graphic designer, and freelance writer based in Northern Vermont. She writes for a number of blogs and is currently working on a variety of fictional works, including three novels.
Sachin Dhall is a Software Engineer and an amateur blogger behind QTP Blog.
When Glen Stansberry isn’t writing about creativity or web development, he’s performing music or running marathons. You can follow him more closely at Twitter.
Vailancio Rodrigues, born and currently living in scenic beauty of Goa, spent most of his childhood in art and creativity. At present a College student doing his studies in Science and Computers, like to try and do different thing at every moment. Also an emerging webmaster – Tiny Goa and author of Technology Tips, which provides reviews, tips and tricks for various gadgets.
Robert Bowen is a freelance copywriter, activist, and celebrated podcaster who explores many facets of the written word. From poetry to prose, from novel to screenplay, Robert lets his pen know no bounds. He is currently writing for five blogs on a regular basis, as he fills his role as the second creative half of the Arbenting dynamic duo!
Ann Edwards is a web designer and developer from the Midwest. Her blog is comprised of the many various issues dealing with web development.
Daved, aka Danny Outlaw has an obsessive fetish with sharpie markers, toys, and all things design-related. He has been working hard at improving his skills and business and has big plans for 2009. Smashing Magazine in 2009? We would like to know your opinion. Smashing Magazine wouldn’t be possible without out readers. Therefore please let us know: how should Smashing Magazine change in 2009? What topics (except “traditional” topics such as web design) should Smashing Magazine cover in the next year? Your opinion is very imporant to us. Please vote in the poll and comment on this article — you can change the magazine and make it more useful for you and your colleagues. Thanks! How should Smashing Magazine change in 2009? ( surveys) What new topics should SM cover in detail in 2009? ( surveys) We’ll do our best to deliver useful and inspiring high-quality articles in the new year. We’ll come up with new ideas to keep Smashing Magazine an exciting place. And we’ll be listening to your ideas, suggestions, complaints and criticism. Merry Christmas and Smashing New Year! (al)
December 22 2008, 2:16pm | Comments »
-
I posted to smashingmagazine.com
Smashing Pumpkins: A Free Halloween Vector Icon Set
http://www.smashingmagazine.com/2008/10/27/smashing-pumpkins-a-free-halloween-vector-icon-set/
As the Halloween is approaching, it’s best time to spice up your design with some quick Halloweenish icons. And since we are, apparently, smashing and the Halloween is all about pumpkins, we decided to release Smashing Pumpkins: A Free Halloween Vector Icon Set. This set includes 14 exclusive Halloween icons (.png, up to 512×512px) as well as vector sources (.ai CS3 file and .eps file), so you can modify and scale them as you wish. This set was created by Pien Duijverman from Netherlands, especially for Smashing Magazine and its readers. 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. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.
preview (0.2 Mb) download the set (.zip, 2.1 Mb, including .png, .jpg, .ai and .eps)
Last But Not Least We are constantly looking for creative designers and artists. You may not know it yet, but we may feature you in one of our upcoming posts. If you would like to release a free high-quality font, a Wordpress theme, Photoshop brushes, a Drupal theme, some wallpapers or an icon set, please contact us. We would like to support you (both financially and with the broad readership of Smashing Magazine).
October 27 2008, 10:29am | Comments »
1 2