PSDTUTS Updates

---

End of CS 1 – It’s a Wrap Posted: 26 Apr 2010 08:57 PM PDT This session has seen a mix of character illustration articles that cover theory, techniques, and in depth case studies. You've learned how to come up with character concepts, develop a character's backstory, sketch character ideas like a pro, the process of taking that sketch to a final solution, and more. While this session has posted mostly on Vectortuts+, future sessions will post on other Tuts+ sites and across our network. We'll continue to expand with each session we release. Tutorial Wrap The Elements of Cute Character Design You've always wanted to develop a character which has the potential to enchant the world and to compete with Hello Kitty? In this article I'd like to present some elements making a character cute and lovable and to support you in achieving your goals. Visit Tutorial Nailing the Basics If you're thinking of becoming a professional illustrator, character design will come up as a client request again and again, so keeping up on current trends is a must. To get started creating your own characters, you'll need to nail the basics, which includes: getting comfortable sketching, refining your process, and streamlining your overall approach. Visit Tutorial Character Design Sketching Approaches Character design comes in many styles, but they all start with the rough sketch. Often overlooked in online tutorials, technique and process videos, they are the foundation to creating quality characters. The following is an overview of rough sketches from some fantastic character design artists, with many different styles and approaches. Visit Tutorial Creating Personal Character Designs with Precision Designing a character can apply to both personal and professional projects. The character can be a mascot that works in the context of a multi-national brand, or it can simply be inspired by a well-known character within pop culture. The later is usually referred to as "Fan Art." The character "Mickey Rat" first appeared in the early 1970's as a subversive underground comic that I enjoyed as a kid. Visit Tutorial Six Things I Think About When I'm Mutating a Rabbit Hi, I'm Chris and I'm addicted to creating bizarre characters. I've got a real soft spot for strange and surreal beasts, hybridized creatures, and mutated animals. Some people might call what I do "random," but there's actually a good deal of thought and sometimes even planning that goes into designing the characters that end up in my artwork. Let's take a peek inside my twisted character design methodology. Visit Tutorial Holistic Character Design Cartoon characters are everywhere, from advertising to film, and the ones that stand the test of time all share something in common. They have substance over style. It's all well and good designing innovative, cool looking characters, but if they're only skin-deep, that's where they'll come unstuck. Great characters like 'SpongeBob Square Pants' have much more than just a unique look, they have several key elements that are instilled in the very core of their design. Over the course of this article, I'll show you what they are and how to use them to create your own lovable characters. Visit Tutorial Character Design Sketching Approaches In this tutorial we'll go through the steps of designing and making an animated paper robot character. Not just a picture, this is a moving character that will sit nicely on top of your computer monitor. Push the robot body up and down and he stretches out his robot claws! We'll start with the lines ready and learn the craft of coloring and then physically putting this paper character together. Visit Tutorial Navigating the Sea of Character Design Merchandising Everywhere you look there's opportunity for character merchandising, from the custom toy on your book shelf to the cartoon branded yogurt in your fridge. Fueled partly by the popularity of artist edition toys, sneakers and apparel, and partly by advancement in manufacturing and printing technology, character merchandising is a great avenue for designers and illustrators to develop their creations and bring them to a wider audience. The following article will teach you the basics of what you need in a character before it's suitable for merchandising and what services are available for the DIY merchandiser. Visit Tutorial Creating a Collection of Quirky Caricatures Last November we decided to round off the Tuts+ year with a bang; a huge giveaway (96 prizes, no less) to reward all the loyal Tuts+ readers. We felt it was a good opportunity to get visitors browsing the content on each and every one of the Tuts+ sites and it was high time the readers got to know who they were dealing with. We would release a series of caricatures; one of Skellie, one of Collis, one of each editor, plus some of the support and development team members. The job of producing these caricatures fell to me, and suddenly I was given the opportunity to create ridiculous drawings of all my Envato colleagues and make enemies of each one of them. Visit Tutorial Creating a Collection of Quirky Caricatures Thought some of you might like to see my process for designing a character. This one is filled with cocoa love and chocolaty goodness. I'll take the concept from sketch through to vector final. You'll learn the process of making a fun loving character based on a clear concept. Also, a quick warning – you may be overcome by the urge to consume copious amounts of chocolate by reading this, but fortunately it's all part of the creative process. Visit Tutorial Creating a Collection of Quirky Caricatures It's important to not get overwhelmed with all the information out there on character illustration and design. In addition to finding a selection of high quality sites you want to participate in, I recommend buying one or two books at a time and working all the way through them. While you're doing that, there are loads of videos and resources online to learn from as well. Let's take a look at some of these sites and resources that have helped me build my skills, and can benefit you as well. Visit Tutorial Your Thoughts on CS1 – Character Illustration Creative Sessions is a brand new project and we'd love to hear your feedback and suggestions. We'd also like to hear what topics you'd like us to cover in the future for two intensive weeks? Please do leave any suggestions or comments you have below. Coming Soon, Creative Sessions 2 – Illustrative Lettering Our next session will be on Illustrative Lettering. In this next session you'll learn all about using hand crafted lettering and fonts to make illustrations. Some of the most innovative work today turns lettering into stunning illustrations. Whether it's to make sections of the New York Times stand out or for the next multi-media branding campaign, type-illustration amalgamations offer numerous possibilities. Read up on this a bit over on Eye, "Make each letter speak out loud." We'll have a great lineup of artists to learn from via case studies, articles, and more. This next session will release around the middle of May.

