Create an Elegant Patterned Web Design in Photoshop

In this Photoshop web design tutorial, we will create a simple and elegant web layout of a portfolio site. We will create and use patterns throughout the design to give it that extra bit of class. We’ll use a variety of techniques, including creating patterned drop shadows, applying highlights with the Brush Tool, creating a basic button for the navigation bar, and more. Continue reading…

Continue Reading: Create an Elegant Patterned Web Design in Photoshop


Design Instruct: A Web Magazine for Designers and Digital Artists

Visual Inspiration: 30 Beautiful Dark Web Designs

A dark color scheme can work extremely well in a web design. Using primarily dark color tones can produce themes ranging from elegant and modern, to grungy and stylishly retro. In this collection, you will find amazingly beautiful dark-themed web designs from a variety of industries such as design, music, and photography, for your inspiration. Continue reading…

Continue Reading: Visual Inspiration: 30 Beautiful Dark Web Designs


Design Instruct: A Web Magazine for Designers and Digital Artists

Mr.Freeze: Comic Book Inspired Artwork


Mr.Freeze is a villain from the DC Comics franchise. He is one of  Batman’s many enemies. Dr Fries also known as Mr.Freeze was a cryogenics scientist who while attempting to save his terminally ill wife got into an industrial accident. After the accident, in order to survive, he had to wear a cryogenic body suit which allowed him to commit many crimes. He also had a cold gun which he would use to freeze people in order to commit these crimes. In this post I have compiled an amazing collection of Mr.Freeze inspired artwork from some very talented artists from around the world. Enjoy!

Want more articles on comic book artwork? Check out some of my previous post:

Superman: Comic Book Inspired Artwork

The Flash: Comic Book Inspired Artwork

Green Lantern Inspired Artwork

Captain America Inspired Artwork

Batman Inspired Artwork mr-freeze-artwork-1 The Mister Is In by Zatransis

mr-freeze-artwork-2 Countdown: Mr Freeze by YEx2

mr-freeze-artwork- (4) A Cool Getaway by King-Rastel

mr-freeze-artwork- (5) Arkham Portrait: Mr. Freeze by jeftoon01

mr-freeze-artwork- (6) Batman animated MR. FREEZE by Chadfuller

mr-freeze-artwork- (8) Batman Rogues – Mr Freeze by thedarkcloak

mr-freeze-artwork- (11) batman and mr.freeze by videsh

mr-freeze-artwork- (12) Cool, cruel Mr. Freeze by Bockom

mr-freeze-artwork- (13) Cold Combat by Jackademus

mr-freeze-artwork- (14) Mr Freeze – Snowfall by JoeVeen

mr-freeze-artwork- (15) Freeze by madart84

mr-freeze-artwork- (16) Freeze by seangordonmurphy

mr-freeze-artwork- (18) Freeze Version 2 by spicypeanut

mr-freeze-artwork- (19) Heart of Ice by OptimalProtocol

mr-freeze-artwork- (22) Mister Freeze by Twoface1077

mr-freeze-artwork- (23) mr… freezer? by duss005

mr-freeze-artwork- (24) mr. freeze. by pitakow

mr-freeze-artwork- (25) Mr. Freeze by DarkKnight60s

mr-freeze-artwork- (27) Mr. Freeze by funrama

mr-freeze-artwork- (29) Mr. Freeze by Maxnethaal

mr-freeze-artwork- (31) Mr. Freeze Watercolor by ScottyShoemaker

mr-freeze-artwork- (32) Mr Freeze by Abt-Nihil

mr-freeze-artwork- (33) Mr Freeze by Daniel Brandao by DanielBrandao

mr-freeze-artwork- (34) Mr freeze by E-Mann

mr-freeze-artwork- (35) Mr Freeze by mansloth

mr-freeze-artwork- (36) MR.FREEZE by markathy

mr-freeze-artwork- (37) Mr Freeze by namesjames

mr-freeze-artwork- (40) That’s Mister Freeze to you. by MK01

mr-freeze-artwork- (42) victor freeze by archangel73

mr-freeze-artwork- (43) WWP 09: Mr. Freeze by Underburbs

mr-freeze-artwork- (44) Mr. Freeze by DiegoMorales

mr-freeze-artwork- (45) Victor and Nora Fries by stratosmacca

mr-freeze-artwork- (46) 13 Nights 2008 MR FREEZE by Grimbro

mr-freeze-artwork-3 Mr Freeze – Illu by Maxnethaal

mr-freeze-artwork-4 mr freeze by duss005

mr-freeze-artwork-5 batman page 4 by cowboyfromhell0

mr-freeze-artwork-6 FREEZE TAG by duss005

mr-freeze-artwork-7 KidNotorious’ Mr. Freeze by billythebrain

mr-freeze-artwork-8 Mr. Freeze by PerfectCirkel

mr-freeze-artwork-9 Mr.Freeze by TheRealSurge

mr-freeze-artwork-10 Batman vs. Mr. Freeze by floorsweeper

mr-freeze-artwork-11 Batman vs Mr. Freeze by seniorgoldenspork

mr-freeze-artwork-12 Mr. Freeze by ErikVonLehmann

mr-freeze-artwork-13 Mr. Freeze by jeffclemens

mr-freeze-artwork-14 Mr Freeze by Tatious316

mr-freeze-artwork-15 I can’t feel you by my side by Dashiana

Posted in Compilation, Digital Art, Inspiration.


View the original article here

How to Make a Vintage-Inspired Movie Poster in Photoshop

