web 2.0

Thursday, June 17, 2010

PSDTUTS Updates

Posted by Damass at 5:35 AM

PSDTUTS Updates

Link to Psdtuts+

The Beginner’s Guide to Web Design: New Premium Series on Nettuts+

Posted: 16 Jun 2010 08:52 PM PDT


Nettuts+ has just launched its Beginner’s Guide to Web Design series, teaching you the basics of how to start coding your designs in HTML and CSS. Throughout the three-part series, you will learn how to create a website using the latest in web development techniques. This series is aimed at those with minimal knowledge of development.

These days it can be tough to survive in the industry as a designer with no knowledge of the code that will be used to turn your web designs into fully functioning websites. Even if you don’t code your designs yourself, it’s important to understand the fundamentals of HTML, CSS and web standards so you can better design for the web. This lesson series will help you get started.

This tutorial can be downloaded from the ‘Nettuts+’ section fo the Premium area and is available to all Premium members.

( Continue Reading at Nettuts+ )

Developing a Diverse Range of Illustration Styles

Posted: 16 Jun 2010 07:03 AM PDT


Making a living as an illustrator is a dream for many young artists – but it takes more than dreaming to impress potential clients. A successful illustrator needs flare, persistence and a strong portfolio.

Over the years I’ve experimented with various mediums and techniques to establish a broad range of styles. In this article I’d like to share my thoughts and experiences with using multiple illustration styles, as opposed to fixating on just one.

This Post is Day 3 of our Digital Illustration Session. Creative Sessions

What is Style?

Style refers to visual vocabulary; such as color, shape, line weight and principles of proportion. It can also refer to the tools/techniques used to create the illustration.

This image uses color and Illustrator’s symbol feature in a creative way – it’s also a style that I’m keen to evolve.

mosaic

Client: Digital Arts magazine. Software: Illustrator and Photoshop.

If you’re planning on developing a range of styles, it’s important to be true to yourself and not slavishly copy current trends. My best advice would be to gravitate towards the styles of work you feel most comfortable with and build up a strong portfolio that reflects the commissions you want. Illustrators are often requested to follow current trends – that’s inevitable; just remember though, that by following trends, you’ll never set them!

This commission takes inspiration from the cheesy B movie posters of the 50s.

invaders

Client: Digital Arts magazine. Software: Bryce, Photoshop and Illustrator.

I’ve had numerous commissions where art directors will place an existing illustration into a design or mock up and ask me to produce something similar for the finished artwork. Through my experience this is common working practice, because art directors are busy people who need to relay their ideas quickly. In cases like this it’s best to “air on the side of caution” and inject as much of your own individual flair as possible, what’s more a good art director will welcome your input.

For these web banner illustrations the art director initially emailed me a selection of styles he liked. These samples were then used as an incentive to generate my own unique style.

cartoon

Client: VHD Creative. Software: Illustrator.

It’s also worth noting that the most successful illustrators have what’s known as a signature style. This is similar to how a brand or logo works to make their work instantly recognizable. The repeating circular patterns that are abundant in Scott Hansen’s work are a prime example of a strong signature style.

Trends Change

Style, like fashion and music are in a constant state of flux; what’s hot in the visual marketplace today maybe considered untrendy tomorrow. Saying that, styles have the habit of re-emerging, albeit being slightly re-invented. Illustration is also a diverse field, so for me it made sense to create a wide variety of styles that could allow for change.

This illustration borrows imagery from “The Son of Man,” by the surrealist painter René Magritte.

surreal

Client: Envato/Psdtuts+. Software: Photoshop and Illustrator. Premium members can view the tutorial here.

I began my career as a traditional designer and admit to being a complete technophobe when the desktop revolution arrived in the mid 80s. I realized I had to embrace this new technology, or find another job. The early Macs were unable to handle large image files. Back then, Photoshop was solely used to scan lores sprinters or position guides and the printer stripped in hires scans at repro stage.

These images recapture some of my traditional hand painted illustration techniques.

paint

Clients: Digital Arts and Photoshop Creative magazines. Software: Photoshop.

Advances in technology now offer us new and exciting methods of producing imagery. The 90s was saturated with what I call “program-led” style – illustrators were producing artwork with a sterile, computer-generated look. What you need to remember is that 100% digital work is very reliant on technique and therefore fairly easy to mimic, that’s probably why in recent years we’ve witnessed a step back, towards a more hand-crafted aesthetic.

