Editor’s Note – Though Noupe is affiliated with Smashing Magazine, this piece is strictly the opinion of the author.

When I was first contacted with a reviewer’s copy of The Smashing Book #3 I was both excited, and a little bit terrified. I was extremely excited to get a peek at the book before its release, and to get my hands on the content I had eagerly been anticipating since the project was announced. I was a bit terrified because the book’s theme of ‘Redesign the Web’, was not only one I had written on in the past, but after redesigning our own sites not long ago, I was afraid to find out that we had done it all wrong.

All the fears aside, with the first two books as part of our design reading library, I had no doubt that this third tome would live up to its predecessors. And I would not have to get too far into the book to be proven right.

A Smashing Introduction

As I dove right into the book’s first chapter on The Business Side of Redesign, I was inundated with so much practical, applicable advice on how to present a redesign project to clients and how realigning is the much better route. Which was nice to read after the initial fears of finding out we had redesigned our own personal sites incorrectly had surfaced, but as big believers in realignment, the book was somewhat reassuring. This was just an added bonus.

As the chapter went on, I found myself glad that I was reading a digital copy. Had it been an analog version, I would have been running through highlighters by the dozens. Nearly every page presented me with great information too mark and make note of. This trend did not stop at the first chapter’s end either. The entire book proved to be packed of notable advice from the crack crew that Smashing assembled for the team. And every single one of them, brought their ‘A’ game.

If you haven’t seen the breakdown of the authors and reviewers for each chapter, then you really are in for a treat. It reads more like a web design and development dream team than an actual book roster. But when you look at all that went into the book, the budget, time, and the expertise, you begin to understand just how fantastic a book it has the potential to be. And with each chapter I took in, those expectations of the book’s potential were constantly exceeded.

The Chapters

As previously mentioned, the first chapter deals with the business side of the website redesign, which is a really great introduction because it hints that the further chapters beyond it will help complete the picture, and that all aspects of the redesign will be handled. And that is one of the best things about the book. It does such a good job ensuring that you get the whole picture.

Each of Smashing Book #3′s 11 chapters goes through all facets of a redesign, from beginning to end, with a fine tooth comb. No detail is overlooked, and if you get your hands on ‘The Extension’, Smashing Book #3 1/3 you also get a case study of the Smashing Magazine redesign to show all of the thoughtful advice applied in a real world setting; which sounds like a very intriguing companion read. Admittedly, I have not had the chance to check that out yet.

One of the most information packed chapters that I was really surprised by, was chapter 7 ‘Designing for the Future Using Photoshop’ from Marc Edwards and Jon Hicks. The chapter was as unexpected as it was informative, and really grabbed my attention. Not that there were any chapters where the content felt lacking, but this chapter just seemed to really overflow with its detailed dissection of Photoshop. And in a completely accessible way.

Which is actually one of the highlights of the entire book. The accessibility it provides to the subject at hand. Redesigning the web. No matter what element you are tackling, or if you are in charge of the whole thing, all that you need to steer your redesign project towards success is contained in the chapters of this book. And with information geared towards all parties involved, it really should be required reading for anyone working or hiring for a redesign. I can see it being something of a survivor’s guide to future projects. Always within reach.

Chapter 8, Redesigning With Personality from Aarron Walter and Denise Jacobs, contains one of my favorite sections that really challenged me to think of websites in a different way. Products Are People Too did a good job of taking a complex issue, and boiling it down into a very digestible manner. We are often told that we need to build trust through brands and design, and this chapter delivers the goods on cementing that trust by adding in personality. From the chapter’s first line, “Redesigning a website can be the seven-layer taco dip of hell” I was sold. Because I knew that feeling.

The last chapter I will talk about specifically before I move on, was Chapter 10 Workflow Redesigned: A Future Friendly Approach by Stephen Hay and Bryan Rieger, which was another example of challenging me to approach future projects differently. With responsive web design being an important aspect of any web design project these days, this chapter comes in and lays out a plan of attack that I am sure readers will be adopting for themselves. It will certainly at least get people talking about it.

The Fun

Just like Smashing Magazine and the team behind it, Smashing Book #3 is loaded with personality and a lot of charm. From the title of the book being spelled out through the chapters colorfully illustrated drop caps to the playful nature’s of many of the book’s authors, the book is as much fun as one would expect. They have even said that there are hundreds of animals hidden in the book’s illustrations, so that you can go on a bit of a scavenger hunt to see if you can find all 623 of them.

Overall, the journey it takes you on from beginning to end is entertaining, well constructed, highly communicative, and as mentioned challenging. It doesn’t just make you want to be a better designer or developer on your projects, it gives you actual steps to take and ways to accomplish it. And where some books tend more towards theory, with so many talented experts coming to the table to offer real world advice and examples, this book takes the theories and arms you for putting them into practice.

The Conclusion

I thoroughly enjoyed the Smashing Book #3 and would recommend it for anyone in the field or with a site of their own. It gives great insight into where the industry currently stands, and how to take on these often monster projects with a bit more ease and confidence. Are you planning on grabbing a copy, or do you already have one on the way? What entices, or intrigues you the most about this newest Smashing book?

(rb)