Some common posters I keep seeing on Flickr are reinventions of movie posters, like the ones by Ibraheem Youssef, based on movies such as Scarface and The Big Lebowski. Most of the posters are very iconic in style, with some nice textures to simulate a vintage or minimalist look. Creating artwork inspired by movies is a good practice for creative thinking, and this is what we’ll try to do in this Photoshop tutorial, with the movie, Breakfast at Tiffany’s. Continue reading…

Continue Reading: How to Make a Vintage-Inspired Movie Poster in Photoshop


Design Instruct: A Web Magazine for Designers and Digital Artists

Create a Centaur Photo Manipulation in Photoshop

In Greek Mythology, the Centaurs are a wild and barbaric race of creatures — half man, and half horse. They have been described as typifying the struggle between civilization and barbarism. In this tutorial, we will create one of these mythological creatures by blending several images together and adding some dramatic lighting and depth to the scene. Grab your shield and prepare to do battle as we set out to encounter one of the greatest beasts ever known! Continue reading…

Continue Reading: Create a Centaur Photo Manipulation in Photoshop


Design Instruct: A Web Magazine for Designers and Digital Artists

Editing CSS Layouts in Dreamweaver CS5

Editing CSS Layouts in Dreamweaver CS5

Dreamweaver CS5 includes a new collection of CSS layouts you can customize to create webpage designs. These layouts are designed to work well in a variety of Web browsers, and they can help you avoid common problems with CSS. This tutorial shows you how to edit these layouts to make them your own.

1 CREATE A NEW PAGE
To use a CSS layout in Dreamweaver, create a new document by choosing File>New. Then, choose Blank Page from the left column and HTML from the Page Type column. Choose one of the more advanced options—such as ASP.NET, PHP, or ColdFusion—only if you’re working on a dynamic site. (If you’re not familiar with these technologies, stick with HTML.) From the Layout column in the middle, click to select a CSS layout and a preview of the layout is displayed in the top right of the dialog.

2 CHOOSE A FIXED OR LIQUID LAYOUT
Dreamweaver includes several layouts designed with two distinct approaches to CSS. When you create a new page with one of these layouts, the first thing you must do is decide which type you want to use. Essentially, you have two options: Liquid layouts are designed to expand and contract depending on the size of the browser window; fixed layouts are centered within the browser and set to a width of 960 pixels. Although there are some advantages to the flexibility of liquid layouts, you’ll have more design control with fixed layouts. We chose the 2 Column Fixed, Left Sidebar, Header and Footer layout.

3 SPECIFY HOW TO SAVE THE STYLES
When you save a CSS layout, Dreamweaver generates all of the CSS styles to create the layout as it creates the page. You can choose to save the styles in an internal style sheet or an external one. The Layout CSS drop-down menu includes three options: Add to Head creates an internal style sheet with all of the styles saved in the Head area of the file; Create New File saves all of the styles in a new external style sheet linked to the page; and Link to Existing File lets you add the styles to an existing external style sheet.

4 SAVE THE NEW PAGE AND STYLES
Click Create to open the page in the main workspace. If you chose to save the styles in an external style sheet, a dialog will first prompt you to save the style sheet separately. If the styles are contained in an internal style sheet, they’re saved automatically when you save the page. With the new page open, choose File>Save to save the page and the corresponding styles at the same time. It’s also good practice to add a page title as soon as you create a new page so you don’t forget to replace the words “Untitled Document” in the Title field.

5 EDITING TEXT IN A CSS LAYOUT
To add text, just click and start typing. You can replace any of the text in the page or simply delete it. Just be careful as you delete and replace text that you don’t remove the formatting unintentionally. Keep in mind that there is code behind the Design view and if you delete too much, you may turn a headline into plain text by accident. If this happens, just use Undo (Command-Z [PC: Ctrl-Z]) to restore the formatting, or use any of formatting features to format the text as you prefer. You format text in these layouts as you would format any other text on a page in Dreamweaver.

6 EDIT STYLES IN CSS STYLES PANEL
When you work with CSS layouts, the style information is saved in an internal or external style sheet. Either way, you can edit the styles in the CSS Styles panel. Choose Window>CSS Styles to open the panel. Make sure you have the All button selected at the top of the CSS Styles panel to view all of the styles. Click the triangle (PC: plus [+] sign) next to the style sheet name to open the style sheet and view the list of style names.

7 CHANGING THE WIDTH OF A CSS LAYOUT

The CSS layouts in Dreamweaver follow a common practice of using div tags as dividers (or boxes) around each element on the page and then using styles to describe how those boxes should be displayed. Each layout includes a div tag with a class style named .container that surrounds everything else in the layout. To change the width of the overall design, click on .container and change the Width in the CSS Styles panel. The fixed width of CSS layouts in version CS5 is 960 pixels wide, which is the recommended width for most pages on the Web today.

8 CLASS STYLES VS ID STYLES
In versions CS3 and CS4, layouts in Dreamweaver used a combination of Class and ID styles, but the layouts in CS5 use only Class styles. All of these layouts follow the rules of CSS, but they were created by different designers with different philosophies about CSS. ID styles can only be used once per page and are commonly used for the container, header, and footer styles in CSS layouts. Class styles can be used multiple times per page so they are more versatile. The designers who created the CS5 layouts preferred this option for all of the styles in these layouts.

9 REVIEW CSS STYLES
If you’re new to CSS, the layouts can be confusing at first because you can’t just change the colors or sizes of elements in the design area of Dreamweaver. You need to create new styles or edit the style that’s already associated with an element to change the color, width, or other formatting. A good way to start is simply by clicking on each style in the CSS Styles panel to get familiar with the rules defined in the style sheet. You can double-click on a style name in the CSS Styles panel to edit it in the CSS Rule Definition dialog.