This three-color tshirt illustration mixes digital halftone effects with hand-drawn elements.

tshirt

Client: Envato/Psdtuts+. Software: Photoshop and Illustrator. Premium members can view the tutorial here.

Other Applications

Although Photoshop is my primary illustration tool. I also love the way Illustrator and Photoshop work in tandem; for example, pasting Smart Objects from Illustrator into Photoshop and exporting Photoshop paths to Illustrator.

I used a custom perspective grid and the Free Transform Tool to create this map, rather than relying on Illustrator’s built-in 3D effects – which can sometimes affect linework quality.

map

Client: Computer Arts magazine. Software: Illustrator.

It also seemed a natural progression for me to explore 3D applications. I currently use Poser, Daz Studio, Bryce and Cinema 4D. I wouldn’t claim to be an expert in the 3D arena, so I make up for any shortcomings with some Photoshop magic!

This illustration was inspired by the 80s airbrush artist Hajime Sorayama.

3d

Client: MetalFX Technology. Software: Poser, Bryce and Photoshop.

There are certain styles that I would never attempt, such as a hyper-realistic cut away drawing of a car for example. This is quite a specialized field and best left to the experienced professionals. I can remember being in awe at some of the technical drawing student’s airbrush work back in my collage days.

This product design is probably the closest thing I’ve done to technical illustration.

product

Client: Advanced Photoshop magazine. Software: Photoshop.

Promote Yourself

I get a steady flow of freelance work from regular clients, so I guess having a varied range of styles has paid off for me. As well as having a strong web presence, I’ve found that sending out regular mailshots also generates new business.

I mail samples that showcase some of my best work to a database of existing and potential clients (this can be costly, but it does pay off when you consider the amount of new business generated), I then make follow up phone calls to check it’s arrived OK and also get feedback. I can remember being totally amazed when one art director thought I was an illustration agency representing different illustrators!

Here’s my “What’s Your Brief” mailer. Unfolded, it measures 32”, so hopefully it will stick in peoples mind and they’ll keep it to hand.

mailer

Final Thoughts

We’re all different, so I’m not saying working in numerous styles is right for everyone, although I firmly believe diversity shows adaptability and dexterity. In fact, the only downside to having a varied portfolio is that some art directors may consider you a “jack of all trades and a master of none” if your work is not polished to a high enough level.

This Post is Day 3 of our Digital Illustration Session. Creative Sessions
« Session Day 2Session Day 4 »

Create a Magical Flaming Heart Illustration in Photoshop – Basix

Posted: 16 Jun 2010 06:05 AM PDT


The Warp feature in Photoshop can be a powerful tool if you know how to use it correctly. In today’s tutorial we will demonstrate how to combine a few stock images to create a magical flaming heart illustration. Let’s get started!

Resources Used

Step 1

Create a new document 1920 x 1080. Download the Concrete Texture that we created in our Create Metallic Texture Tutorial some weeks back.

Step 2

Download Aladdin’s Lamp and place at shown below. Desaturate it using Cmd + Shift + U.

Step 3

Add a shadow for the lamp. Create a new layer and name it "Lamp Shadow." Using the "Ellipse Marquee Tool" create a selection as shown below.

Step 4

Right click into selection and select "add feather" with value of "3px" and fill with black.

Step 5

Move the "lamp shadow" a little bit up and to the right as shown below.

Step 6

Now before we start adding fire to the lamp, we need references to help things along. Create a new layer on top of all layers and name it "start stroke" and then using "Pen Tool" create a path as shown.

Step 7

Open the Brush Palette and prepare a brush to use to stroke our path.

Step 8

Select the "start stroke" layer, grab the pen tool, right click and choose the Stroke path option.

Step 9

Lower the opacity of the "start stroke" layer to 10% or 20%.

Step 10

Download the Fire image and open it Photoshop. Open Channels and duplicate the Red Channel.

Step 11

Go to Image > Adjustment > Curves and apply the settings below.

Step 12

Now press Cmd and click on this Channel to load a selection or go to Select > Load Selection and press okay.

Step 13

Now come back to the layer panel and simply copy it and past it into your working document. Name this layer “fire flame”.

Step 14

Press Cmd + T to scale it down.

Step 15

