30 Days to Learn HTML and CSS: a Free Tuts+ Premium Course

Posted by on Nov 9, 2011 in Blog | 10 comments

If you’ve ever wanted to learn how to build websites and web apps, HTML and CSS are the first skills you should learn. They are so fundamental that we believe everyone has the right to learn these skills for free.

We set ourselves the challenge of designing the most effective and enjoyable way to learn HTML and CSS in one month. The result is 30 Days to Learn HTML and CSS, a free Tuts+ Premium course. We’re really excited to share this with you today! (Plus, get a sneak peek at the new Tuts+ Premium.)

How it works

30 Days to Learn HTML and CSS is a thirty-day video course designed to be completed over one month. Veteran web developer and trainer Jeffrey Way will take you through a new topic each day, giving you the building blocks you need to eventually code an entire website based on a PSD design.

If you’ve ever wanted to learn HTML and CSS, but either didn’t have the time, didn’t know where to start, or didn’t quite ‘get it’, we’re pretty sure you’re going to love this free course. All you need to give us in return is 10 minutes a day to go through each video and build your knowledge.

Part of the new Tuts+ Premium

In the next few weeks we’ll be launching a complete reinvention of Tuts+ Premium, including a massive redesign and UX overhaul, member forums, a library of eBooks and in-depth courses teaching you skills from the inside out.

We’ve also drastically improved the way you access the content you know and love, with the ability to quickly filter content based on topic, difficulty, format, and estimated completion time.

30 Days to Learn HTML and CSS is one of the courses that will be available as part of the new Tuts+ Premium. This course is free, but the rest of the courses are available to members. We’ll be covering topics like HTML5, CSS3, WordPress, digital painting, web design and web typography.

For now, here are a few glimpses at the new Tuts+ Premium!


Selecting a topic allows you to filter by sub-category, format, difficulty, and estimated completion time.

Members can view content in their browser, rather than having to download it.

Full members get access to educational eBooks worth more than $400.

One of many upcoming courses.

Juicy tabs!

Stay up to date and win a 5-year scholarship

If you’re a Tuts+ Premium member and want to be notified about the new Tuts+ Premium, or an interested non-member who’d like to learn more, you can sign up to our notification list. Every subscriber will have the opportunity to win one of 10 x Five-year scholarships to the new Tuts+ Premium, including access to 670+ tutorials, top-selling eBooks, 1,201 source files and a library of in-depth courses.

To get notified and learn more about the competition, join the web design and dev courses mailing list.



View full post on Psdtuts+

Vancouver graphic design, Vancouver web design, Vancouver seo, Vancouver internet marketing, Vancouver social media, web design Vancouver

Incoming search terms:

10 Comments

  1. Skellie | November 9, 2011

    If you’ve ever wanted to learn how to build websites and web apps, HTML and CSS are the first skills you should learn. They are so fundamental that we believe everyone has the right to learn these skills for free.

    We set ourselves the challenge of designing the most effective and enjoyable way to learn HTML and CSS in one month. The result is 30 Days to Learn HTML and CSS, a free Tuts+ Premium course. We’re really excited to share this with you today! (Plus, get a sneak peek at the new Tuts+ Premium.)

    How it works

    30 Days to Learn HTML and CSS is a thirty-day video course designed to be completed over one month. Veteran web developer and trainer Jeffrey Way will take you through a new topic each day, giving you the building blocks you need to eventually code an entire website based on a PSD design.

    If you’ve ever wanted to learn HTML and CSS, but either didn’t have the time, didn’t know where to start, or didn’t quite ‘get it’, we’re pretty sure you’re going to love this free course. All you need to give us in return is 10 minutes a day to go through each video and build your knowledge.

    Part of the new Tuts+ Premium

    In the next few weeks we’ll be launching a complete reinvention of Tuts+ Premium, including a massive redesign and UX overhaul, member forums, a library of eBooks and in-depth courses teaching you skills from the inside out.

    We’ve also drastically improved the way you access the content you know and love, with the ability to quickly filter content based on topic, difficulty, format, and estimated completion time.

    30 Days to Learn HTML and CSS is one of the courses that will be available as part of the new Tuts+ Premium. This course is free, but the rest of the courses are available to members. We’ll be covering topics like HTML5, CSS3, WordPress, digital painting, web design and web typography.

    For now, here are a few glimpses at the new Tuts+ Premium!


    Selecting a topic allows you to filter by sub-category, format, difficulty, and estimated completion time.

    Members can view content in their browser, rather than having to download it.

    Full members get access to educational eBooks worth more than $400.

    One of many upcoming courses.

    Juicy tabs!

    Stay up to date and win a 5-year scholarship

    If you’re a Tuts+ Premium member and want to be notified about the new Tuts+ Premium, or an interested non-member who’d like to learn more, you can sign up to our notification list. Every subscriber will have the opportunity to win one of 10 x Five-year scholarships to the new Tuts+ Premium, including access to 670+ tutorials, top-selling eBooks, 1,201 source files and a library of in-depth courses.

    To get notified and learn more about the competition, join the web design and dev courses mailing list.


  2. Martin Perhiniak | November 9, 2011

    We know how much you guys like to test your knowledge of Photoshop so today we are giving you an opportunity to do so with another quiz from Martin Perhiniak. Please take a moment to complete this 10-question quiz and see if you’re prepared to pass our test! Good luck!

    Editor’s note: this quiz is for Photoshop CS5.


  3. Amanda Hackwith | November 9, 2011

    Do you design websites? Got five minutes? We want to hear from you! Take the 2011 Web Design survey hosted by Rockable Press and Webdesigntuts+ and get the chance to win the grand prize: an Apple iPad 2 and the entire library of Rockable Press e-books. What’s more, we’ll give every respondent a 50% off coupon for the up-coming book just for participating! Interested? Take the survey and read on for details.

    Take the Survey

    Last year, we polled 3,200 FreelanceSwitch readers on the hard truths of freelancing. The data from that survey eventually became the basis of Freelance Confidential, published by Rockable Press, which explored questions every freelancer asks: How much to charge? Where to find work? How are other freelancers working? This time around, we want to explore the state of the web design industry, but we can’t do it without your input. With a brand new survey for those who design websites, it’s your turn to have your say!

    The Details

    We’re working on a brand new book to give the inside scoop on the web design industry–but we need your help! We need the input of everyone who designs websites on common questions: How exactly do you work? Where do you find inspiration? What makes a good web designer?

    To participate, simply take the 2011 survey on web design–open to anyone who creates websites. Whether you’re a full-time web designer working in industry, a freelancing pro, or simply design websites on the side, we want to hear what you think! And make sure you enter your email so you can receive your coupon and be entered in the grand prize drawing.

    The Prizes

    To thank you for participating, every respondent in the survey will receive a 50% coupon for the ebook edition of “Web Design Confidential,” published by Rockable Press. What’s more, you’ll be entered to win the grand prize, which includes the ENTIRE Rockable Press e-book library. That’s a copy of every current title in the Rockable library, 20 books valued at over $500. And you’ll need something to read all those great books on, so you’ll also win a brand new 32GB wifi Apple iPad 2! That’s a grand prize valued over $1100 USD.

    The Fine Print

    • Although it’s optional in the survey, you must provide valid email address to receive your coupon and enter the grand prize drawing. (Email addresses will ONLY be used to deliver coupon and notify winner of grand prize drawing. We respect your privacy!)
    • You only need to complete the survey once. Grand prize drawing only eligible once per participant. Multiple entries will be disqualified from the grand prize drawing.
    • The winner will be randomly selected from survey participants directly following the close of the survey. Winner will be notified via e-mail and given one week to respond.
    • The winner will be announced on Webdesigntuts+ once confirmed.
    • If winner is unable to easily receive a prize shipment in his or her country of residence, Rockable Press reserves the right to award an equal cash value instead.
    • 50% off coupon will be awarded once per participant and is good towards any e-junkie purchase of “Web Design Confidential,” sold by Rockable Press. Coupons will be emailed to participants once the book is available and will be eligible for a limited time after launch.
    • Employees and staff of Envato are not eligible to win.

    So what are you waiting for? Head on over and take the 2011 Web Design survey to let us know what you think!


  4. Kevin Stohlmeyer | November 9, 2011

    Today’s designers and photographers need to have a varied skill set that sets them apart from the pack. One common skill that both can use is portrait photography retouching. This tutorial will make you a more effective retoucher and help keep your portraits looking clean and realistic. Subtlety is – going too far will only make the results noticeable. The best comment you can get after presenting a final image is "I didn’t even notice you did that". Let’s get started!

    Tutorial Assets

    The following assets were used during the production of this tutorial.

    Step 1

    Step 1 does not involve using a tool at all. Before you start retouching an image, you should open and evaluate the image and come up with a mental roadmap of what need be done. I’ve illustrated the steps necessary to retouch this portrait below.

    The areas to retouch are: 1. Age spots, skin blemishes and other skin issues; 2. Forehead wrinkles; 3. Laugh lines and deep wrinkles; 4. Bags under eyes and crows feet; 5. Thinning eyebrows; 6. Stained teeth

    Step 2

    First, we need to work non-destructively. Duplicate the layer in the Layers Panel, by either dragging the background layer to the New Layer icon at the bottom of the Layer Panel, or by using the keyboard shortcut Command/Ctrl + J to duplicate the Layer Via Copy. This will give us "Layer 1". Double click the layer name and rename "Retouched". This will be the layer we will do all our retouching on, leaving the Background untouched.

    Step 3

    The first tool we will be using is the Spot Healing Tool shown in the Tool Bar below or with the tool shortcut "J".

    The Spot Tool utilizes local texture and tone to blend over flawed areas in your image. There are several settings in the Options Bar at the top of your window. There are only two that we are going to need to focus on however. The first is the Brush Picker (1) and the Type (2).

    First, Access the Brush Picker via the drop down arrow on the right side of the button. The only control we need to adjust in this window is the Hardness, which we will set it to 50%. 50% will blend the tool with the existing image better than 100%, which looks like a paper punch, but will not soften the brush too much. 0% will blend too much and diminish the effectiveness of the tool. Hit enter/return to exit the window – do not click off to the side to close the panel or you may accidentally affect your image. Next, make sure you are on "Proximity Match" for this portion of the tutorial. Photoshop CS5 has an added feature – "Content-Aware", but we are not going to use that (yet).

    We are now ready to start retouching the image. The Spot Tool is a brush-based tool and only needs to be slightly larger that the small flaws we are repairing. To adjust the brush size, use your bracket keys to change the size. Left bracket [ makes the brush smaller and right bracket ] makes it larger. (You can also adjust the hardness by adding the Shift key, but we want to keep this at 50%). Center your brush over your flaw, click and release. It should cover the flaw and blend in flawlessly. If it does not, make sure that your brush is properly sized and that you are not overlapping another texture, like hair or darker skin tones, etc.

    Repeat this step until all skin small blemishes are removed. If you have larger areas (the vein on the cheek) leave those for now, and concentrate on smaller spots, freckles, moles, etc. Remember to adjust the brush using the bracket keys as you go. Keep it small – if you increase your brush size tool large, the tool will fail by mixing too much information and you will end up with a mess. No worries, there are tools designed for larger areas.

    Step 4

    After repairing the small spots, it’s time to move up to the larger flaws – forehead wrinkles, larger skin defects and laugh lines. To repair these areas, we will be using the Healing Brush Tool, which can be found under the Spot Healing Tool. Click and hold on the tool in the toolbar to access the additional healing tools. The Healing Brush tool repairs similar to the Spot Tool, but it splits the workload in two. Texture is now designated by the user (you) and tone is blended locally after you use the tool.

    Once you select the tool, again access the Brush Picker in the Options Bar and make sure the Hardness is set to 50%. Make sure the "Align" option is checked to the right of the Options Bar. You can use the bracket key shortcut to change the size as needed.

    We will start with the forehead wrinkles. Move your brush to a clean area of skin texture – usually you can find this between the wrinkles. We want to make sure that we have enough room to move and not run into other textures, like his hair or other wrinkles.

    Hold down your Opt (Mac)/Alt (PC) key and click once to designate the texture source. Then take your tool and align the brush over the beginning of the wrinkle. Change your brush size to a size slightly wider the wrinkle. Click and hold, then brush across the flaw. Notice that your source icon is following your every move, offset based on your source. Try to paint in one mouse-click if possible, but if you notice that your source is getting close to another texture, you can release. When you release, the tool blends the tone locally making the new texture blend in with the existing surroundings. The "Align" feature will keep your source offset exactly where you designated it, until you choose another source. With each flaw, you should Opt/Alt-Click another source area and then paint over the flaw.

    For the laugh lines, align the source slightly above the flaw and offset enough that you can paint over the entire wrinkle in one motion. Cover the initial wrinkle first, then blend the tone with additional strokes. Always be aware of your surroundings. If you get too large of a brush, you could accidentally blend in the lighter color of the mustache or other areas. Adjust your size as needed.

    Step 5

    The eyes present the biggest challenge on any portrait. Flaws are usually are so close to the eye and other areas (eyelashes, eyebrows, etc.) that using the Healing Brush is almost impossible given the size constraints. This is where the Patch Tool comes in. The third healing tool of the group, the Patch Tool is not brush based at all- it is selection based. Choose the Patch Tool under the Healing Brush Tool in the Tool Bar.

    The only setting we have to check on this tool is that it is set to "Source" in the Options Bar.

    Start by using the Patch tool to make a selection around the bag under the right eye. I like to dissect the eye wrinkles into sections. This gives me a more effective result than trying to select around the entire eye at one time.

    Next click and drag the selection to a clean area of skin texture, like the forehead, and release. The new texture blends with the local tone and the wrinkle is gone. Repeat around the eye, selecting sections (left, right, top, bottom) individually and dragging the selection to a clean texture source.

    Step 6

    After you have the eyes completed, this is what the finished "Retouched" layer should look like:

    But as you can see, this looks completely unrealistic. The trick is to use a Layer Mask to blend the original image back into the retouched layer.

    Start by clicking the Layer Mask button at the bottom of the Layers Panel. This will give you a Layer Mask on the Retouched Layer.

    Then, using the Eraser tool we will blend back in some of the flaws from the original image. Set your background color to Black (or hit "D" for default colors) and change your Eraser opacity to 33%. Make sure you are using a soft-edged brush (at least 50% Hardness).

    Start by erasing over the laugh lines in one stroke. Choose a brush size that will encompass the flawed area. This will slowly bring back the flaw. I like to go over the entire wrinkle once, then on the second pass starting at the nose, I go halfway down the wrinkle giving it 66% coverage. Lastly I go right next to the nose on another pass making it 99%. This technique fades the wrinkle away as it moves further away from the nose. Repeat on the other side.

    For the eyes, I use the same technique, but start at the corner of the eye closest to the nose and blend away from the nose. Remember to build slowly back into the area, we do not want to bring the entire flaw back at 100%. For the crows feet, I only went with one pass since they were so defined.

    This is how the blended face looks after masking:

    Step 7

    After blending the face, I noticed that his eyebrows were pretty thin and I wanted to add some more definition back into that area. We can do this using a new process in Photoshop CS5 – Puppet Warp. First, make a selection around his beard using the lasso tool like so:

    Next click on the Retouched layer icon in the Layers panel (deselecting the mask) and duplicate the selection onto a new layer using Command/Ctrl + J. Name the layer "Eyebrow". Move the image up to the eyebrow area and rotate to the approximate angle using Edit > Transform.

    Next, go to Edit > Puppet Warp. This will create a mesh over your eyebrow. Click on the two ends of the eyebrow, dropping pins on the mesh. Click and drop a third pin in the middle of the eyebrow.

    Click and drag the pins to warp the eyebrow to match the contour of the existing shape. And hit Enter/Return to accept the warp.

    Finally, drop the opacity on the Eyebrow layer and using a soft eraser, blend the edges of the new eyebrow to the portrait. Repeat the steps for the other eyebrow.

    Step 8

    To whiten the teeth, simply make a rough selection using the lasso tool. Next, go to the Adjustments Panel and create a new Hue/Saturation Adjustment Layer.

    Adjust the Saturation setting to the negative side, desaturating the yellow teeth. Do not go too far, you still want some color. Adjust brightness if needed. Do not adjust the Hue.

    Final Image

    Here is the final image. Wrinkles are nice and blended, new eyebrows for our friend and a whiter smile.


  5. Emil | November 9, 2011

    Today we bring you an interview with Hrvoje Beslic, a talented Croatian digital painter. Hrvoje’s work features some stunning character designs that are rich in detail and color. In our interview Hrvoje discusses how it was only natural to transition from drawing on paper to digitally painting, and also how he created one of his best works. Be sure to check out this great interview with an interesting artist.

    Q Welcome to Psdtuts+, please introduce yourself. Could you tell us where you’re from and how you got started in the field?

    Hello everyone. My Name is Hrvoje Beslic and I come from Croatia. I have graduated the school of civil engineering and art academy. I actually found out about digital painting and character design by accident when I stumbled upon some amazing art on Internet. I had no previous knowledge that people make these amazing concepts for movies, games, books and whatnot, and in school no one introduced us to it. But nonetheless I was just drawn to that type of art immediately and started basically relearning to draw.

    Witchblade

    Q From looking at your portfolio we see that it is mostly made up of paintings. What exactly draws you to that specific style instead of say photo-manipulation, or abstract design?

    I love to draw and that’s what steered me to that style. I also love matte painting, I think its amazing but it requires a large database of photos which I do not have, and there are of course authorship right violations when using other peoples photos, so I stick to drawing it all myself. Also I never had a pc growing up, I only got my first pc few years back so most of the time I’ve spent drawing it was on paper and I think its natural to continue that on the computer. After all the only difference is in media you use, instead of canvas there’s a screen.

    P41

    Q A lot of your paintings feature beautiful scenery shots of mystical lands, what would you say is your favorite type of scene to paint and why?

    I like to paint everything, but of course fantasy type is dominant in my work. I also enjoy sci-fi and a combination of the two. As for environments I like to paint, its probably mountain type areas, but I do compress different types of environments into one scene. As for why I like mountainous terrains, well where I live there are none so I guess that’s a part of it. But I will try and paint anything really because it only adds to experience even if it doesn’t turn out as good as you hoped. I also like battle scenes, or anticipation of such, they are always fun to draw.

    P37

    Q Since many of your paintings are character creations it’s fitting to ask what you think are some important factors to creating an original but still interesting looking character?

    I’d like to know the answer to that question as well. But I guess you have to start from yourself, would you like that armor included, for instance, a movie or a game. I like using patterns to make armor more shiny and cool. Linking armor into set is important in my opinion, it makes it visually more pleasing then armor that has no visual connection between its parts. So repeating an element or style will achieve that. But it boils down to just trying it out and seeing if it works, if it doesn’t take the best parts from it, remember them and apply them to another piece.

    Terror Bird

    Q Painting “P46″ features some interesting imagery and great character development. Please walk us through the process of creating this great painting.

    Well in this painting I wanted to draw a knight standing on top of some sort of cliff with the forest spreading beneath her. The sort of thing where you can say “I can see my house from here”. I usually split my works into 3 layers, 1st plan- 2nd plan- background, there is no real benefit from that except that I can control values a lot faster then if I had to make masks or paint. I just move sliders for particular layers to make it darker or lighter. I tried to make cool looking shield with a dragon in middle to be a focal point of the painting, and a girl in more winter type clothing. I used warmer colors on her to separate her from background which is cold and cool. I don’t start with black and white rendering and then color it, I start directly with color. It may be a bit more difficult than gray scale but it has more benefits.

    P46

    Q What do you think is your biggest challenge in terms of your paintings? Have you overcome this obstacle yet? If so tell us how.

    Speed. I often get caught up in meaningless details that make no difference to the overall piece. Also I had issues with color, they were muddy and quite poor in terms of the palette. I had lots of help from amazing Croatian artist Stjepan Sejic. He really helped me to get better. But at the end of the day everyone can help you only so much, it comes down to you and willingness to get better. The more you draw, the more mental maps you make, make each successive piece easier because you have already done that. I think getting better is a lifelong process, and no one truly overcomes all their obstacles, you will always think you could have done a better job.

    P33

    Q All digital painters use tablets when designing, so tell us what tools you use to create your amazing paintings? What does your specific equipment bring to your design that you wouldn’t get with another tablet?

    I use Photoshop cs 5 and wacom intuos4 which I got this year. Before that I had very cheap Trust graphic tablets. Intuos is a whole lot more precise which allows me to stay zoomed out for a very long time. That makes things a lot easier and better I think. One bad thing of intuos4 is tips wearing off very fast. There is also great pressure sensitivity of wacom tablet, which gives you the ability of gesture painting, making things look more natural and fluid.

    P30

    Q Thanks again for providing Psdtuts+ with this opportunity to interview you. Any final thoughts for our readers?

    Thank You for having me. As for final thoughts all I can say is keep faith in yourself and you’re abilities. There will always be people who will say you are not good enough or that you are wasting you’re time. Use that as incentive to get better, keep practicing and you will get better. Always accept constructive criticism it can only help you even if you don’t like what you hear. At the end of the day doing what you love is the most important thing.

    P29

    Where to find Hrvoje on the Web

    Ravine Reaper of Ardunat


  6. Paul Flavius | November 9, 2011

    In this tutorial we will show you how to design a detailed user interface for an audio-themed web application. Let’s get started!

    Tutorial Assets

    The following assets were used during the prodction of this tutorial.

    Step 1

    Create a new file. Set Width to 1590 and Height to 838 and the resolution to 72 PPI.

    Step 2

    Make a new Group and name it Background. Inside that group create a new layer and using Rectangle Tool (U) make a white #ffffff vector shape to cover the whole
    canvas and apply the Layer Style.

    Step 3

    Create a new Group and name it Body. Using Rounded Rectangle Tool (U) set the Radius to 5 px and draw a shape exactly like the one in the example, afterwards apply
    the Layer Styles.

    Step 4

    Inside the Group Body create a new Group and name it Horizontal Devider. Using Rectangle Tool (U) set the fill color to #dfdfdf and make nine horizontal lines
    just like the ones in the example.

    Step 5

    Make another Group inside the Body Group and name it Blue Devider. Using Pen Tool (P) draw to shapes like the ones in the example. Set the fill color to
    #8dc5fc and apply the Layer Styles.

    Step 6

    Using Horizontal Type Tool (T) set the Font to Arial , Bold and the Font size to 17,63 px and type down the words “General” and “Maintenance” exactly like in the example
    and apply the Layer Style.

    Step 7

    Usint Horizontal Type Tool (T) set the Font to Arial and the font size to 11 px, and write down the text in the example. Remember to change between Bold and Regular
    on the subcategories. Set the fill color to #557590.

    Step 8

    Create a new Group and name it Dots. Using Elipse Tool (U) make three shapes like the ones in the example. Set the fill color to #98cbfc and apply the Layer Styles to the shapes in front of "Daily" and "Weekly". For the shape in front of "Monthly" using Ellipse Tool (U) make another small circle inside of the blue one and set the fill color to #ffffff.

    Step 9

    Make a new Group and name it Pop up. Using Pen Tool (P) draw a shape just like the one in the example. Set the fill color to #90c7fc and apply the Layer Styles.
    Afterwards set the Fill to 12%.

    Step 10

    Now using Horizontal Type Tool (T) write down the following text inside the Pop up shape "Perform maintenance services once a month and display the following message: “If you are seeing this error message, please clear your cache at exactly 4pm and hit the Refresh button.” Set the fill color to #557590 and apply the Layer Style.

    Step 11

    Create a new Group and name it Switch. Inside that Group using Rounded Rectangle Tool (U) set the Radius to 50 px and make a shape like the one in the example. Set
    the fill color to #7cb9fb and apply the Layer Styles.

    Step 12

    Using Rounded Rectangle Tool (U) keep the Radius to 50 px and make a white #ffffff shape just like the one in the example and apply Layer Styles.

    Step 13

    Now we will use Horizontal Type Tool (T) to write down “OFF.” Set the Font to Arial, Bold and the Font size to 11.79 px and the fill color to #ffffff. Apply the Layer Style and this step is done.

    Step 14

    Following Step 11, 12 and 13, make six more Switches.

    Step 15

    Create a new Group and name it Drop Down. Using Rounded Rectangle Tool (U), set the Radius to 2 px and draw a shape like the one in the example. Set the fill color to
    #8fc6fc and apply the Layer Styles.

    Step 16

    Using Pen Tool (P) draw a triangle facing down just like the one in the example. Now select Horizontal Type Tool (T) and write down the word “Low” and apply the Layer Style.

    Step 17

    Duplicate the last step or simply duplicate the Drop Down Group and place it in the bottom just like in the example.

    Step 18

    Make a new Group and name it Save Button. Using Rounded Rectangle Tool (U) set the Radius to 2 px and draw a shape like the one in the example. Set the fill color to
    #90c7fc and apply the Layer Styles.

    Step 19

    Using Horizontal Type Tool (T) write down the word “SAVE” using the Font Arial, Bold and the Font size 10 px. Set the fill color to #ffffff and apply the Layer Style.

    Step 20

    Create a new Group and name it Discard Button. Using Rectangle Tool (U) draw a shape like the one in the example, set the fill color to #ff5656 and apply the Layer Styles.

    Step 21

    Using Horizontal Type Tool (T) write down the word “DISCARDS,” set the fill color to #ffffff and apply the Layer Style.

    Step 22

    Create a new Group and name it Additional Text. Using Horizontal Type Tool (T) write down the phrase “No changes have been made!” and set the fill color to #ff6161.

    Step 23

    Make a new Group and name it Footer. Inside using Rectangle Tool (U) draw a shape at the bottom of the canvas just like the one in the example. Set the fill color to
    #58a1fa and apply the Layer Styles.

    Step 24

    Now using Horizontal Type Tool (T) write down the words “Sound System Website | Privacy Policy | Terms of Use”, set the fill color to #ffffff and apply the Layer Style.

    Step 25

    Create a new Group and name it Header. Open the IconSweets2 psd and import the Headphones glyph from the Media Folder inside the
    PSD. Keep it at it’s original size, place it on the top left corner and apply the Layer Styles.

    Step 26

    Using Horizontal Type Tool (T) set the font Arial, Italic and the Font size to 18 px and write down "Sound System." Afterwards using Horizontal Type Tool (T) again, keep the Font but change the Font size from 18 px to 10 px and write down "3.0" just like in the example. Apply the Layer Styles.

    Step 27

    Make a new Group and name it Info – Logout. Use Horizontal Type Tool (T), set the Font to Arial, Regular and the Font size to 14 px and write down "Welcome" just like in the example. Set the fill color to #70818f. Now using Horizontal Type Tool (T) set the Font to Arial, Bold and the Font size to 14 px and write down "John Doe Logout" keeping the same fill color #70818f.

    Step 28

    Create a new Group and name it Navigation. Using Pen Tool (P) draw a shape like the one in the example. This will represent the first tab in the navigation menu. Set the fill color to #ebeff4 and using Rectangle Tool (U) draw five more shapes just like the ones in the example. Apply the Layer Styles to all six layers.

    Step 29

    Now using Pen Tool (P) draw a shape like the one in the example. This will represent the selected tab plus a sub menu space. Set the fill color to #58a1fa and apply the Layer Styles.

    Step 30

    Now we will add text inside the unselected tabs. Using Horizontal Type Tool (T) write down in each tab the words indicated in the example. Set the Font to Myriad Pro, Regular and the Font size to 14 px using #557590 as a fill color. Using Horizontal Type Tool (T) keep the previous settings, change the fill color to #ffffff and write down the word "Options" inside the selected tab. Apply the Layer Style only to the "Options" layer.

    Step 31

    Open once again the iconSweets2 psd and import the glyphs indicated in the example. Place each and every one corresponding to the number indicated in the example. Reduce the size to 50% and set the fill color to #4d5969 and apply the Layer Styles to all the glyphs.

    Step 32

    Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 14 px and write down the word “Comapny:” using #ffffff as a fill color. Now
    using Horizontal Type Tool (T) set the Font to Myriad Pro, Bold and the Font size to 14 0x and write down the word “Company Name”. Apply the Layer Style to both layers.

    Step 33

    Make a new group and name it Submenu.Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 14 px and write down the words “Time&Date”,
    “Display” and “Language”. Apply the Layer Style.

    Step 34

    Now we will make the selected button of the Submenu. Using Rectangle Tool (U) draw s rectangle shape just like the one in the example. Set the fill color to #b8dbfd and apply the Layer Styles. Using Rectangle Tool (U) make another shape this time at the bottom of the previous one, just like shown in the example.

    Step 35

    Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 14 px and write down the word "General". Set the fill color to #2e3b47 and apply the Layer Style.

    Step 36

    Now to make the sub-submenu. Using Pen Tool (P) draw a shape just like the one in the example. Set the fill color to #eaeef3. Make another one to mirror the previous one, set the fill color to #ffffff and apply the Layer Style to both layers.

    Step 37

    Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 12 px and write down the word "Settings". Set the fill color to #2e3b47 and apply the Layer Style. Use Horizontal Type Tool (T) keeping the same settings, except this time we will change the fill color from #2e3b47 to #ffffff and apply the last Layer Style.

    Final Image


  7. Grant Friedman | November 9, 2011

    Last week we celebrated the launch of PhotoDune, Envato’s new stock photography marketplace with a series of photo effect, photo manipulation, and photo montage tutorials. Now that Photo Effects Week has come to an end, we wanted to give you the opportunity to put your newly learned skills to the test with a Photo Manipulation Competition that is open to all Psdtuts+ readers.

    Your task is to use at least one of the three images below to create a photo manipulation. You are free to combine these images with assets available on the web or in your personal collection. We will judge your entries based on their creativity, execution, and by how many of the below images that you use.

    Up for Grabs

    We will select 3 winners for this competition.

    • 1st Place will win $100 in PhotoDune Credits and a 1-year premium membership to Tuts+.
    • 2nd Place will win $75 in PhotoDune Credits.
    • 3rd Place will receive an Envato t-shirt.

    PhotoDune Images

    You can use the following images in your photo manipulation.

    European Hamster courtesy Lifeonwhite

    Woman Eating with Chopsticks courtesy Monkeybusiness

    New York City Skyline courtesy Lifeonwhite

    Download the Photos

    You can download the photo package for this competition from the link below. Please note that these photos are only to be used for personal, non-commercial, educational usage, and to form your entry to the Psdtuts+ Photo Effects competition. Should you wish to use the images for any other purpose, you must purchase your own licenses from PhotoDune. These images will only be freely available until November 8, 2011. If you wish to enter the competition, please make sure you download them as soon as possible.

    PHOTO PACKAGE NO LONGER AVAILABLE

    Rules

    • Use at least 1 of the 3 images above to create a photo manipulation.
    • You are free to combine the above images with photos or assets available elsewhere on the web, or in your personal collection.
    • The images above can only be used for this competition. They cannot be used for any other purpose.
    • You can enter up to 3 different submissions.
    • Entries will be accepted until Monday, November 14, 2011 at 11:59 PM EST.

    SUBMIT YOUR ENTRY


  8. Wojciech Pijecki | November 9, 2011

    In this Psd Premium tutorial, author Wojciech Pijecki will combine several stock images to create an artistic, abstract portrait of a woman. This tutorial is available exclusively to Premium Members. If you are looking to take your photo manipulation and illustration skills to the next level then Log in or Join Now to get started!

    Professional and Detailed Instructions Inside

    Premium members can Log in and Download! Otherwise, Join Now! Below are some sample images from this tutorial.

    Final Image

    Get Instant Access to Tuts+ Premium

    Joining Tuts+ Premium will get you instant access to this tutorial as well as all the premium content in our archives. In addition, you’ll have access to all the source files for all of our free and premium content. You will also have free access to the premium content of all the other sites in the Tuts+ Network. If you’re already a premium member, Log in and download the tutorial. Otherwise, you can Join Today!


  9. Martin Perhiniak | November 9, 2011

    Photoshop is an excellent tool for manipulating photographs but it can also be used as a means to create stunning digital art. This tutorial is part of a 25-part video tutorial series demonstrating everything you will need to know to start producing digital art in Photoshop. Digital Art for Beginners, by Adobe Certified Expert and Instructor, Martin Perhiniak will begin by teaching you how to draw in Photoshop. At the conclusion of this series you will know all you need to produce your own concept art and matte paintings in Photoshop.

    Today’s tutorial Part 14: Paint Realistic Hair Using Photoshop will explain how to paint hair quickly and efficiently using several tools in Photoshop. Let’s get started!


  10. Amanda Hackwith | November 9, 2011

    What is one graphic element that you see dozens, if not hundreds, of times a day? Each of your favorite websites, applications, and software has at least one, and we’re betting it’s even had a major influence on what tools you decide to use. Any guesses?

    If you guessed “icons,” you guessed right! Icons are deceptively simple bits of graphic design, and contrary to popular belief, designing a good icon is not merely as simple as making a tiny graphic. Icons are so important that major brands like Apple and Microsoft have spent a lot of time and money solidifying their icon style for each product. From websites to mobile apps to your desktop – icons are everywhere. A good icon can entice a user to try an app, or simply ruin a user experience.

    Veteran icon designer and Associate Editor of Vectortuts+ Kate McInnes knows a thing or two about icon design. Having worked for years as a successful icon designer, she decided it was time to share that experience with others by teaming up with Rockable Press to write her very first book called Rockstar Icon Designer.

    In this book Kate not only teaches you how to whip up a good icon, but she takes you on a crash course through the world of icon design.

    Here are some of the topics covered in the book:

    • A historical overview of icons, from the first black and white IBM symbols to today’s OS standards.
    • A theoretical look at the creation of icons.
    • The different perspectives and orientations of icons and when to use them.
    • Different icon styles and important style guides.
    • How to design an icon to meet the standards of common uses, including Apple iOS, Microsoft Windows, and more.
    • Step by step tutorials for creating an icon in a variety of styles and perspectives.
    • And more!

    Every purchase comes with 3 digital versions of the book (PDF, ePub, and Kindle) and the price is temporarily marked down to only $19 for the first five days, so if you’re looking to stop dabbling and want to become a Rockstar Icon Designer then get yourself a copy from Rockable’s site or from the Tuts+ Marketplace today.