Photoshop is a fantastic tool to help you create all types of artwork. By combining the right photographs, you can say just about anything you want without saying a word. In this Tuts+ Premium tutorial, author Mario Sánchez Nevado will demonstrate how to create a politically charged photo manipulation using quite a few stock photographs. This tutorial is available exclusively to Tuts+ Premium Members. If you are looking to take your photo manipulation skills to the next level then Log in or Join Now to get started!
Tuts+ Premium Members can login now for instant access to this tutorial. Membership to Tuts+ Premium gets you access to hundreds of exclusive premium tutorials, top selling ebooks, in-depth courses, member forums, and much more. To learn more about Tuts+ Premium, Take the Tour or Join Today.
View full post on Psdtuts+
Incoming search terms:
- Published News Upcoming News Submit a New Story Groups creation of
- Published News Upcoming News Submit a New Story Groups psychology projects
- Published News Upcoming News Submit a New Story Groups custom logo design company
- Published News Upcoming News Submit a New Story Groups environmental impact
- Published News Upcoming News Submit a New Story Groups used classic motorcycles
- Published News Upcoming News Submit a New Story Groups creative business cards
- Published News Upcoming News Submit a New Story Groups freelance writing jobs
- Published News Upcoming News Submit a New Story Groups example teacher reflection elementary science
- Published News Upcoming News Submit a New Story Groups surreal art
- Published News Upcoming News Submit a New Story Groups writing contests
- Published News Upcoming News Submit a New Story Groups distance between
- create a surreal politically-charged photo manipulation
Photoshop is a fantastic tool to help you create all types of artwork. By combining the right photographs, you can say just about anything you want without saying a word. In this Tuts+ Premium tutorial, author Mario Sánchez Nevado will demonstrate how to create a politically charged photo manipulation using quite a few stock photographs. This tutorial is available exclusively to Tuts+ Premium Members. If you are looking to take your photo manipulation skills to the next level then Log in or Join Now to get started!
View the Tutorial
Tuts+ Premium Members can login now for instant access to this tutorial. Membership to Tuts+ Premium gets you access to hundreds of exclusive premium tutorials, top selling ebooks, in-depth courses, member forums, and much more. To learn more about Tuts+ Premium, Take the Tour or Join Today.
You might be surprised how many images are sharpened at some point in Photoshop before you see them in print or online. In this detailed tutorial we will explain how sharpening works, when you should apply sharpening to your images, and how best to do it during the post production process. Let’s get started!
The talented designers over at Slashthree have recently released a new exhibition that they named Quote Unquote. Each work of art features an interesting quote that the artist decided to draw inspiration from. The whole exhibition contains over 50 various types of works that range from visual illustrations, photographs, and even music.
We Are of Peace Always by Erik Schumacher
Time by Ed Lopez
They Were Here by Alexander Latille
The Creators by Anthony Giacomino
Spirit by Przemek Nawrocki
Rebirth by Wojciech Magierski
Dark Allies by Rob Shields
The Left Hand of Darkness by Rob Shields
Locus Amoenus by Anthony Giacomino
Impact by Martin De Diego Sadaba
Hammer to Fall by Leonardo Dentico
Esta Especie De Alma by Samuel Pereira
Erinye by Wojciech Pijecki
Don’t Watch TV on LSD by Vladimir Tomin
Carry the Fire by Marco Casalvieri
Carefull What You Fish For by Vladimir Tomin
The Mountains Are Calling And I Must Go by Neil Hanvey
Enimies Still Stay by Tarin Yuangtrakul
La Martiniana by Edmar Cisneros
Land Within by Ed Lopez
More Information
Keep an eye on the Slashthree home page, as well as their Facebook and Twitter accounts for announcements and updates! For now though, please feast your eyes on Exhibition 17: “Quote Unquote”.
This tutorial is another collaboration with a very good friend Ciursa Ionut. In this web design tutorial we will create a portfolio web layout using fabric textures. You will be taken through the process of designing the logo using Adobe Illustrator, creating spotlights for the "services" area and how to apply textures to the layout in a subtle way that will increase the quality of the final result. Let’s get started!
Tutorial Assets
The following assets were used during the production of this tutorial.
Introduction
In this tutorial we will use the 960 Grid System. Download it and unzip the archive file. Then open the “960_grid_12_col.psd” file in Photoshop.
The 12 red columns that you see is the grid that we are going to use. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer. This PSD file contains some guides as well, which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Command/Ctrl + ;. I usually hide the red bars and activate the guides whenever I need them.
Also, smart guides are very useful when designing web layouts. Activate/deactivate them by going to View > Show > Smart Guides. They will help you align each layer depending on the position of other layers.
During this tutorial you will be asked you to create shapes with certain dimensions. When you create a shape you will see its exact width and height in the Info panel (Window > Info).
Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. Let’s get started!
Step 1: Setting up the document
Open the "960_grid_12_col.psd" file in Photoshop. Then go to Image > Canvas Size and set the width to 1200px and the height to 2400px. This will give us enough space to work with.
Step 2: Creating the header of our web layout
Create a new group and name it "Header". Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 520px and the color #595e61. Name this layer "header bg", right-click on it and select Convert to Smart Object.
Go to Filter > Noise > Add Noise and use the settings from the image below. This will create a nice subtle texture.
Download this pack of fabric patterns and open the .PAT file in Photoshop. Then double-click on the "header bg" layer to open the Layer Style window and add a Pattern Overlay effect with the settings from the image below and a pattern from the pack you downloaded.
Step 3: Creating the navigation background
Select the Rectangle Tool (U) and create a rectangle at the top of your document with the height 120px and the color #000000. Name this layer "navigation bg". Set the Fill of this layer to 20%, double-click on it and use the settings from the image below for Inner Shadow.
Now we will add a circle to the "navigation bg" layer to make room for the logo later on. Select the Ellipse Tool (U) and click on the "Add to shape area (+)" button from the option bar above your image.
Click on the vector mask of the "navigation bg" layer to make it active. Then using the Ellipse Tool, hold down the Shift key and create a circle in the middle of the navigation bar with the radius 140px. Take a look at the following image for reference.
Step 4: Creating a dotted line pattern
Create a new document (Command/Ctrl + N) with the dimensions 3px by 1px. Zoom in as much as you can. Then select the Rectangular Marquee Tool (M) and create a square selection as you see in the following image. Create a new layer and fill the selection with white.
Hide the "Background" layer by clicking on its eye icon. Then hit Command/Ctrl + D to deselect. Save your pattern by going to Edit > Define Pattern. Give your pattern a name and click OK.
Go back to your web layout document. Select the Line Tool (U) and set the Weight to 1px. Then hold down the Shift key and create a horizontal line at the bottom of your navigation bar.
Set the Fill of this layer to 0% and the Opacity to 20%. Double-click on this layer to open the Layer Style window and add the pattern you created earlier.
Now we need to erase the area of the dotted line that goes over the circle. Use the Rectangular Marquee Tool (M) to select that area. Then go to Layer > Layer Mask > Hide Selection.
Step 5: Adding gradients to the header background
Use the Rectangular Marquee Tool (M) to create a selection as you see in the image below (1). Then go to Layer > New Fill Layer > Gradient and use the settings from the following image (2).
Click on the mask of this layer to make it active. Then select a black soft brush (B) and paint with it over the area where the gradient covers the navigation bar circle (3). Set the opacity of this layer to 3% (4).
Now we will add a radial gradient at the bottom of the header background. Hold down the Command/Ctrl key and click on the thumbnail of the "header bg" layer to load a selection of it. Then go to Layer > New Fill Layer > Gradient and use the settings from the image below (1).
With the Gradient Fill window still opened, click on your image and drag down. Set the blend mode of this layer to Soft Light 40%.
Step 6: Adding subtle grunge brushes to the header background
Download this pack of brushes and open them in Photoshop. Create a new group and name it "brushes". Then create a selection of the "header bg" layer (hold down the Command/Ctrl key and click on its thumbnail). Make sure that the "brushes" layer is active and go to Layer > Layer Mask > Reveal Selection. Now everything we put inside this group will be visible only over the header area.
Create a new layer inside this group. Set the foreground color to white. Select the Brush Tool (B) and use some of the brushes you downloaded to add a subtle grunge effect to the header. Create a new layer for each brush you use and adjust the opacity of each layer. Then set the blend mode of the "brushes" group to Soft Light. Take a look at the following image for reference.
Step 7
Select the Line Tool (U), hold down the Shift key and create a horizontal line with the Weight 1px and the color #50565a. Name this layer "1px line" and put it at the bottom of the header area.
Duplicate this layer (Command/Ctrl + J), select the Move Tool (V) and hit the up arrow key on your keyboard to move it one pixel up. Change the color of this line to #8e9496.
Step 8: Creating the logo
To create the logo we will use both Adobe Photoshop and Illustrator. First, we will create the text and a circle with dashed stroke in Illustrator and then we will complete the logo using Photoshop.
Fire up Adobe Illustrator and create a new document. Select the Type Tool (T) and write "My Folio". Put each word in a separate object. The font that I used is called Akzidenz-Grotesk Condensed Medium Italic.
Select the two text objects using the Selection Tool (V) and go to Object > Expand. This will make the text layers editable so we can modify the anchor points.
Select the word "My" and move it down to connect the bottom area of the letter "Y" with the top area of the letter "F".
Use the Direct Selection Tool (A) to select the anchor points from the bottom of the "Y" letter, as you see in the image below. Then hit the Backspace key to delete them.
Use the Pen Tool (P) to reconstruct the bottom area of the letter "Y" and connect it to the "F" letter. Make sure that you close the path. Take a look at the following image for reference.
Now we need to create a circle with a white dashed stroke. Select the Ellipse Tool (L), hold down the Shift key and create a circle with no Fill and a 1pt white Stroke. Then go to the Stroke panel (Window > Stroke) and use the settings from the following image.
Change the color of the text to white. I added a grey rectangle underneath all objects in order to see the text and the circle.
Finishing the logo in Adobe Photoshop
Go back to Photoshop, create a new group and name it "Logo". Then select the Ellipse Tool (U) and create a circle with the dimensions 125px by 125px and the color #2e3134.
Name this layer "circle", double-click on it to open the Layer Style window and add a Pattern Overlay effect using the following settings. The leather pattern that I used is from the pack you downloaded at the beginning of this tutorial.
Copy the text objects from Illustrator, go back to Photoshop and paste them as a smart object. Use Free Transform (Command/Ctrl + T) to change the size of this layer and put it in the center of the dark circle. Add a Color Overlay effect to this layer using the color #f4f4f4.
Copy the dashed circle from Illustrator and paste it in Photoshop as smart object. Use Free Transform (Command/Ctrl + T) to change the size of this layer and put it in the middle of the dark circle. Name this layer "dashed circle" and set its opacity to 60%.
Duplicate the "dashed circle" layer (Command/Ctrl + J). Use Free Transform (Command/Ctrl + T) to change the size of this layer until it reaches the curved edge underneath the logo. Name this layer "bottom border".
Use the Rectangular Marquee Tool (M) to select the upper area of the circle as you see in the image below. Then go to Layer > Layer Mask > Hide Selection. This will leave a dotted curved line underneath the logo, just like we want.
Step 9: Adding the navigation
Create a new group and name it "Navigation". Select the Type Tool (T) and write the name for your navigation menu items using the font Oswald and the color white. Spread your navigation items equally in the left and right hand side of the logo.
Creating the style for the active menu item
Select the Rounded Rectangle Tool (U) and set the Radius to 4px. Then create a rounded rectangle underneath one of our navigation items with the height 32px and the color black.
Set the Fill of this layer to 25%, double-click on it to open the Layer Style window and use the settings from the following image.
Step 10: Creating the "Featured" area
Create a new group and name it "Featured". Select the Type Tool (T) and write the name of your project using the font Oswald with the size 22pt and the color white. Put this layer in the left hand side of the layout and at 50px underneath the navigation bar.
Select the Line Tool (U) and create a horizontal line with the width 300px. Set the Fill of this layer to 0% and the Opacity to 50%. Double-click on this layer and add the dotted line pattern that you created earlier in this tutorial.
Use the Type Tool (T) to add a block of text underneath the horizontal line. Use the font Helvetica with the color white and the size 13pt. Go to the Character panel (Window > Character) and set the leading (the distance between lines of type) to 24 pt to make the text more readable.
Creating a "Read More" button
Create a new group and name it "button". Select the Rectangle Tool (U) and set the Radius to 4px. Then create a rounded rectangle underneath the block of text with the size 110px by 30px and the color #9ca2a6. Name this layer "button".
Duplicate the "button" layer (Command/Ctrl + J) and move this new layer underneath the original one. Select the Move Tool (V) and hit the down arrow on your keyboard once to move this layer one pixel down. Set the opacity of this layer to 50%.
Duplicate the previous layer (Command/Ctrl + J) and change its color to #54585b. Move this layer one pixel down and set its opacity to 100%.
Now you should have three "button" layers. Double-click on the top one to open the Layer Style window and use the settings from the image below. The color that I used for the Stroke effect is #54585b.
Hold down the Command/Ctrl key and select the two "button" layers from the bottom. Right-click on one of them and select Convert to Smart Object.
Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay. This will add a subtle 3D effect to the button.
Hold down the Command/Ctrl + Shift keys and click on the thumbnail of the "button" smart object and then on the vector mask of the "button" layer. This will create a selection of the entire button. Create a new layer and fill the selection with white. Hit Command/Ctrl + D to deselect.
Right-click on this layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the image below. Set the blend mode of this layer to Multiply 25%.
Now select the Type Tool (T) and write "Read More" on your button using the font Oswald with the size 15pt and the color white. Double-click on this layer to open the Layer Style window and use the settings from the following image for Drop Shadow.
Step 11: Adding an image slider
Create a new group and name it "image slider". Select the Rectangle Tool (U) and create a rectangle with the dimensions 620px by 300px. Name this layer "image_holder", double-click on it to open the Layer Style window and use and use the setting from the following image for Outer Glow.
Open an image in Photoshop that you want you feature in this area and move it into your web layout document using the Move Tool (V). Name this layer "image" and put it over the "image_holder" layer. Then right click on it and select Create Clipping Mask. Now your image will be visible only over the area of the "image_holder" layer.
Creating the image slider arrows
Select the Custom Shape Tool (U), right-click on your image and select one of the arrow shapes. Then create an arrow in the right hand side of your image slider using the color #e2e6e8.
Name this layer "right arrow", double-click on it to open the Layer Style window and use the settings from the following image. Right-click on this layer and select Convert to Smart Object. Then set its opacity to 40%.
Duplicate this layer (Command/Ctrl + J) and name the new one "left arrow". Then go to Edit > Transform > Flip Horizontal. Move this arrow in the left hand side of the web layout. Take a look at the following image for reference.
Creating the navigation bullets for the image slider
Create a new group and name it "navigation bullets". Select the Ellipse Tool (U), hold down the Shift key and create a circle with the dimensions 10px by 10px and the color #4d5357. Name this layer "navigation bullet".
Duplicate this layer (Command/Ctrl + J) a few times and arrange them as you see in the image below.
Select the Ellipse Tool (U) again and create a smaller circle in the middle of a navigation bullet to indicate the active image. For this circle use the color #9ca2a4.
Step 12: Creating "Services" area
Create a new group and name it "Services". Select the Rectangle Tool (U) and create a rectangle with the height 450px and the color #fafafa.
Name this layer "services bg", right-click on it and select Convert to Smart Object. Then go to Go to Filter > Noise > Add Noise and use the settings from the following image.
Double-click on this layer to open the Layer Style window and use the settings from the following image for Inner Shadow and Outer Glow.
Select the Line Tool (U) and drag a horizontal line at the bottom of the "services" area using the color #d2d2d2. Name this layer "1px line".
Duplicate this layer (Command/Ctrl + J) and change the color of the new line to white. Then move this layer 1px up.
Step 13: Adding the content for the "Services" area
Select the Type Tool (T) and write the word "Services" with the size 38pt and the color #5b656a. Put this layer in the left hand area of the web layout and at 40px underneath the "featured" area.
Create a new group and name it "web design". Create another group inside this one and name it "spotlights". We will design a 3D-looking room with some spotlights over an image.
Select the Rectangle Tool (U) and create a rectangle with the dimensions 300px by 100px and the color #3b444a. Name this layer "border", right-click on it and select Convert to Smart Object.
Go to Go to Filter > Noise > Add Noise and use the settings from the image below. Then double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.
Now I will show you how to create the 3D-looking room. First, select the Rectangle Tool (U) and create a gray rectangle with the dimensions 286px by 86px and put it in the center of the "border" rectangle. This is a temporary layer that will help us create the walls.
Select the Rectangle Tool (U) and create a rectangle with the height 22px and the color #434f57. Make sure this layer does not go over the gray rectangle. Name this layer "floor", double-click on it to open the Layer Style window and use the settings from the following image.
Create a new rectangle with the dimensions 240px by 64px and the color #3b4851. Name this layer "front wall" and position it as you see in the image below. Ten add a Gradient Overlay effect to this layer.
Using the Direct Selection Tool (A), select the upper right hand corner of the "floor" layer and move it to the left. Then select the upper left hand corner and move it to the right. Take a look at the following image for reference.
Create a rectangle in the left hand side of the 3D room with the color #39444b. Use the Direct Selection Tool (A) to reposition the bottom right hand corner of this rectangle, as you see in the image below. Double-click on this layer to open the Layer Style window and use the settings from the following image.
Duplicate this layer (Command/Ctrl + J) and move it to the right. Then change the angle of the Gradient Overlay to 0.
Create a new rectangle at the top of the 3D room using the color #505e67. Name this layer "ceiling" and use the Direct Selection Tool (A) to adjust the bottom corners like you did for the "floor" layer. Double-click on this layer to open the Layer Style window and use the settings from the following image.
Now you can delete the gray rectangle you added at the beginning of this step. Below you can see how my "3d room" group looks like.
Right-click on the "3d room" group and select Convert to Smart Object. Then go to Go to Filter > Noise > Add Noise and use the settings from the following image.
Double-click on this layer to open the Layer Style window and use the settings from the image below.
Step 14: Creating the spotlights
Create a new group and name it "top lights". Then select the Ellipse Tool (U) and create a white circle, as you see in the image below. Right-click on this layer and select Convert to Smart Object. Then go to Filter > Blur > Radial Blur and use the settings from the image below. Name this layer "light 1".
Create a new circle, bigger than the previous one. Name this layer "light 2" and convert it to smart object. Then apply a Radial Blur Filter with the same settings.
Repeat the process one more time with a bigger circle. Name this layer "light 3". Take a look at the following image for reference.
Group the three "light" layers together and set the opacity of each one as follows:
Duplicate the group two times and arrange your spotlights as you see in the image below.
Hold down the Command/Ctrl + Shift keys and click on the thumbnail of each "light" layer to select them. Then go to Layer > New Adjustment Layer > Hue & Saturation and use the settings from the following image. This will add a subtle blue color to the lights.
Some of the lights might go over the border of the 3D room. To correct this, hold down the Command/Ctrl key and click on the thumbnail of the "3d room" layer. Then click on the "top lights" group to make it active and go to Layer > Layer Mask > Reveal Selection.
Create a new group and name it "floor lights". Then use the Ellipse Tool (U) to create three ellipses as you see in the image below. Convert each layer to a smart object. Then add a Gaussian Blur filter and a Noise filter to each layer. Set the opacity of these layers to 40%.
Then you can add an image in the middle of the 3d room that represents the design service you added. I used the Webdesign Tuts+ logo.
Step 15
Select the Rectangle Tool (U) and create a white rectangle with the dimensions 300px by 210px underneath the spotlights area. Name this layer "content bg", double-click on it to open the Layer Style window and use the settings from the following image for Outer Glow.
Select the Pen Tool (P) and create a triangle shape using the color #d1d6da, as you see in the image below. You can activate the guides to help you create this shape.
Name this layer "top triangle", double-click on it to open the Layer Style window and use the settings from the following image. The color that I used for the Stroke effect is #c5cace.
Select the Type Tool (T) and add the content for this service box. For the headline use the font Oswald with the size 20pt and the color #747d82.
For the block of text use the font Helvetica Regular with the size 13pt and the color #5f6c74. Also, set the leading of this text layer to 24pt from the Character panel.
Create a new black dotted line pattern just like you created the white one at the beginning of this tutorial. Then use the Line Tool (U) to drag a horizontal line between the headline and the block of text. Set the Fill of this layer to 0% and apply the pattern you created.
Copy the "Read more" button from the "featured" area (right-click on its group and select Duplicate Group). Then move the new button underneath the block of text from the "services" area. Take a look at the following image for reference.
Step 16
Duplicate the "web design" group two times and arrange the new columns as you see in the image below. Then replace the headlines and the images that are under the spotlights.
Step 17: Creating the "Portfolio" area
Create a new group underneath the "Services" group and name it "Portfolio". Then select the Rectangle Tool (U) and create a rectangle with the height 590px and the color #f1f1f1 underneath the "services" area.
Name this layer "portfolio bg", right-click on it and select Convert to Smart Object. Go to Filter > Noise > Add Noise and use the settings from the following image. Then double-click on this layer to open the Layer Style window and apply one of the fabric textures you downloaded.
Select the Type Tool (T) and write "Portfolio" in the upper left corner of this area. I used the font Oswald with the size 38pt and the color #5b656a.
Step 18: Adding the portfolio items
Create a new group and name it "images". Then select the Rectangle Tool (U) and create a rectangle with the dimensions 180px by 140px. Name this layer "image_holder".
Duplicate this layer (Command/Ctrl + J) and move the new rectangle to the right at 10px distance from the first one. Continue to duplicate this layer until you create a grid like you see in the image below.
Open some images that you want to showcase in the "portfolio" area. Drag each image over one "image_holder" layer, right-click on the layers of the images and select Create Clipping Mask. This will put an image inside each rectangle.
In the image below there are two columns where I did not add any images. We will use that area to add a detailed portfolio item.
Step 19: Adding a detailed portfolio item
Create a new group and name it "active project". Select the Rectangle Tool (U) and create a rectangle over the two columns that have no images using the color #595e61.
Select the Rectangle Tool again and create an image holder with the dimensions 330px by 160px. Open an image that you want to display in this area and put it over the "image_holder" layer. Right-click on the "image" layer and select Create Clipping Mask.
Select the Type Tool (T) and add some content to this area. For the headline use the font Oswald with the size 22pt and the color white. For the block of text use the font Helvetica Regular with the size 13pt and the color #fafafa.
Duplicate one of the previous "Read more" buttons and put it underneath the block of text from the "active project" area.
Create a new group and name it "close button". Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 20px by 20px and the color #484c4f. Put this rectangle in the upper right corner of the "active project" area.
Select the Line Tool (U) and create two diagonal lines to form an "X" shape. Hold down the Shift key to drag a line at 45°.
Step 20: Creating the "Blog" area
Create a new group and name it "blog". Select the Rectangle Tool (U) and create a rectangle with the height 340px underneath the "portfolio" area using the color #fafafa.
Right-click on this layer and select Convert to Smart Object. Go to Filter > Noise > Add Noise and use the settings from the image below.
Select the Line Tool (U) and create a horizontal line at the top of this rectangle using the color #d2d2d2. Duplicate this layer (Command/Ctrl + J) and move the new line one pixel down. Change the color of this line to white.
Step 21: Adding blog posts
Select the Type Tool (T) and write "Blog" in the upper left corner of this area using the font Oswald with the size 38pt and the color #5b656a.
Create a new group and name it "post #1". Select the Rectangle Tool (U) and create an image holder with the dimensions 180px by 140px. Open an image that you want to display in this area and drag it over the "image_holder" layer. Right-click on the "image" layer and select Create Clipping Mask to make it visible only over the area of the "image_holder" layer.
Select the Type Tool (T) and add some content next to the image. For the headline use the font Oswald with the size 22pt and the color #747d82. For the block of text use the font Helvetica Regular with the size 13pt and the color #5f6c74. Also, set the leading of this paragraph to 24pt. Then add a "Read more" button underneath the block of text.
Duplicate the "post #1" group and move the new one to the right. Then you can change the image and content for this new blog post.
Step 22: Creating the "Footer" area
Create a new group and name it "footer". Duplicate the "header bg" layer (Command/Ctrl + J) from the "Header" group and move it at the bottom of the layout, underneath the "Blog" area. Name this layer "footer bg".
Hold down the Command/Ctrl key and click on the thumbnail of the "footer bg" layer to select it. Then go to Layer > New Fill Layer > Gradient and use the settings from the image below. While the Gradient Fill window is still opened, click on your image and move the gradient up, as you see in the following image.
Set the blend mode of this layer to Soft Light 40%.
Select the Line Tool (U) and create a horizontal line at the top of your "Footer" area using the color #50565a. Name this layer "1px line".
Duplicate this layer (Command/Ctrl + J) and move it one pixel down. Then change the color of this line to #8e9496.
Step 23: Creating the "About" area
Now we will split the footer into three columns: "About", "Twitter" and "Contact".
Create a new group and name it "about". Select the Type Tool (T) and write "About me" at the top of the first column. Leave a distance of 40px between the top edge of the "footer" area and this text layer.
Select the Line Tool (U) and create a horizontal line underneath the headline. Set the Fill of this layer to 0% and the opacity to 50%. Then apply to this layer the white dotted line pattern that you created in this tutorial.
Use the Type Tool (T) to add a block of text underneath the dotted line using the font Helvetica Regular and the color #fafafa. Set the leading of this paragraph to 24pt from the Character panel. Then add a "Read more" button underneath the block of text.
Step 24: Creating the "Follow me" area
Create a new group and name it "follow me". Then add a headline and a couple of tweets in this area. Use the same dotted line to separate the blocks of text.
Add a "Read more" button underneath the tweets. Select the Type Tool (T) and change the text into "Follow me".
Download this set of Twitter birds and move a couple of them into your web layout document, underneath the "follow me" area. Add a Drop Shadow effect to these bird layers using the settings from the image below.
Step 25: Creating the "Contact" area
Create a new group and name it "Contact". Then add a headline to this area and a dotted line underneath it.
Use the Rectangle Tool (U) to create the contact form, as you see in the following image. Fill each rectangle with the color #eff0f0. Then add an Inner Glow and a Stroke effect to each rectangle layer. The color that I used for the Stroke layer style is #4d5254.
Select the Type Tool (T) and write inside each rectangle what it represents (name, subject, email, message).
Add a "Read more" button button underneath the Contact Form and change the text to read "Send".
Step 26: Adding the "Copyright" area
Create a new group and name it "Copyright". Then select the Rectangle Tool (U) and create a black rectangle as you see in the image below. Name this layer "copyright bg" and set its the blend mode to Overlay 20%.
Select the Line Tool (U) and create a horizontal line at the top of the rectangle you created earlier. Set the Fill of this layer to 0% and the Opacity to 35%. Then apply the dotted line pattern that you created in this tutorial.
Select the Type Tool (T) and add a copyright statement in the middle of the dark rectangle. Use the font Helvetica Regular with the size 12pt and the color #b1b5b7.
Final Result
We’re finished. Below you can see the final result of this tutorial. Click on the image to see the full-size version.
I hope you enjoyed this tutorial and you learned some new things for designing web interfaces. Leave any comments or questions you have in the comments section below.
Today we bring you a collection of illustrations from Spanish designer Marta De Andres. Marta’s artwork features a wide variety of artistic styles including matte paintings and her signature style of digital impressionism.
Spaceships Sky City
This stunning Sci-fi inspired matte painting features an incredible amount of detail in all of the spacecraft as well as the surrounding scenery.
Post Apocalyptic Fantasy
This portrait features a beautiful character developed by Marta. The whole painting features a lot of depth in the characters expression and overall appearance.
Fantasy Matte Painting
Here is another one of Marta’s matte paintings, this time we see some exotic scenery and wonderful composition of the overall environment.
Winter Heart
This digital painting features Marta’s design style that she calls Digital Impressionism. The wonderful combination of colors makes for an overall stunning painting.
Floating Rock
This client piece that Marta created contains some more stunning exotic scenery with realistic texturing and great composition/
Black Swan Ugly Duckling
This piece features some more imaginative painting mixed with a wide array of great colors that blend together perfectly.
Castle and City Wall Village
Another interesting landscape painting that features some impressive and complete architecture of a city lost in time and space.
Achilles Concept Art
More digital impressionism, this time we have an ominous character with some interesting abilities. Once again the mixture of colors and patterns works to perfection in this unique art style.
Latex Heroine
Here we see some more character development but this time it is painted in a more realistic fashion and it still looks fantastic.
White Fairy
This illustration is a little out of Marta’s usual style of paintings but she still ends up creating a beautiful painting. The emotion in the character as well as the whole atmosphere of the painting make for great fantasy artwork.
Dragon Warrior
Here is another example of Marta’s talent to create wonderful fantasy scenery while at the same time using a great selection of colors that are vibrant and beautiful.
Earth Matte
This matte painting shows off some realistic texture effects as well as an overall space atmosphere that looks mesmerizing.
Underground City
This matte painting like the first features a ton of amazing detail. From the contours of the rocks to the spacecraft, everything looks unique
Ari Concept Art
Another great attempt at a wide combination of colors and textures that come together perfectly.
Fantasy Matte Painting Snow
The last piece of Marta’s we will feature is this calm and serene matte painting. The composition of the environment looks fantastic as all of the natural lighting and coloring is perfect.
Marta on the Web
It’s fun and challenging to create items from scratch in Photoshop. In this tutorial we will create a futuristic bicycle icon from scratch using some basic Photoshop tools. Let’s get started!
Step 1: New File
Open Photoshop and set up a new document (Command/Ctrl + N). Use the following settings;
Resolution: 72dpi, Color Mode RGB color, Dimensions: 500×310 px.
Step 2: Creating the background
Fill the document with the black color #000000, then make a selection using Rectangular Marquee Tool (M) like I did. Into a new layer (Command/Ctrl + Shift + N) using Brush Tool (B) with a big master diameter brush one time inside the selection.
Color Code: #546c79
Duplicate the layer created (Command/Ctrl + J) Flip it horizontal (Edit-Transform-Flip Horizontal) and place it like I did in the next image. After you did that, decrease the opacity of it to 50%.
Step 3: Start creating the bike
Using Pen Tool (P) create the Bike shape, fill it using a grey color (color code: #dbdcd6). After that, we are going to give a 3D look using selection tools and light/shadows tools.
Step 4: Working on details: Lights/Shadows
Continue to add lights and shadows by selecting different parts and use Burn Tool (O) to add shadows and Dodge Tool (O) to add light. In this step we are going to add just light.
Step 5: Creating Bike Elements
Delete the indicated part by selecting it and pressing "Delete" key then create a new selection using Pen Tool (P) and a Feather Radius ~ 0.3 pixels for better results.
In the selection created above use Burn Tool (O) and add some shadow there.
Step 6: Pedals
In this step we are going to create the pedal shape, so create this shape using Pen Tool (P) color code: #cdcec9. Select a part of it using Pen Tool (P) and go to Brightness/Contrast, here make the settings from the image below.
Use same techniques to create the pedal.
Step 7: Small Details
Now add some small details like reflections and some other things.
Step 8:
Rear Wheel
Now, we are going to create the wheels! First of all make a rounded shape using Ellipse Tool or Pen Tool (P) and delete the middle of it! Use Dodge & Burn Tool (O) to give the 3 look! After that start playing with stroke lines to add Light & Shadows
Step 9: Light over the rim
Select this part of the rear rim using Elliptical Marquee Tool (M) then, in the selection created add some light using Dodge Tool (O)
Step 10: Creating the rear tire
Start by creating another rounded shape around the Rim using a dark grey color. I used #121011. Again, start playing with light/shadow/stroke like I did in the next images to obtain 3d & real effect.
Here we are going to add some light reflection on our rim, so using Elliptical Marquee Tool (M) add a 1px black stroke, then another one over it but this one should be gray!
Step 11: Spokes
How we can creating the spokes? Really simple. Use Pen Tool and start creating 1 pixel gray lines like I did in the next image, then using Burn/Dodge Tool (O) add some shadow and light over the spokes to obtain a real effect. After you are done with the spokes from the top part of the wheel, duplicate the spoke layer, flip it horizontal and place it like I did down.
Step 12: Disk Brake
For creating the disk brake we are going to use the Ellipse tool and a light brown color (#9c9075). After you created an ellipse, delete the middle part using a selection tool and pressing "Delete" key.
Step 13: Effects on the disk brake
Go to Filter > Noise > Add noise and make the settings from the image below! For giving to our disk brake a real effect we need to use some light & shadow so, by watching the pictures down add some highlights and shdows over the disk using Dodge/Burn Tool (O).
Step 14: Seat support
Make a shape using Pen Tool (P) and a dark brown color (#161510) then go to Filter > Noise > Add noise and use a amount of 0.5% for a better effect. Again, add some shadow & light over our seat support.
Step 15: Seat
Create the seat shape using Pen Tool (P) and a dark (almost black) color, I used #010103! Then, over the shape created, add some light in the top part using Dodge Tool (O).
Step 16
Add more details on the seat support.
Step 17: Bike Horns
Create a path using Pen Tool (P) then fill it with a dark grey color #0f0f0d. Now playing with lights and shadows you should obtain something like in the image below
Step 19
Use Pen Tool (P) and stroke path technique add some light reflections on our bike horns.
Step 20: Fork
Create this path using Pen Tool (P) and fill it with a dark brown color, I used #201f1a.
Step 21: Effects on the fork
Again, add some noise and use dodge/burn tool to obtain a better effect.
Step 22: Front wheel
Duplicate the rear wheel layers group and place it under the fork. After that I created some pieces that will support the wheel.
Step 23: Caliper
We are going to create the caliper! Create a path using Pen Tool (P) then fill it with a red color, add some shadows and lights using Dodge & Burn Tool (O) and your bike it’s ready go.
Step 24: More Details
You can add more details on the bike like stickers and other things. You can also create a reflection of the bike like I did in the next image.
Final Image
Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!
Huge Improvements to Tuts+ Premium
As many of you know, Tuts+ is accompanied by an online educational membership called Tuts+ Premium. We’re very excited to announce that the membership has received a huge upgrade, including a new library of courses, 27 top-selling educational eBooks, member forums, and a completely redesigned UI.
You can check out all the changes here, and find out about all the fantastic new content available!
Our new premium website is a drastic improvement over the old system. It includes a slick and polished user interface and presents all of our tutorials the way that you would expect, from within your browser. We are now providing courses and ebooks from within Tuts+ Premium to make it even more valuable. So what are you waiting for? Head over to the new Tuts+ Premium site and let us know what you think.
Take a Tour of Tuts+ Premium
Psdtuts+ — Photoshop Tutorials
Create Detailed Vintage Typography with Illustrator and Photoshop
In this tutorial we will demonstrate how to customize a typeface in Illustrator and then use Photoshop to create a stunning vintage detailed typographic design. Let’s get started!
Visit Article
Realistic Portrait Retouching With Photoshop
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!
Visit Article
How to Paint Clouds With Photoshop
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.
Visit Article
Nettuts+ — Web Development Tutorials
How to Create a Sublime Text 2 Plugin
Sublime Text 2 is a highly customizable text editor that has been increasingly capturing the attention of coders looking for a tool that is powerful, fast and modern. Today, we’re going to recreate my popular Sublime plugin that sends CSS through the Nettuts+ Prefixr API for easy cross-browser CSS.
Visit Article
Days to Learn HTML and CSS: a Free Tuts+ Premium Course
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.
Visit Article
Dig into Dojo
Maybe you saw that tweet: “jQuery is a gateway drug. It leads to full-on JavaScript usage.” Part of that addiction, I contend, is learning other JavaScript frameworks. And that’s what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction.
Visit Article
Vectortuts+ — Illustrator Tutorials
How to Create a Vector Stamp Set in Illustrator
In the following tutorial you will learn how to create a vintage, vector stamp set in Adobe Illustrator. Learn how to build a stamp illustration, shape by shape. We’ll construct the stamp border vector shape, highlight the edges, create the branding, and give the vector postage stamp a vintage texture, and final illustrator stamp effect. Let’s get started with making this vector stamp in Illustrator and then transform this into a vector stamp set.
Visit Article
Create a Vector Bamboo Forest with Blends, Brushes and Profiles
In today’s tutorial you’ll learn how to create a bamboo vector illustration with the help of custom art and pattern brushes, blends and profiles on strokes in Adobe Illustrator CS5. Vector bamboo is an excellent element to use in your work to give a classic Japanese fine art print feel, for use as bamboo forest art background in a larger illustration, and to make your vector pictures stand out with stylish bamboo art. So let’s jump straight into it!
Visit Article
Massive Collection of Vintage Vector Graphics: Floral Borders, Corners, and Frames
Welcome design rockstar, today you’re in for a real treat. We have a massive collection of vector graphics compiled for free download today. We’ve assembled vintage vector floral graphics that have antique floral borders, classic ornate corners, and decorative frames.
Visit Article
Webdesigntuts+ — Web Design Tutorials
Bring Your Forms Up to Date With CSS3 and HTML5 Validation
Let’s look at how to create a functional form which validates users’ data, client-side. With that done, we’ll cover prettying it up using CSS, including some CSS3!
Visit Article
Design a Clean Launch Email for a Mobile App
During this tutorial we’ll be using Adobe Photoshop to create a unique and clean email, announcing the launch of a new mobile app. We’ll look at using smart objects, clipping masks, warping text, and even examine the psychology of our users.
Visit Article
Financial Best Practices for Web Design Freelancers
A lot of web designers start their careers as employees for larger design firms. However, it seems inevitable that most designers will at least consider going out on their own as freelancers, either for side jobs or full time. One major key to any successful freelancing career, though, is to stay on top of your finances.
Visit Article
Phototuts+ — Photography Tutorials
Amazing Animal Photos
Animals are, without a shadow of a doubt, a fascinating photography subject. They’re at their most intriguing when they’re unpredictable and wild, allowing you to capture something of their very nature. This collection is a look at some outstanding shots of animals, of every kind, in the hope that it inspires and encourages you in your endeavors to immortalize something of the creatures with which we share our existence.
Visit Article
The Best Way To Learn Sports Photography
Whether you’re a sports fan or not, it’s hard to deny the huge popularity of sports in modern culture. In today’s tutorial, instead of giving you tips about directly shooting sports, we’re focusing on giving you tips on learning how to shoot it. We hope you enjoy this new approach.
Visit Article
The Camera Swap Survival Guide
In photography circles, you run into two types of people. Those who love their gear and those who would just as soon forget about. I love making photographs, but I also love cameras and the other gear used in the process. Therefore, I love camera swaps and flea markets. The variety of tools available for our craft is astounding and frankly overwhelming. But I’m here to help. I’ve been going to swaps for 12 years. I’ve been ripped off more times than I care to admit, but after all this time, I’m finding more treasure than fool’s gold. So today, I’ll guide you through the jungle that is the camera swap.
Visit Article
Cgtuts+ — Computer Graphics Tutorials
Facial Animation With Morph Targets In Cinema 4D, Part 1 – Cg Premium Content
In this new two part Premium tutorial, Aleksey Voznesenski will give you an introduction to mesh animation in Cinema 4D, in this case a face with the use of the pose morph tag. We’ll also actually model the character, add materials, do some lighting, Faking GI is always fun, and then animate the little bugger.
Visit Article
Making Of: The Abandoned Lobby in Maya and Mentalray, A Lighting & Rendering Overview
In this overview tutorial, author Pratik Gulati will give you valuable insight into Lighting and Rendering a scene in Maya using Mentalray. Using his “Abandoned Backyard Lobby” image as a basis, Pratik will discuss how he approached the Lighting setup and walk you through the render settings for achieving a very realistically lit interior scene with Mentalray.
Visit Article
Quick Tip: Creating A Simple 3D Puzzle In Maya
In this quick tip, author Abed Ibrahim will show you a great way to create a simple 3D puzzle in Maya. Although simple in approach, this valuable technique can be used in a variety of projects, ranging from very simple puzzles to extremely complex scenes, or even animations.
Visit Article
Aetuts+ — After Effects Tutorials
Design A Fantastic Floating Card Logo Reveal – AE Premium
In this tutorial we’ll break down a project I created called Motion Cards. We’ll create 3 scene’s in which we’ll animate some falling customizable placeholders that will be re purposed using Trapcode Particular for a dynamic logo reveal.
Visit Article
Regenerate Like A “Time Lord” From Dr. Who
In this tutorial, we’ll be creating a regeneration effect, inspired by the Doctor Who TV show. I say inspired by, because it’s not screen-accurate, but we’ll be using AE’s built-in tools, alongside some stock footage, VCP’s Optical Flares and Trapcode Particular to pull off a pretty convincing regeneration.
Visit Article
An Apple Box At Its Core
In today’s video, I’ll talk about the Apple Box… a rectangular multi-purpose block used on production sets dating back to practically the beginning of film. This video is for exposure more than anything. A year ago, I didn’t even realize those boxes had a name, and now I end up pretty much using them at least once on every shoot I do. Hope you enjoy it.
Visit Article
Audiotuts+ — Audio & Production Tutorials
Why You Should Use Metering Tools while Mixing and Mastering
Last AES convention I met a manufacturing rep for a very prestigious equipment company. He was demoing a piece of equipment for me, showing me all the great knobs and buttons that it had to offer. Then he said something along the lines of, ’We don’t include a screen for these things since you’re supposed to mix with your ears.” That’s when I took my exit stage left. I think imposing a viewpoint like that is just plain wrong.
Obviously, you’re supposed to mix with your ears, but I don’t think looking at meters is going to destroy your mix.
Visit Article
Adding Flavor to Chords -” Sixth Chords -” Basix
Today we are going to cover how to add some flavor to your chords and compositions using sixths in both major and minor. Just like the 7ths chord tutorial, we will approach this chord concept from the ground up and look it from all possible angles. If you have heard of these types of chords but never knew exactly how they were constructed then this tutorial is for you. We will cover everything from basic structure to different voicings of the chords and try to apply them in a creative context. The sixth chords are waiting, you ready?
Visit Article
Podcasts that Musicians Should Subscribe To (And Why!)
Rather than listening to music as I drive, shave and garden, I regularly listen to podcasts. That way Im not just being entertained, but educated as well. In this post we introduce you to the Top 20 podcasts musicians should subscribe to.
A podcast is like a radio show, only distributed via RSS over the internet. Some are professionally produced, but many are done by amateurs. Most are about a particular interest or topic. And there are a ton of them on music and recording -” some featuring indie music, others exploring music technology, and many explaining techniques for playing and recording music. In this article we’ll focus on the podcasts that teach you about producing music, and not the ones that help you discover new music. Maybe we’ll cover those in a future post.
Visit Article
Activetuts+ — Flash, Flex & ActionScript Tutorials
TimelineLite Ultimate Starter Guide: Introduction
TimelineLite is the ultimate tool for creating elaborate and precise sequences of scripted animation. It is an integral part of the GreenSock Tweening Platform that allows you to make the most of TweenLite and TweenMax. This series of screencasts will walk you step by step through everything you need to know to take your AS3 tweening skills to the next level.
Visit Article
Getting Started With Scoreoid
Games are becoming ever more popular, especially casual games on mobile devices and tablets. In these games, the importance of leaderboards is multiplied – and game developers need a simple cross-platform solution for this. In this tutorial we will cover Scoreoid and how it can help you with game development.
Visit Article
Effectively Organize Your Game’s Development With a Game Design Document
Have you ever dived right in to developing a game, but found yourself having to constantly change aspects of the design or the gameplay due to a lack of planning? You should consider using a game design document: a guiding vision of the game as a whole, pulling together ideas and plans for the design, development, and business sides of your game.
Visit Article
Wptuts+ — WordPress Tutorials
Cardinal Sins of WordPress Theme Development
We talk alot on this site about tips and tricks for getting what you want out of WordPress… but today we’re going to take a step back from the technical stuff to look at some practices, bad habits, and coding faux pas that would be better left in our past. So, forgive the heavy-handed post title (haha!), we’re about talk bring up 5 surprisingly common practices that are blemishes on the platform.
Visit Article
DIY WordPress Framework Part 4: Using the Framework as a Boiler Plate
Last time we used our framework as a child theme, creating a totally new theme that depends on the framework. Today we’re going to use our framework as a boilerplate, copying the folder and making edits right to it.
Visit Article
WordPress Monthly News: November 2011
For some, WordPress is a livelihood whereas, for others, it’s just for fun. Nonetheless, anyone involved with WordPress needs to stay on track with the latest developments in the blogging world. This is our monthly article covering the latest developments in the WordPress world from news to the latest new kick-ass themes on our marketplaces.
Visit Article
Mobiletuts+ — Mobile Development Tutorials
jQuery Mobile 1.0
The official release of jQuery Mobile 1.0 was recently announced, and this tutorial will provide you with an overview of how this popular framework can assist you in your cross-platform and web based app development!
Visit Article
Building a Caterpillar Game with Cocos2D
In this series, we will be recreating the popular Atari game Centipede using the Cocos2D game engine for iOS. Centipede was originally developed for Atari and released on the Arcade in 1980. Since then, it has been ported to just about every platform imaginable. For our purposes, we will be calling the game Caterpillar.
Visit Article
Android SDK: Using the Text to Speech Engine
This tutorial will teach you to give your applications a voice with the Android SDK text to speech engine!
Visit Article
FreelanceSwitch — Articles and Resources for Freelancers
10 Free Apps for Working with Video
Video has become a must-have for every website or blog aiming to enhance its presence online. It’s a common practice that video-related orders are often assigned to freelancers, and these are not only simple video editing tasks, but the preparation of how-to’s, demos, screencasts, video embedding and distribution as well.
Here is a roundup of the most popular video software and services recommended for freelancers’ everyday use.
Visit Article
30 Top Facebook Apps for Business
Facebook is a good place to communicate with friends and get new job offers. Freelancers should not miss an employment opportunity on Facebook. The social network app section is a real treasure box with multiple handy applications.
These are some of the best Facebook applications that help freelances boost their productivity, enhance their business pages, show off their portfolio and attract new contacts. Since many freelancers work with social media as experts, account managers and analysts, the list below has both apps for personal profiles and Facebook pages.
Visit Article
The Latest Google Update is Fantastic News for Freelance Writers
On November 3, 2011 Google published a new article on their blog informing readers that fresh new content is now being seen as highly valuable on their blog or website. This “freshness update” is a new addition to Google’s “Caffeine web indexing system”.
Now blog owners who update their sites regularly will be rewarded with a higher search engine ranking. Let’s look at how freelance writers can put this new update to use in their business.
Visit Article
In this Tuts+ Premium tutorial, author Stephen Petrany will demonstrate how to use various techniques to create a winter-themed holiday card in Photoshop. This tutorial will creatively utilize Photoshop filters and transformations to create a fantastic winter illustration. This tutorial is available exclusively to Tuts+ Premium Members. If you are looking to take your design skills to the next level then Log in or Join Now to get started!
View the Tutorial
Tuts+ Premium Members can login now for instant access to this tutorial. Membership to Tuts+ Premium gets you access to hundreds of exclusive premium tutorials, top selling ebooks, in-depth courses, member forums, and much more. To learn more about Tuts+ Premium, Take the Tour or Join Today.
As you know, each month, we round up some of the best Photoshop-related content from around the web. This month, there were some excellent Photoshop tutorials and articles to choose from so please take a moment to review our favorites from November 2011.
Photoshop Tutorials
RAWZ Light Effects in Photoshop
This tutorial on Abduzeedo explains how to create some futuristic-looking light effect text in Photoshop.
Visit Tutorial
Observing Color: Relativity
When painting digitally it’s important to understand how the color picker works. In this tutorial from Ctrl+Paint you will learn a bit about color relativity.
Visit Tutorial
Special Effects Text
This tutorial on Layers Magazine shows how to create some special effects text in Photoshop.
Visit Tutorial
Create Delicious Cookie Text Using Photoshop
This tutorial from PhotoshopTutorials.ws will explain how to create cookie text in Photoshop.
Visit Tutorial
Making of The Futuristic City
This tutorial on CG Arena demonstrates how to create a a fantastic futuristic city in Photoshop.
Visit Tutorial
How to Create a Vintage Circus Poster with the Photoshop Puppet Warp Tool
This tutorial from WeGraphics will explain how to create a vintage circus poster using the Puppet Warp feature in Photoshop CS5.
Visit Tutorial
Putting A Bend On An Image
This tutorial from The Digital Photography Connection will demonstrate how turn a flat photograph into a bended photo laying on a flat surface.
Visit Tutorial
Design an iPad app UI
This tutorial from Computer Arts will explain how to create a basic iPad app UI in Photoshop.
Visit Tutorial
How to Paint Your Worn-Out Shoes in Photoshop
This tutorial from Naldz Graphics will explain how to create some custom sneakers in Photoshop.
Visit Article
Easy Image Access with Mini Bridge
This quick video from Sr. Photoshop Product Manager Bryan O’Neil Hughes explains how Mini Bridge can be used to save time in Photoshop.
Visit Article
Articles and Inspiration
An Open Letter To Adobe Systems
Adobe recently changed its upgrade policy. In this open letter from NAPP President, Scott Kelby, he pleads for them to reconsider.
Visit Article
Should I Be a Designer?
Is passion and interest enough to choose design as a career choice? This thoughtful article from Isaac Gube on Design Instruct ask that question.
Visit Article
Incredible Typographic Works by Peter Tarka
This post from Abduzeedo features the incredible typographic works of Peter Tarka.
Visit Article
Design Inspiration: Amazing Matte Paintings
This article from Vandelay Design showcases some excellent matte paintings for your inspiration.
Visit Article
A Showcase of Still Life Digital Paintings
This article from Noupe showcases some fantastic still-life digital paintings.
Visit Article
30 Fantastic Transparent Business Cards
Looking for some ideas for your company’s next business card design? This article from DesignM.ag showcases some fabulous examples of transparent business card designs.
Visit Article
So you bought yourself a new tablet. Pen tablets are all the rage in the design industry as an extraordinary asset for any designer or artist. Their incredible technology allows artists to have the comfort of traditional pencil to paper methods without all the fussy mess or extra supplies. Whether your new to tablets or just upgrading, getting comfortable with the handling and basics of the tablet is very important to its use.
Old Tablet vs New Tablet
My first tablet was an affordable UC-Logic version purchased at a computer show three years ago. The tablet is 5.5×4 in size with an accompanying ballpoint-like pen and holder. In fact, this setup often confused people at work who would reach for the nearest pen only to discover it had no ink. Although it wasn’t as stylish as the latest tablets on the market, it did its job despite the abuse it encountered. Three years later and you’ll see the pen is covered in teeth marks and taped together from a clumsy accident, which bent the metal securing the battery inside. Both the tablet and pen still work but it was definitely time for an upgrade.
My new tablet is a Wacom Bamboo much sleeker in design to my previous one. The pen is very solid with seemingly no chance of bending from my clumsy design habits, and actually took some time to get used to despite being a previous tablet owner. Firstly, the detection of each pen to the tablet differed slightly. I often found myself bringing the Wacom pen back to the center of the tablet for freer movement and better detection, whereas I had less restricted movement on the UC-Logic grid. However, the red tab at the bottom of the Wacom tablet is a much more convenient addition for portable pen storage by keeping both tools together at all times.
The biggest concern for new tablet owners is getting comfortable to the handling of the device. "How can I see what I’m drawing on the screen if I’m looking at the tablet," is the question I get asked the most from non-owners. So, here are four easy ways to break in your new tablet.
1. Use Tablet For Everyday Browsing
Programming yourself to use a tablet is similar to learning how to type without looking at the keyboard. For the most part you’re looking at the screen the entire time until you take the pen too far from the tablet. One of the best ways to get used to this is to first use your tablet for everything except digital art. Use it to surf the web, highlight text, and scroll up and down a page. Also get familiar with the button on the pen, which can be used to bring up a program’s normal options by right-clicking.
2. Experiment With Settings And Tools
One of the incredible benefits of using a pen tablet is the beautiful artwork that can be created. First make sure the tablet’s driver is properly installed in order to reap the benefits of pen pressure in Photoshop. Pen pressure can only be utilized while using a tablet, otherwise the brushes stay solid without the ability to taper at the end like a pen stroke. Experiment with the brush settings to create custom brushes for your next project. Though tablets are more widely known for their use as tools to draw with in Photoshop, take advantage of using other tools with ease such as the pen, lasso, and slicing tools, amongst many others.
3. Practice Your Signature
Our signature and handwriting is something that stays considerably constant throughout our lifetime. Because handwriting often results in quick, swift strokes, writing in Photoshop is an easy exercise you can do to get used to a new tablet. Practice your signature a dozen times or write a few lines of sentences in order to get comfortable with the tablet’s pen. When I first tried this, I was surprised to feel and see a difference in signature from the old to the new tablet.
4. Start A New Art Project
The best way to improve in any endeavor is to practice, practice, practice. Once you get used to the tablet the next step is to simply dive into a new art project. The first painting I created as practice with the Wacom tablet was a "Ladle of Awesomesauce." Though it looks rather simple, it actually took about 15 hours just because it was my first painting with the Wacom Bamboo. Now that I’m a couple of paintings in, I’ve realized the benefits of upgrading to the new device.
Conclusion
Breaking in your tablet can be a fun experience that enters you into a realm of possibilities with digital art. These simple tricks will make you comfortable with the unfamiliar handling in no time. Good luck!