Using the lasso tool, create a selection around bottom flame and then press Cmd + Shift + J. This will separate both flames.

Step 16

For now we need only the bottom flame so hide the top flame for now.

Step 17

Duplicate the bottom flame layer as a backup and then press Cmd + T to scale it down a little. Press Cmd + T, right click and choose warp.

Step 18

Now let’s delete some unneeded areas. Using the lasso or pen tool make a selection as shown below. In the coming steps you will have a lot of flames so be sure to name the flames properly so you can recognize them later on.

Step 19

Duplicate the big flame layer and name it "stroke_flame_2" scale it down and warp it as before.

Step 20

Again, Duplicate the big flame layer and name it "stroke_flame_3."

Step 21

Now, let’s reveal the top flame that we hid earlier. Duplicate it and name it "stroke_flame_4." Bring it above all other layers, scale it down a little bit and warp it as shown.

Step 22

Now that we have successfully created first part of the flame we don’t need the reference stroke that we created earlier. Delete it.

Step 23

You may have noticed that the middle flame is colored differently than the others. Go ahead and edit it’s saturation as shown below to make look more realistic. To do this go to Image > Adjustment > Hue/Saturation.

Step 24

Before we start work on the heart all flames and place them into a folder.

Step 25

Now we are going to start work on the heart. Before we begin, we need to create a reference heart like we did for the flame strokes. You can find a nice heart example in Photoshops’s default custom shapes folder. Create a new layer, name it "heart reference". Pick the heart shape from Photoshop’s custom shapes. Draw it and fill it with white color. Lower its opacity to 10%.

Step 26

We will use the same technique for the heart as we did for the lamp. Before you begin the process, make sure that you edit the saturation so we don’t run into the same problems as we did in Step 23.

Step 27

Duplicate the bottom flame and name it "heart_flame_1" and bring it above all other layers. Warp as shown.

Step 28

Remove unneeded elements and then go to Filter > Liquify and warp flame as shown.

Step 29

Duplicate the big flame, name it "heart_flame_2" and rotate it, warp it and remove unneeded elements.

Step 30

Select both "heart_flame_1" and "heart_flame_2" duplicate them by dragging them to the new layer icon at the bottom of layer panel. Transform new duplicated as shown. Select all Heart flames and merge them together.

Step 31

Go to Filter > Liquify , and use the warp tool to create some variations.

Step 32

Now let’s work on the inside of the hear. I already made an image that you can use here. Download it here and paste it into your working document as shown.

Step 33

Now you can delete the hear reference layer.

Step 34

Select the "inside heart" layer and go to Filter > Liquify. Warp the edges as shown.

Step 35

The heart is almost done. Select "heart flame" and "inside heart" layer and rotate them as shown.

Step 36

Merge "heart_flame" and "inside heart" and name the new layer "big heart". Duplicate it and name it "mini heart." Scale it down using the transform tool (Cmd + T) and place it as shown.

Step 37

Duplicate "stroke_flame_1" layer and bring it above all other layers to create a trail.

Step 38

You may have noticed that both the trails look a bit unrealistic. To fix this, open the Liquify filter and fix them as shown.

Step 39

Select the big heart’s trail layer which is "stroke_flame_1" and repeat Step 38.

Step 40

Okay we are done with warping/distortion, now it’s time to paint. Create a new layer above the lamp layer, name it "lamp light" and go to Layer > Create Clipping Mask.

Step 41

Apply the following brush settings: Size: 3px, Roundness: 0px, Opacity: 40px, Flow: 30%, Color: ff8a00.

Step 42

Start painting on lamp’s edges as shown.

Step 43

Change the brush settings as follows Size: 100px, Opactiy: 20%, Flow: 10%.

Step 44

Create a layer below lamp. Call it "lamp glow". Select transparent gradient tool, color: ff8a00.

Step 45

Add a little glow behind the flames, this will make it look more realistic. So Merge all the flames together and name them "magic flame" but before merging them backup your document. You may need to edit flames individually in future.

Step 46

Duplicate "magic flame" and name it "magic glow". With "magic glow" selected, Go to filter Blur > Gussian Blur > 10px. Lower its opacity to 60%.

Step 47

Create a new layer above all other layers and name it "Magic Love." Go to Image > Apply Image.

Conclusion

Once you have everything in one layer, Go to Filter > Shapern > Shapern. You are done!

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Apture