In the following Adobe Illustrator tutorial you will learn how to create a semi-realistic lifebuoy graphic. We’ll start with a bunch of concentric circles and some basic vector shape building techniques. Once we create the starting shapes we’ll continue with some Pathfinder options, several Warp and Gaussian Blur effects plus some basic masking techniques.

For the highlights we will use some simple blending techniques along with a set of linear gradients. Finally, we’ll need a simple, dashed stroke, the Rounded Corners effect and some discrete Drop Shadows. The final illustration is easily editable so it won’t be difficult for you to pick different colors for your lifebuoy.

As always, this is the final image that we’ll be creating:

Step 1

Hit Control + N to create a new document. Enter 600 in the width and height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 5px.

Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Ellipse Tool(L) and create a 255px circle. Fill it with black, lower its opacity to 30% and go to Object > Path > Offset Path. Enter a -60px Offset and click OK.

Step 3

Reselect the two concentric circles created in the previous step, open the Pathfinder panel and click on the Minus Front button. Fill the resulting compound path with R=241 G=242 B=242, increase its opacity to 100% and move to the Layers panel. Double click on it, name it "Body" and make a copy in front (Control + C > Control + F).

Step 4

Pick the Ellipse Tool(L), create a 195px circle and place it as shown in the first image. Select this new circle along with the copy created in the previous step and click on the Divide button from the Pathfinder panel. Move to the Layers panel and you will find a new group with three simple shapes. Open it, delete the small circle then ungroup (Shift + Control + G) the remaining two compound paths.

Step 5

Focus on the two compound paths created in the previous step and fill them with the linear gradient shown below.

Step 6

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect "Body" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and hit the up arrow three times (to move it 3px up).

Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes and turn it into a compound path (Object > Compound Path > Make). Fill it with R=134 G=139 B=145, lower its opacity to 30% and bring it to the front (Shift + Control + ] ).

Step 7

Reselect the second compound path edited in the fifth step (the large one) and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes and bring it to the front (Shift + Control + ] ).

Open it, select the top shape, fill it with white and go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK. Keep focusing on this group, select the bottom shape, fill it with R=134 G=139 B=145 and go to Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK.

Step 8

Reselect the first compound path edited in the fifth step (the small one) and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes and bring it to the front (Shift + Control + ] ).

Open it, select the top shape, fill it with R=134 G=139 B=145 and go to Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK. Keep focusing on this group, select the bottom shape, fill it with white and go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK.

Step 9

Reselect "Body" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes and turn it into a compound path (Object > Compound Path > Make). Fill it with white, lower its opacity to 30% and bring it to front (Shift + Control + ] ).

Step 10

Reselect "Body" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (Object > Compound Path > Make), fill it with white, lower its opacity to 70% and bring it to front (Shift + Control + ] ).

Step 11

Select all the shapes created in the last five steps and group them (Control + G). Reselect "Body", make a copy in front (Control + C > Control + F) and bring it to the front (Shift + Control + ] ). Fill it with white and open the Transparency panel. Select this white compound path along with the group created in the beginning of the step, open the fly-out menu of the Transparency panel and click on Make Opacity Mask. In the end your masked group should look like in the fourth image.

Step 12

Re-enable the Snap to Grid (View > Snap to Grid), pick the Ellipse Tool(L), create a 195px circle and place it as shown in the first image. Fill it with none but add a 30pt stroke. Set its color at R=150 G=150 B=150 then go to Object > Path > Outline Stroke. Select the resulting path and change its blending mode to Overlay.

Step 13

Reselect "Body" and go to Effect > Stylize > Drop Shadow. Enter the data shown in the left window, click OK then go again to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK.

Step 14

Pick the Ellipse Tool(L) and create a 265px circle. Fill it with black, lower its opacity to 30% and place it as shown in the first image. Pick the Rectangle Tool(M) and create a 65 by 75px shape. Fill it with R=255 G=30 B=45, lower its opacity to 30% and place it as shown in the second image.

Step 15

Focus on the red rectangle created in the previous step. Pick the Direct Selection Tool(A), select the bottom, left anchor point and move it 10px to the right then select the bottom, right anchor point and move it 10px to the left. In the end your red shape should look like a trapezoid (image #2). Make sure that it’s still selected and go to Effect > Warp > Bulge. Enter the data shown in the following image, click OK and go to Object > Expand Appearance. Select the resulting shape along with the circle created in the previous step and click on the Intersect button from the Pathfinder panel.

Step 16

For this step you’ll need the Round Any Corner script. You can find it here. Save it to your hard drive then return to Illustrator and grab the Direct Selection Tool (A). Focus on the red shape edited in the previous step, select the four anchor points highlighted in the first image and go to File > Scripts > Other Script.

Open the Round Any Corner Script, enter a 5px Radius and click OK. In the end your shape should look like the second image. Reselect it and got Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Object > Expand Appearance. Finally, select the resulting shape and increase its opacity back to 100%.

Step 17

Select the red shape created in the previous step and go to Object > Transform > Rotate. Enter a 180 degrees angle and click on the Copy button. This will create a vertically flipped copy. Select it, drag it down and place it as shown in the second image. The Snap to Grid should ease your work. Reselect both red shapes and go again to Object > Transform > Rotate. This time enter a 90 degree angle and click on the Copy button. In the end you should have four red shapes placed like in the fourth image.

More on Page Two

This new Adobe Illustrator tutorial isn’t quite finished yet! There is more waiting for you over on page two.