10 EDIT PAGE-WIDE SETTINGS
To edit page-wide settings, such as the background color of the page or the main font face, size, and color of the text used throughout the page, double-click on the style named body in the CSS Styles panel. In the CSS Rule Definition dialog, select the Type category from the left to change font settings. Select the Background category and use the color well in the Background-Color field to specify a color for the entire background of the page. If you prefer, you can enter any hexadecimal color code in the Background-Color field. Click OK to save the changes.

11 ADD AN IMAGE TO THE HEADER
You can insert images into any section of a CSS layout just as you would any other page in Dreamweaver. To add an image into the header area, you should first delete the placeholder image with the text “Insert_logo (180 x 90).” You can insert an image of any size into the header area of the page. First, click to place your cursor in the header area, then choose Insert>Image and select any image on your hard drive and click OK. If the Image Tag Accessibility Attributes dialog opens, enter a brief text description in the Alternate Text field and click OK again.

12 EDIT THE SIDEBAR
You can change the color and width of the sidebar by editing the style named .sidebar1. Double-click on .sidebar1 in the CSS Styles panel to open it in the CSS Rules Definition dialog. Click on the Background category on the left to change the background color. To remove the background color, delete the hexadecimal color code from the Background field and leave it blank. To change the width, choose the Box category on the left, enter the width you want in the Width field, and choose a size option, such as pixels. Click Apply to preview the changes; click OK to save them.

13 EDIT LINK STYLES
The color, size, and style of the links in the left sidebar of the CSS layouts in Dreamweaver are controlled by three different style rules. The top border and bottom margin are defined in the style ul.nav; the bottom border is defined in the style ul.nav li. The way the links appear in the page is defined in the style ul.nav a, ul.nav a:visited. To change the rollover effect, edit the style name ul.nav a:hover, ul.nav a:active, ul.nav a:focus. Double-click the name in the CSS Styles panel to open any of these styles in the CSS Rule Definition dialog to edit them.

14 ALIGN IMAGES AND OTHER ELEMENTS
All of the CSS layouts that come with Dreamweaver CS5 include styles you can use to align images and other elements to the left or right of the page. To use these styles to align an image, insert the image and then select it. With the image selected, the Properties inspector at the bottom of the workspace changes to the image options. Click to open the Class drop-down menu and select fltrt (to align the selected image to the right using the float right style) or fltlft (to align the selected image to the left using the float left style).

ALL IMAGES BY JANINE WARNER UNLESS OTHERWISE NOTED


View the original article here

Font Collection: 10 Free Blackletter Fonts

Nov 12 2010 By Jacob Gube

Blackletter fonts, often also referred to as gothic script fonts, are an old style of fonts that dates back to the 12th century. Today, you can see them digitalized and used in typographic artwork, though it is rare to see them used as display fonts. In this font collection, you will find some lovely and free blackletter fonts.

By typesetter and type designer Dieter Steffmann, Cloister Blackletter is a popular gothic script font. See it used in Heinritzh Sales’s illustration tutorial, Creating Complex Style Illustrations: A Process.

Cloister Blackletter

Download Page

Another strong and interesting font by Steffmann, Blackletter has sharp, pointed ends at the bottom of the letters’ stems.

Blackletter

Download Page

The Canterbury Old English font embodies the spirit of the European medieval period.

Canterbury Old English

Download Page

German CAD and font designer Peter Wiegel designed this blackletter font that has tight ligatures and excellent contours.

Bertholdr Mainzer Fraktur

Download Page

Roger White, who recreates fonts using scanned artwork, designed Rochester, an expressive gothic script font.

Rochester

Download Page

This font is based on a manuscript that dates back to 1514 by a printer who lived in Paris, France named Wolfgang Hopyl.

ManuskriptGotisch

Download Page

A variant of Kingsthings Spike, this homage to blackletter fonts has fewer flourishes and is more legible than the original.

Kingthings Spikeless

Download Page

German type designer and writer Manfred Klein created this strong, thick, and organic gothic script font.

TypoasisBoldGothic

Download Page

The Hartwig-Schrift font is a bold German font face that appears to be very calligraphic in nature. The font’s compact aesthetic is due to its small amount of tracking.

Hartwig-Schrift

Download Page

Paul Lloyd, a type designer in Australia and a transplant from the UK, designed this bold gothic script font.

Germanica

Download Page

View the original article here

Make Artistic and Elegant Vector Artwork with Illustrator


In this tutorial, I will share the techniques that I use for creating artistic vector artwork with Illustrator. We will go over a few different ways that we can compose vector drawings together using reference images, how to use layer transparencies, and how to give our vector artwork a color-washed look with the use of Live Paint and color gradients. We will then finish off our work in Photoshop.


Preview


First, find a photo of a bird that you wish to trace over and use as a reference image. I found a picture of a bird that I like and just placed it into illustrator.


Drawing the Bird


Here are a few suggestions of birds you may wish to use to follow along with this tutorial:


Composition-wise, I’d like it better if the bird was facing the other way, so I reflect the image using Object > Transform > Reflect.


Drawing the Bird


When the Reflect dialog window pops up, I choose the Vertical option for the Axis, then I click OK to apply the reflection.


Drawing the Bird


Create a new layer on top of the bird image, and lock the bird image underneath so you don’t accidentally select and edit it while you are creating your artwork.


Now I’m ready to start tracing the outlines of the bird. I use a combination of the Pen Tool (P) and the Pencil Tool (N) to do this.


Drawing the Bird