Create a Sleek and Stylish MP3 Player in Photoshop Posted: 26 Apr 2010 06:00 AM PDT One of the best ways to learn how to create amazing interfaces it to practice by creating electronic devices in Photoshop. These days just about everyone has some kind of MP3 device to play music. In this tutorial we will demonstrate how to create a sleek, stylish, and simple MP3 interface in Photoshop to play audio files for your Flash projects. Step 1 The first step is to create a background in which we can apply a dark radial gradient. Paint the layer in any color and add a layer style with the gradient shown below. Step 2 With the rounded rectangle tool (set a 20 pixels radius) create the main element of the device using a shape layer (clicking the first option of the upper menu). Step 3 Double click on the vector of this layer, its color editor will open up. We will select a light grey color #E1E0E0 that will allow us to add some glow to the surface. Every time you want to create white objects you will have to add a bit of grey color so you can light them up or add some glow to make these resources quite visible. Step 4 Now we will create a bevel around the device. To do this we will need to create some reference guides using Photoshop’s rulers. Click the convergence angle of both rulers. By dragging the mouse you will be able to visualize the dotted lines that precisely determine where the cursor is placed. This will allow us to create an equidistant bevel around the device perimeter. Step 5 Now that we have a new shape layer for the bevel, we need to take the opacity of this layer to zero, as we just want to see a 2 pixel bevel on the surface. Step 6 Apply a 1 pixel stroke to the Inside position using a darker color than the device front. In this step we will create a line that represents the joint gap between the body and the front of the player. Step 7 Apply an Inner Glow with a 2 pixel line using the values below. Step 8 Add a soft gradient to give the idea of convexity to the device’s front. Step 9 Now we will take care of the player’s edge. To do this, add a line that will work as an extrusion to give the illusion of a 3D object. Add a 2 pixel grey stroke in the outside position. Step 10 Using the Bevel & Emboss style we add light to the upper area of this line. Now the object seems to have an extrusion towards back that receives light from above and becomes darker at the base. Step 11 Add a soft, small inner shadow to this layer to highlight even more the player’s front. Step 12 By duplicating and editing the front’s bevel layer, we generate more bevels that will represent the different control buttons of the device. Step 13 Now edit the shape layer to create the main Play/Pause button of our player. Let’s duplicate the first bevel and take the borders inside to make a circular object. Then enlarge it 10% as we only need the horizontal bevels. Step 14 Apply a soft 3 pixel mask to the shape we created in step 13 as shown below. Step 15 To make the mask hide the object and its layer style, click the option “Layer Mask Hides Effects” on the styles window. If we do not choose this option, the mask will only hide the object but will show the effect outside the mask and we want to keep that hidden. Step 16 This same mask will also be useful for the other bevels; we can take it from the layer we masked before. By clicking the right button of the mouse over the mask icon inside the layer, we choose “Subtract Layer Mask from Selection”. This will create an identical selection to the previous one. Step 17 With this selection we repeat the mask selection conversion step. Step 18 We already have the separation bevels of our main button set. Now we need to create a shape layer for the player’s display: a black acrylic screen where the name of the song and the time will be shown. Step 19 First we use the drop shadow to create a bottom bevel where the light coming from above will hit. Use the values shown on the picture to configure the style to make it sharp and clear and not dark and blurry. Step 20 Now we need to create a radial gradient. Take both black and white colors to as near the center as possible from each other so there is not so much softness between both colors. Location of black 49%, location of white 50%. Step 21 Unclick the option Align with Layer. If we do not do this, the gradient will only be from the center of the object to the edges and we want this gradient to be much bigger and wider. Step 22 After producing your glossy effect, finish this style with a couple bevels similar to the ones we created for the button step. Use a black 1 pixel stroke with the stroke aligned to the inside. Use an Inner Glow, 2 px in size with the blending mode set to screen. Step 23 We have now finished the front of our MP3 player. Now we will need to add some icons to the buttons and text inside the display. Step 24 Now let’s simulate the text scroller on our display. Using a pixelated font we need to add the interpreter name and the song name that will be played. You can use this free font. Remember to remove the aliasing in the Character window in the upper menu of the text tool to keep the text looking sharp. Step 25 With another bitmap font we create the chronometer that indicates the time passed. This font is also free and you can get it here. Step 26 Now use a font that has the usual icons and symbols of an audio or video player. You can use this one. Once it is installed use it to create the different buttons of the player, in this case, the Play/Pause control (you will have to create two states for the button when you develop this player, as the Play button becomes the Pause button when it is pressed and vice versa). Step 27 For this symbol we use the same color as the one we picked for the front surface of the object. With the color selection tool we can paint the text. Step 28 Now we can include various styles that make this symbol look like bas-relief. Use the corresponding values below for the inner shadow. Step 29 Lighten up the bottom bevel using these values. Step 30 Use a soft and small width gradient to the surface of the depression so it is not so boring. Step 31 Let’s create the volume control. Draw a small knob button with a polished metal finish. Start with a circular shape layer. Step 32 Use a drop shadow to create the illusion of a big extrusion. Step 33 With a gradient in Angle mode and several grey and white stripes we can simulate the circular polish of this kind of button. Make sure that initial gray color on the left is the same as the final gray color on the right. Step 34 Finally, add a stroke with a gradient fill. This will add the bevel on the perimeter. Follow the values on the picture carefully. Step 35 We have now finished our volume control button but we also want to add a mute button. You can do this using layer styles. Step 36 Paint the shadow of the player in a new layer using a 2 pixels softened circular selection (see upper value menu of the tool). Step 37 Hide the selection with Ctrl+H and use a 100 pixel brush with 10% of the paint flow, paint the shadow softly. This will make it more intense at the center of the object. Step 38 Now let’s add a little glow on the player’s display edge. First, paint an intense bright area in the center of a rectangular selection that is 1 pixel high. And then, with the same brush but without any selection click several times to increase the intensity of the center. Step 39 Create a rollover effect on the main button to make the front surface pop when the mouse passes over. We start by creating a circular shape behind the Pause icon. Step 40 This depression effect can be done with: drop shadow to darken and soften the object’s edges, and a gradient to simulate that this depression has an upper area that is in shades, as the button was pressed down. Step 41 We also hide this rollover with a mask as we did with the bevels of the main button set. Remember the option of hiding layer effects at the same time. Step 42 Repeating the previous steps we mask the rollover. Step 43 We will add two light effects to enhance the rollover. By painting with 2 colors (#00CCFF for the edge of the effect and white for its center) we create a lighted edge that we will mask. Duplicate the layer and reflect it vertically to make it look as if it lights up at the top and the bottom as the mouse passes over. This layer must be set to “Screen” to integrate the glows better. Step 44 Finally, let’s add a slim wire that will give more realism to the player. To do this, draw a curved shape layer using the pen tool. Step 45 Take it to 0% opacity and add a stroke with the same grey tone of the player’s surface. Step 46 Separate the stroke from the shape layer that we created, as we need to add some shading to this wire. Right click on the fx icon next to the layer and choose Create Layer. Step 47 This action separates the stroke in a new layer without destroying the shape formerly drawn. Use an inner shadow to give the idea of a cylindrical emboss to this line. Conclusion Our MP3 Player is now ready to be exported as a transparent PNG and coded in Flash to be used on websites. You can view the final image below or view a larger version here.

You are subscribed to email updates from Psdtuts+ To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610