 |
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.
Elliot Jay Stocks introduces the new Smashing Book #3 by making us think about our workflow, the quality of our work, our industry and our community. Working in an industry that evolves at an incredible speed takes a lot of effort—at the same time, it’s what keeps us going.
A redesign is the best thing that a Web designer can experience. Yet before leaping head on into a project, we must consider the business behind the redesign. By its nature, a redesign has the potential to make a website successful, but it also has the power to destroy a perfectly good idea. Important considerations to keep in mind before engaging in a redesign project include common dangers, required research, the working process with the client and testing. Paul Boag leads you through this process step by step.
Once you have understood the business side of the redesign project, the next step is to choose the right platform. Understanding all of the requirements of a project will save you valuable time in aligning the new functionality with the technological circumstances. Take stock of existing structures such as the CMS, e-commerce system and payment gateway. Beware of the project constraints, including the budget and wishes of the client. Only then will you be able to concentrate fully on the project, without encountering unpleasant surprises ahead.
Ben Schwarz takes away the fear that many Web developers suffer when confronted with a new technology—by encouraging experimentation. The chapter guides you through the new HTML5 elements and discusses the possibilities that come with the adaptation to these elements. This is a practical, compact guide to HTML5, with everything you need to know today in order to create flexible and maintainable websites for the future.
Some CSS workarounds that have hung around from earlier days prevent us from becoming better, more efficient designers. Learn how to recode CSS to reduce the number of images, HTTP requests, presentational JavaScript and wrapper divs on the page, while making the style more flexible and maintainable. Learn about the rem unit, Flexible Box Layout, source-order independence with flex order, multiple backgrounds and gradients, background clipping, border images, transforms, transitions, box sizing and new CSS3 selectors. Restyle, recode, reimagine: because CSS3 is here to stay!
Even though jQuery is written in JavaScript, it is not the same; nor is it native to browsers. The large jQuery library abstracts away a lot of issues that Web developers face, yet sometimes it’s used without a real purpose. Christian Heilmann takes us back to its origins and shows us how to implement simple JavaScript solutions without resorting to jQuery, achieving the same result in a slimmer and less process-intensive way.
User experience means good design, and the central aim of design is not to decorate, but to solve problems. Whether that means getting more sign-ups, inviting users to post more content or making the interface easier and faster to use, this is ultimately the sort of design that delivers a great user experience. This chapter features powerful UX techniques that you can easily apply to your products and websites. Make sure users stay on your website for the right reasons, and get an edge over the competition by improving user-targeted processes. Also, explore experimental approaches and avoid some misleading design techniques.
Because good design and user experience are almost mandatory for success today, the lines between desktop software, mobile software and the Web are increasingly blurry. We have to continually change our tools and techniques to meet new requirements. Marc Edwards addresses some of the challenges that Web designers face today and will in the future when using Photoshop. Realism, scale, screen sizes, resolutions, formats, techniques—this chapter touches on all of it. There is no reason to surrender to scaleability and liquid image requirements when using Photoshop!
Any design that does not effectively establish a connection with its audience has missed its goal. Getting to know your user is just as important as knowing yourself and the personality behind the brand; this will set you apart from competitors. This chapter describes how to develop your own design persona and define the key characteristics to guide your project’s path. New technologies and techniques are not what build connections with users, but rather the empathy evoked by the personality behind them. Aaron Walter explains how to bring out the personality at the heart of your work.
The native vs. Web debate is meaningless and counterproductive. All products nowadays have high demands for UX design. Web designers turn into UX designers by gaining specialized knowledge of the Web and by mastering auxiliary frameworks and their components. Not only do the aesthetics of an interaction object count, but also how the object behaves upon contact. Designing documents and designing applications requires knowledge of basic responsive design principles and progressive enhancement. This chapter helps you understand your medium, explains what exactly it means for an application to be “native,� and goes over how to choose the right tools and technologies for the job.
Web design changes quickly. In multiplatform design, where websites and apps are used on many and varied devices, we are confronted with multiple destinations. How do you go about integrating as many devices as possible? Is targeting as many different platforms as possible really important? In this chapter, Stephen Hay suggest a new design workflow for responsive Web design. A new way of thinking leads to a new way of design—the sooner you get the hang of it, the sooner you will be ready to discover what works best for your projects.
There are significant upsides to responsive Web design for designers, especially in workflows that embrace flexibility. Responsive Web design still asks more questions than it answers, and it challenges the working relationships and interactions between everyone involved in every process. Andy Clarke gives you some insight into the techniques that helped him become fabulously flexible when developing responsive designs. Learn his approach to designing atoms and elements of a design first and see if it works for you. It might enable you to create many facets of the same experience within a single workflow.
The Smashing Book #3 was limited to a certain size and format, making it impossible to include all of the chapters without compromising the book’s overall integrity. The Smashing Book #3⅓ is a challenge: explore the possibilities that modern technology and our design legacy have in store for us Web designers.
Today’s Web audience is on the search for more than just information. Consumers expect to be engaged and want to be drawn in by a website, one that makes them feel something and manages to inspire. While changing the look and feel of a website used to be somewhat easy, it is time to reconsider the fundamentals of our approach to a redesign. Learn how to successfully capture attention by using copywriting and storytelling, and understand the important relationship between emotion, design and story.
Navigation is what lends a page interactivity, connecting otherwise isolated pages into a logical order. Still, its design must fit the content and purpose of the website, not the other way around. Organic content calls for new and adaptive navigational elements. But how do we go about that? This chapter gives you useful insight into rethinking your approach to navigation.
If you invest much time and effort in the design of your website, but not the content, you’re taking a big risk. Don’t disappoint your users with the same old content after raising expectations with an impressive design. This chapter takes a strategic approach to content and explains the basics of formulating the right content strategy for your website redesign.
Redesigns usually introduce unexpected changes and are rarely applauded; moreover, a large-scale redesign is a tough and risky game to play. Smashing Magazine faced a long list of technical and UX changes in July 2011, and the team decided to act. This chapter presents a detailed case study of the whole redesign process, from A to Z, as it happened, and it sheds some light on the design, UX and technical considerations that actually led to the redesign.