When I get to the wings, in order to avoid having to draw each line from scratch, I take a vector path on the wing that I’ve already drawn, select it with the Selection Tool (V), copy it (Cmd/Ctrl + C) and paste it (Cmd/Ctrl + V). I then move this copied path in place to match up with the wings on the picture. I also rotate and scale the path using my Selection Tool. After rotating vector paths, it also helps to reset its bounding box since the bounding boxes rotate with them as you rotate them.


Drawing the Bird


I created the eye of the bird by drawing a circle using the Ellipse Tool (L). I scaled the circle that I made and rotated it to fit on top of the bird’s eye on the reference photo.


Drawing the Bird


For the pupils, I duplicated the first circle by selecting it, copying it (Cmd/Ctrl + C) and then pressing Cmd/Ctrl + B (which pastes the copied object behind the original object). Then I scaled it down to match the size of the bird’s pupils.


Drawing the Bird


Drawing the feet was more difficult. The Pen Tool (P) is good for making straight lines and nice curves, but for things that are more organic and with a lot of detail like the bird’s feet, the Pencil Tool (N) might be more useful. Play around with the settings of the Pencil Tool (N) by double-clicking its icon in the Tools Panel (which will open up the Pencil Tool Option dialog window) and testing these settings by drawing a few strokes on the artboard to see what works for you.


Drawing the Bird


After tracing the outline of our bird, I now have something that looks like this:


Drawing the Bird


Now we move onto editing the head of the bird. If you like the head of your bird as it is, you can ignore the following process. But, me, I chose to tweak my bird’s head a bit. First, I made a duplicate of the original bird and stored it in another layer. I wanted to edit the head of the bird so that it’s more stylized and customized. I drew an alternative head using the Pen Tool (P) and the Pencil Tool (N). Then to replace the original head of the bird, I cut the original using the Scissors Tool (C) and attached the new head in its place.


Drawing the Bird


Drawing the Bird


I also edited the body of the bird by making it shorter and stouter. I did this by selecting the vector path that creates the length of the bird’s body and then transforming its height.


Drawing the Bird


Here is a comparison of the new bird (left) versus the old bird (right):


Drawing the Bird


I have had a lot of practice creating flower shapes in Illustrator because I enjoy incorporating them into my artwork. For this piece, I wanted to use basic shapes to construct the flowers. If I wanted a more natural-looking flower, I might have drawn it from a reference photo as I did with the bird, but I think using basic shapes would work better for the effect I want to achieve in this comp.


I start by choosing View > Show Grid, View > Snap to Grid, and View > Snap to Point to help me draw the flowers.


Drawing Flower Shapes


Using the grid as a guide, I begin drawing a shape that will help me create a single petal.


Drawing Flower Shapes


If I am happy with this path, I select and copy it (Cmd/Ctrl + C) and paste it behind the original path (Cmd/Ctrl + B). Then, without changing anything already selected, I choose Object > Transform > Reflect to get the mirror image of the line I just drew.


Drawing Flower Shapes


I can move the selected line into place using the arrow keys. I can also use the Shift key plus any of the arrow keys to move objects at greater increments. I use the grid as my placement guide.


Then, using the Lasso Tool (Q), I select the two points that connect the top of this shape and then choose Object > Path > Join (Cmd/Ctrl + J) to connect the two paths.


Drawing Flower Shapes


I now have a completed petal shape! Now I want to make one that’s more rounded. I use the same process to make a stouter petal shape.


Drawing Flower Shapes


Then I return to the first shape I made, to make it into a flower. First, I make a copy of the shape I made and paste it somewhere in the artboard that allows me to work. Then, I select the whole shape that I’ve just copied and I bring it to another area of the artboard before duplicating it again. I then move the newest duplicated shape to the side of the first shape using Shift + arrow keys until the two shapes look something like this. 


Drawing Flower Shapes


Using the grid as a guide, I cut off part of both shapes with the Scissors Tool (C). After using the Lasso Tool (Q) to select the endpoints of the two paths I want to join, I hit Cmd/Ctrl + J to join them. I’m now left with the following shape:


Drawing Flower Shapes


Next, I make another copy of the original shape and place it with the two connected shapes to end up with this:


Drawing Flower Shapes


I make more copies of the petals, and after making the appropriate rotate and scale transformations, I end up with a shape that looks sort of like a lotus flower:


Drawing Flower Shapes


Let’s move on to producing another flower shape. I select the rounded petal that I made earlier, duplicate it (pressing Cmd/Ctrl + C, then Cmd/Ctrl + B), and then rotate the duplicate. Continue duplicating, rotating, and repositioning until you come up with this shape:


Drawing Flower Shapes


This should be easy if the center of your flower is situated on a single point on the grid, as your rotated flower petals will snap to this point. This happens because we selected the  Snap to Grid and Snap to Point options earlier in this step. If you are having trouble with moving your objects around because of these options, feel free to turn them off.


For these flowers, I ended up using a color gradient that I’ve used in a previous piece I made; it’s great to use elements from your older pieces because it gives your entire body of work some sort of pattern and unity. By the way, if you’re looking for color scheme ideas, I encourage you to visit COLOURlovers to download color palettes that you can use in your artwork.


You can use the Gradient Panel to develop your color gradient. I used a radial gradient.


To make it easier to apply the color gradient, I created a square object on the artboard and applied the color gradient onto it. Now, I only have to sample from this square to color the flowers.


Drawing Flower Shapes


Now that we have a color gradient to sample from, we are ready to give our flowers some color. Select all the paths in the first flower, press Cmd/Ctrl + G to group them together, then while the flower is still selected, use the Eyedropper Tool (I) to click on the box with the gradient color. Using the Eyedropper Tool in this way samples the color from the square object and applies the same color properties to the currently selected objects. Do the same thing with the second flower to give it a fill as well.


Drawing Flower Shapes


Now let us move on to making another version of the shape we’ve just made — just for variety. Make a duplicate of the flower and paste the duplicate somewhere else on the artboard. Cut the paths using either the Cut Tool or Scissors Tool, like so:


Drawing Flower Shapes


Convert the shape into Live Paint by selecting it entirely and going to Object > Live Paint > Make.


Drawing Flower Shapes


While this object (now a Live Paint object) is still selected, use the Eyedropper Tool (I) and click the square object containing our color gradient to apply color to the selected object.


Duplicate this object and play around with the options within the Gradient Panel to get different effects.


Drawing Flower Shapes


Now we are going to develop the center part of the flower. After selecting a yellow shade that you like for your Fill color (the shade I used is #e2b25d), use both the Ellipse Tool (L) and Pen Tool (P) to create the shape shown below:


Drawing Flower Shapes


Select all components of the shape, group them (Cmd/Ctrl + G), then copy and paste the group to create another copy. Continue rotating and reflecting the group as we did in previous steps to create the center of the flower.


Drawing Flower Shapes


Select all the groups, hit Cmd/Ctrl + G to group everything together, then go to Object > Expand. This is to make sure that after enlarging or shrinking the shape, the proportions of the strokes (lines) to the circles stay the same.


Drawing Flower Shapes


Drag the shape we made on top of the flower shapes we made.


Drawing Flower Shapes


Group each flower and its center together to make moving individual flower shapes around the artboard easier.


Next, we will create a sort of tree bark where the flowers will sit on top of. Use the Pen Tool (P) to draw the bark.


Create a Tree Bark


To make the drawing process of the tree bark faster, I just selected what I had drawn for one end of a piece of bark, copied (Cmd/Ctrl + C) it, pasted it (Cmd/Ctrl + B), reflected the copy, and then joined the original and the copy. You can also make a more detailed and intricate piece of bark if you prefer; let your creativity drive the artistic process.


Create a Tree Bark


After positioning the shapes the way I want them on the artboard, I then joined the two shapes together and painted the whole bark shape by turning it into a Live Paint object and using the Live Paint Bucket Tool (K) to color it in.


I then made sure that the piece of bark was on a layer underneath the flowers, then I arranged the flower shapes on top of the bark.


Create a Tree Bark


This step can be done differently if you are already using Illustrator CS5. Illustrator CS5 comes with the Draw Behind command that makes this process easier.


But I am still using Illustrator CS4 — and I’m sure many of your are too. So what we will do is create a faux layer mask (you’ll see what I mean by this shortly).


To start, create a new Illustrator document with an artboard the size that you would like your final work to be. I recommend setting Size to Letter for this artwork if you have nothing specific in mind.


Creating a Mask


Take the bird we created earlier and paste it on the new artboard. You can rotate it to find the right position you like.


Creating a Mask


Duplicate the bird in a new layer. You will use this duplicated bird later on; just lock this layer and hide its visibility for now.


Using the Rectangle Tool (M), create a rectangle just outside the edges of the artboard. You do not need to make a shape that follows the artboard exactly because we will be exporting the scene later on using the Export > Use Artboard command. As long as the rectangle is bigger than the artboard, you are all set.


Creating a Mask


Select one of the copies of the bird as well as the rectangle. Go to Object > Live Paint > Make to convert the bird and the rectangle shape into a Live Paint group that can be colored in using the Live Paint Bucket Tool (K).


Creating a Mask


While this new Live Paint group is still selected, set both the Fill color and Stroke color to None. Deselect the Live Paint group by clicking elsewhere on the artboard with your Selection Tool (V) or going to Select > Deselect (Shift + Cmd/Ctrl + A).


Click on the Live Paint Bucket Tool (K) in the Tools Panel to make it the active tool. With the Fill color set to white, click on the space between the outline of the bird and the rectangle to fill this space with white. Lock the layer that contains this Live Paint group. You now have a faux mask that you can work on underneath. You will not see a change in the image, but now we can work with the space inside the bird and fill it up with the flowers we created earlier.


Create a new layer and drag it underneath the layer that contains our Live Paint object (bird and rectangle). On this new layer, paste in the flowers we created earlier and drag them underneath the bird on the artboard. You will see that the flowers are only visible inside the outline of the bird because the space outside of the bird was filled with white (thus, it’s sort of like a layer mask).


Creating a Mask


Creating a Mask


Duplicate, scale, and reposition the flowers around the inside of the bird until you are happy with the outcome. Below, I’ve already changed the outline color of the mask to None (from black).


Creating a Mask


To add another element to our composition, we’re going to use an ampersand (&), which will be placed around the feet of our bird. Pick a good font for the ampersand and then use the Type Tool (T) to place it on the artboard.


Add an Ampersand Element


In Step 3, I mentioned that I made a duplicate of the bird in a new layer to use for later. This is that later. Take the duplicate and duplicate it again (Cmd/Ctrl + C and then Cmd/Ctrl + B) in a separate layer. Hide and lock the layer that contains the duplicate so we have a backup.


We are going to add color to the unlocked and visible copy of the bird.  Convert the bird into a Live Paint object by going to Object > Live Paint > Make. We’re using Live Paint objects a lot because it truly makes filling in complex vector artwork much easier.


Adding More Color to the Bird


I made another radial color gradient that has a yellow center and pink on the outside. I then applied the color gradient as a Fill color of a rectangular object so that I can later on apply it using the Eyedropper Tool (I).  Then I selected the new Live Paint of the bird, switched to the Eyedropper Tool (I) and then clicked on the rectangle with the color gradient to apply it onto the bird.


Adding More Color to the Bird


Open up the Transparency Panel (if you don’t have it open) by going to Window > Transparency (Shift + Cmd/Ctrl + F10). Alter the Transparency of this layer by first making sure that it is the active layer in the Layers Panel, then choosing Multiply from the dropdown menu in the Transparency Panel.


Adding More Color to the Bird


Adding More Color to the Bird


Select the Live Paint object again, and then copy and paste it onto a new layer. Set the Transparency of this layer to Multiply as well.


Adding More Color to the Bird


Move this duplicated layer elsewhere on the artboard so we can edit it further. What I want to do now is give the illusion that it has more feathers, so I want to edit this copy of the bird by making it look more like wings instead of an entire bird. Also, I’ve duplicated the bird shape again so I have a backup bird to work with in case I make a mistake.


I edit the Live Paint object by using the Pencil Tool (N) to edit the lines while they are selected.


Adding More Color to the Bird


Adding More Color to the Bird


When I finally have the shape I want, since this layer is set with a transparency of Multiply, I can just drag this object that now looks like an extra wing on top of my bird artwork. Afterwards, I rotate and scale it to get it to sit the way I want.


Adding More Color to the Bird


For this next step, I’ve changed the placement of the ampersand (&) by moving it a little further away from the bird so that they are not touching. Notice the position and size is perfect with the feet and tail of the bird descending along the top portion of the ampersand. When creating artwork, it’s these little details that I find make the biggest difference.


I create outlines out of the ampersand (&) by selecting it with the Selection Tool (V) and then going to Type > Create Outlines (Shift + Cmd/Ctrl + O).


Filling In the Ampersand


Now I want to make this ampersand part of the Live Paint group so the faux white mask we created earlier can affect it. This also means that I can add flowers underneath the ampersand outline. While both the ampersand and the Live Paint layer with the mask is selected, go to Object > Live Paint > Merge.


Filling In the Ampersand


Next, change the Fill color of the ampersand to None using the Live Paint Bucket Tool (K). Now we can arrange some flowers underneath the ampersand shape, just like we did for the bird.


To add a background color to the ampersand, make a new layer underneath both the masking layer and the layer that contains the flowers. Make a shape that roughly traces the ampersand sign, making sure that no points of this new shape are visible inside the ampersand shape. Drawing this shape very roughly is OK because the mask will hide its edges.


Add color to this new shape by selecting it and then using the Eyedropper Tool (I) to add the pink-yellow color gradient from the rectangular box we created in the previous step. If the order of your layers is correct, this color will show up underneath the flowers and it will be masked by the ampersand shape (as shown below).


Here is the shape I drew (with all other layers hidden):


Filling In the Ampersand


Here is how the shape fills the ampersand (all layers are visible):


Filling In the Ampersand


Filling In the Ampersand


You can add more color by using more color gradients and using the Paint Bucket Tool to fill in selected parts of the composition, since many of the layers in this artwork are composed of Live Paint object. For example, I added a pink-and-black gradient fill.


Filling In the Ampersand


Now that I am happy with the way my artwork looks, I am ready to export it to Photoshop where I will apply the finishing touches. I also decided to export some flower shapes that I can use as color samples for when I work in Photoshop.


Exporting the Artwork


First, export the main artwork by going to File > Export. When the first dialog window appears, make sure the Use Artboard option is checked. This will export our artwork exactly how it appears within the artboard we composed it in. In my example, the flowers are outside the artboard, so they will not be included in the export.


There will be a second dialog window called PNG Options; below, you can see the settings I use for the PNG options.


Exporting the Artwork


This is the final step. First, open our exported artwork in Photoshop.


Next, we need to download, install and load the Free Hi-Res Watercolor Photoshop Brushes Set II. I try to use these brushes sparingly because as good as they are, they are free and have become popular, and I regularly see them used in many great digital artworks. Alternatively, check out the free Photoshop brushes in the Freebies section here on Design Instruct.


Detailing in Photoshop


Our artwork (since we exported it) is in PNG format. We should save it as a PSD file (File > Save As). Next, in the Layers Panel, click on the only layer there is and duplicate it (Cmd/Ctrl + J). We now have two identical copies of the same layer. Select the topmost layer in the Layers Panel. Switch to the Magic Wand Tool (W) and set the Tolerance option to 1. With the Magic Wand Tool, click on the white background part of the artwork and press Delete to remove it.


Detailing in Photoshop


Choose a brush from the brush set we downloaded and set it to a size that you like. On a new layer, apply the brush on top of one of the flowers. Create a selection around the brush stroke by choosing Select > Load Selection.


Detailing in Photoshop


Detailing in Photoshop


Next, select the flower layer below the brush stroke. Using the Move Tool (V), drag this selection into the PNG image of the bird and ampersand. Put this layer underneath the first layer of the bird and ampersand (&) that has the white background deleted.


Detailing in Photoshop


Using either solid colors of your preference or colors sampled from the flower gradients, add different strokes and colors on separate layers both above and below the image of the bird with the ampersand. Press Cmd/Ctrl + T while a layer is selected to transform the different strokes you make, giving them variety. Use the Move Tool (V) to place them around the bird until you get a comp that you like!


You can even adjust the Hue/Saturation of some of the strokes by going to Image > Adjustments > Hue/Saturation. Also, play around with layer blending modes of the watercolor splatters.


Here are some of the strokes I made (without the layer with the bird and ampersand visible):


Detailing in Photoshop


When you feel that your composition is finished, just save your artwork in the format you want and you’re done!


In this tutorial, we covered many techniques for composing artistic artwork in Illustrator. We then finished off our work in Photoshop by adding detailing elements (particularly watercolor splatter brush strokes). I hope you found this tutorial to be helpful!


Preview


View the original article here

Make a Divinely Dark Zen Composition in Photoshop


In this Photoshop tutorial, we will photo manipulate different photos, textures and organic elements to produce a mysterious Zen-inspired composition. We will produce a dominantly monochromatic piece that we will then sprinkle with hints of color to bring our work into another level. We will explore the use of the Color Range command, image adjustments, warping and blurring to give a sense of motion and depth, and much more.


Click the image below to view the full size.


Preview


Make a new document in Photoshop (Ctrl/Cmd + N). It should be 11in wide and 17in high, with Resolution set at 300pixels/inch.


Create the Document


This composition will consist mainly of white, black and gray tones, so we need to set our background to a light-color tone to draw the eye of the viewer on the subject (which will be the statue and the trees). However, keeping a certain level of detail even on non-focal points really goes a long way in giving the image the mood we are after.


To begin our work, download and open the Mountain stock image listed under the Tutorial Resources section. Desaturate the stock image (Shift + Ctrl/Cmd + U).


Bring up the Levels image adjustment window (Ctrl/Cmd + L) and apply the following settings:


Develop the Background


As you can see, we adjusted the levels of the stock image by taking away most of the black tones and keeping the light gray and white tones.


Place the image into our main Photoshop document and then press Ctrl/Cmd + T to use Free Transform. Hold down Shift and click-and-drag the corner transform controls until we size the image such that it covers the entire canvas. Note that you should always hold down Shift when using Free Transform to rescale an image so that you are maintaining its proportions.


Develop the Background


We will now develop a base for our statue to nest upon. To start, locate a stock photo of a rock or stone of your preference. It might even be a mountain range if you wish (you can just scale it to proportion).


Here are some suggestions to get you started:


Next, we need to extract the rock or stone that we chose from its background. There are many methods for this, but my method for images with complex backgrounds (as opposed to a solid-color background) is manual selection using the Pen Tool (P). Use the Pen Tool to draw a path along the shape of the rock. Make sure you retain as much detail as possible because this will be the base of the statue and it will be one of the more prominent elements in our comp.


When you finish drawing the path with the Pen Tool, right-click somewhere inside it and choose Make Selection. Then invert your selection (Shift + Ctrl/Cmd + I) and delete the area underneath the inverted selection.


Create the Stone Base for the Statue


Desaturate the image (Image > Adjustments > Desaturate). Access the Levels image adjustment window again (Image > Adjustments > Levels) and apply the following settings:


Create the Stone Base for the Statue


Go to Filter > Sharpen > Sharpen; the Sharpen filter will add a bit more coarseness to the rocks/stone surface and enhance its highlights.


Once you’re satisfied with the base of the statue, place it on the lower part of the canvas. Use Free Transform (Ctrl/Cmd + T) to resize the base as needed.


Create the Stone Base for the Statue


Duplicate the layer (Ctrl/Cmd + J) twice and move the duplicates behind the original stone. Place them on each of the sides at the bottom to fill the rest of the base for the statue.


Create the Stone Base for the Statue


Download and open the Statue stock image listed in the Tutorial Resources section. Extract it from its background using the Pen Tool (P).


Incorporating the Statue


Open the Levels image adjustment window (Ctrl/Cmd + L) and apply the suggested settings below. This Levels image adjustment will make the statue darker so that it blends better with the tone of its base and the background.


Incorporating the Statue


Place the statue in our main document, on top of the rock layers (its base).


We are now going to mask away parts of the statue to make it appear as if it was growing out from the rocks.


First, add a layer mask to the statue layer by clicking on the Add layer mask button at the bottom of the Layers Panel. Set the layer mask’s Opacity to 30% so that we will be able to see the shapes on the rocks — this in turn will help us make our selections in the following processes.


Take the Pen Tool and draw a path along some of the edges along the shapes inside the stone, trying not to cover too much of the statue.


Incorporating the Statue


Then make a selection out of the path you drew with the Pen Tool (right-click, choose Make Selection) and fill the selection with black (Edit > Fill or Shift + F5).


Incorporating the Statue


The statue still doesn’t look fully integrated with the rocks. To fix the issue, we are going to take parts of the statue and blend them into the rocks. Take the Pen Tool and draw a path along the curved shape on the top right part of the statue, make a selection out of your Pen Tool’s path, then copy (Ctrl/Cmd + C) and paste (Ctrl/Cmd + V) the selected area.


Incorporating the Statue


Go to Edit > Transform > Flip Horizontal and place it on the lower left side of the statue.


Take the Eraser Tool (E) and delete parts overlapping the statue body.


Incorporating the Statue


Duplicate the layer a couple more times and place them around the main rocks shape. Using a layer mask or the Eraser Tool (E), mask away/erase the parts that would be hiding behind the rocks or the statue.


You can also rotate and use Edit > Transform > Flip Vertical for some of the shapes to give more variety to its orientations.


Incorporating the Statue


Use Levels image adjustment (Ctrl/Cmd + L) to darken some of the shapes according to the tone of the rocks.


Download and open the Tree 1 stock image in Photoshop. Click on the only layer in the Layers Panel and press Ctrl/Cmd + J to duplicate the layer. To extract the tree from its background, we are going to use the Color Range command, found by going to Select > Color Range. But first, we need to make all the details of the trunk and the branches perfectly black — and the rest of it white — to make a quick and detailed selection.


We will need to use the Brightness/Contrast image adjustment (Image > Adjustments > Brightness/Contrast) and the Levels image adjustment until the tree is black.


Here are the settings used for the Brightness/Contrast image adjustment:


Working on the Trees


Here are the settings used for the Levels image adjustment:


Working on the Trees


Once you are happy that the image is now black and white, go to Select > Color Range and, in the Color Range dialog window, click on the white part of the image to select it. Press OK to exit out of the Color Range dialog window.


Working on the Trees


Now click on the original tree layer in the Layers Panel to ensure that it is the active layer, and then press Delete to remove the white areas under the Color Range selection.


Working on the Trees


Take Eraser Tool (E) and delete some of the branches that were cut off on the edges, as well as branches that don’t look good.



Once you are satisfied, place the tree into our main document, under the rocks layers.


Working on the Trees


Open the Tree 2 stock image listed under the Tutorial Resources section. Extract the branches of the stock image from their background using the same Color Range method that we used for the first tree stock image. Once the branches have been extracted, place the tree under the tree trunk on the upper left portion of the canvas in our main document.


Working on the Trees


In this step, we are going to add some color that will beautifully contrast against the monochromatic background, giving the image an interesting and organic look.


To start, download, open, and extract from its background the Leaf stock image listed under Tutorial Resources. Once done, place the leaf in our main document.


Resize the leaf down using Free Transform (Ctrl/Cmd + T) to fit the scale of our composition. Duplicate the leaf layer several times by pressing Ctrl/Cmd + J. Place the leaves on top of the little black leaves on the trees.


Adding Leaves for Color


Let’s do a bit of housekeeping because our Layers Panel is getting big. You can select all the leaves layers in the Layers Panel and group them (Ctrl/Cmd + G) or merge them into one layer (Ctrl/Cmd + E).


Keep duplicating the leaves and placing some between the tree and the branches layers.


Adding Leaves for Color


Create bigger leaves by copying the original extracted leaf and scaling it down, but not as much as the other leaves.


To give more movement to the big leaf and to give it the impression that it is blowing in the wind and falling down from the tree, go to Image > Transform > Warp and make it curve in the middle.


Adding Leaves for Color


Duplicate this layer several times (Ctrl/Cmd + J) and place the duplicate layers on top of the statue and the rocks.


Adding Leaves for Color


Next, we’re going to add light streaks to give our composition an added point of interest. It will also serve to enhance and support the touches of color that the leaves give our piece, as well as provide a stark contrast to the stillness of the entire composition theme with some moving elements. Download and open the Fractal stock image, then place it in our main document. Since it has a solid background (which is black), we can just later on mess around with layer blending modes instead of extracting the fractal from its background.


Use Image > Transform > Warp to change the shape of the fractal such that you give it flowing, curvy lines; try to match the shapes of the statue.


Creating Light Streak Effects


Once you’re happy with the shapes of the fractal, set the Blend Mode to Screen to remove the black background.


Creating Light Streak Effects


Add more light streaks throughout the piece, such as in the tree trunk and its branches using the same procedure as above.


Creating Light Streak Effects


To give our composition a nice perspective, we will add elements that are closer to the viewer’s point of view. Since they are closer, we will modify their sharpness depending on how close or far away they are, to give our piece an even greater feeling of depth.


To start, duplicate the main tree layer and place it on top of all the layers. Next, go to Filter > Blur > Gaussian Blur, setting the Radius to about 5.9px.


Adding Objects That Are Closer to the Viewer


Duplicate the blurred layer once again and rotate it using Free Transform (Ctrl/Cmd + T). Place the rotated tree layer on the other side of the image. Be sure you don’t cover too much of the main focal point, which is our statue.


Adding Objects That Are Closer to the Viewer


Duplicate the original leaf layer and apply a Gaussian Blur filter. Keep this leaf bigger than the other leaves so that it gives the illusion that it is closer to the viewer.


Adding Objects That Are Closer to the Viewer


This is our final step, and the aim is to now finish off our entire image with a nice overall effect. What we will now do is add a paper texture that will give the image an old, grungy effect.


First, download and open the Paper texture stock image listed under Tutorial Resources and place it in our main document. Resize the Paper texture so that it fills the whole canvas using Free Transform (Ctrl/Cmd + T). Set the Paper texture’s Blend Mode to Multiply.


There are some parts of the texture where the effect may be too strong. To fix the harsh parts of the texture layer, you can take the Eraser Tool (E) with a soft round brush (about 500px Master Diameter and 50% Opacity) to remove them.


Adding Textures


Using Photoshop, we created a grayscale comp with hints of color to enhance the mood and details of the piece. We went over some extraction techniques to get detailed object isolations (such as the Color Range command) and how to use blur filters to give the image the feeling of movement and depth. We relied on Levels image adjustment and Brightness/Contrast image adjustment to get the colors we want. I suggest you try different combinations of color and textures; think about new concepts where you can integrate these elements and don’t be afraid to experiment with contrasting tones even on primarily monochromatic images, where they make a huge impact.


I hope you enjoyed this tutorial and please share your thoughts as well as questions in the comments!


Preview


View the original article here

Create a Grungy Scene with Colorful Lights in Photoshop

In this Photoshop design tutorial, we are going to be creating a striking, dark-themed piece with colorful highlights using stock photos, textures, and Photoshop brushes.  The scene is built around a raven and a clock that represents fate and waiting for your time to come. With this tutorial, however, we will be depicting this theme in a fresh and edgy way that will surely give you some new things to try in Photoshop! Continue reading…

Continue Reading: Create a Grungy Scene with Colorful Lights in Photoshop


Design Instruct: A Web Magazine for Designers and Digital Artists