Free High Res Wood Textures
File Type: JPEG
Size: 3008 px by 2000 px
License: Creative Commons License
Free beautiful high res wood textures to use in your next project
Create a Promotional iPhone App Site in Photoshop
In this tutorial, we’ll be continuing this series on creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images, and effects to polish off this design in Photoshop. We’ll use some interesting elements, like iPhone imagery and a stylish aurora vector background illustration. We’ll finish up with a professional site design ready to get coded! Let’s get to it!
Final Image Preview
Take a look at the website design we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below or the full-size image here.
Step 1 – Document Setup
Grab the “wireframe_final.psd” we exported in our last tutorial in this series (Build a Promotional iPhone App Website Wireframe in Fireworks). Rename this file to “final.psd,” or your preferred name.
Notice below how the imported file opens fairly well in Photoshop. There is an issue with the text boxes being longer than the document though (second image below, notice how the box is long and continues past the bottom of the document). I don’t know a quick way to fix this. It’s a peculiarity I mentioned in the last tutorial. If anyone knows a good fix, definitely let me know. So, go through and copy the text of each element, then recreate a new text box and paste the text back in place, or just leave it as is.
Also, go ahead and delete the “Notes” folder as well, as we don’t need the notes here.
Step 2 – First Dominant Visual Element
I often like to work on the dominant (and more important) visual elements of the design first, and then build from there. So, let’s get started with the “promotion” area.
We’re going to add an aurora illustration to the background here. Ian Yates wrote an awesome Illustrator tutorial on Making an Aurora Borealis Vector Sky in Illustrator. There are a few benefits to using a vector graphic here. One is that it stylistically stands out with a unique look. Also, we can use it for other sized branding areas as well.
After completing the aurora borealis vector tutorial go ahead and import your unique result into Photoshop. You can see that the only change I made was flipping the design. You should of course create your own for your work. I pasted the illustration in as Pixels because I don’t need to make any changes to the vector source file after bringing it in, so no need to use a Smart Object.
Now drag the vector mask from our promotional background shape onto our aurora borealis design.
This will apply the vector mask as shown below, just make sure it lines up as you want it.
Step 3 – Adding an iPhone Image
There is spectacular freebie of an iPhone image with lots of iPhone GUI graphics. Go ahead and download the iPhone GUI PSD 3.0. Open the file and drag the iPhone image into your working document. Then scale it and line it up with the guides as shown in the second image below. Be sure to grab the image as shown. The only screen component grabbed other than the phone is a transparent angled screen glare.
Now we’ll add the aurora borealis illustration to the iPhone. This just makes the design look a little more interesting. In the final website a video file would look good here, which shows the app in action though. Bring in another copy of the aurora borealis illustration. You can bring in a smaller version of it this time, as we’re filling a smaller space. Paste it in as Pixels again.
Now with the illustration placed over the iPhone in the position you want it in, and the illustration selected, go to Layer > Vector Mask > Reveal All. Then grab the Rectangle Tool (U), make sure it’s set to Paths in the top-left corner, and draw your screen. If you don’t get it the exact size you need the first time, then hit Command + T and resize the rectangle vector mask as needed.
Be sure to keep your layers organized as we continue to build this design.
Step 4 – Working on Our Color Scheme
We just added two dominant elements on the page. Also, the aurora illustration we added is a great source to grab some color from to make this page’s color scheme. Go ahead and double-click on the default “Background” layer to unlock it, name it “background,” and place it in a new “background” folder.
Grab the Paint Bucket Tool (G), then change the Foreground Color to a dark bluish-gray (#536475), which I selected from the illustration. Now change the primary navigation background located in the “header” folder a dark blue (#212b3f), which was also sampled from the illustration. Give the “bottom” area background the same dark blue color for the background.
We’ll also change the color of some of our navigation buttons at this point as well. The image below shows where we’re at so far in this design. Change the primary navigation button background colors to a slightly lighter grayish-blue (#5e7285) than the page background, except for the current page button. We want to give the current page button the impression of being pressed in. So, make it the same color as the page (#536475). We’ll enhance this greatly a little later in the tutorial when we add styling.
In the “secondary_nav” area select the larger background behind the Aurora icon and change it’s color to a grayish-blue (#475665) that is slightly darker than the page background. Again, we’re going to make this look indented. Also, go ahead and use the same lighter grayish-blue (#5e7285) as the primary navigation buttons on the footer buttons.
Step 5 – Changing Our Text Color and Basic Styles
You can see how going dark with our page design makes it painfully obvious that it’s time to work on the text colors. We designed the text mostly with dark on light for the wireframe, but now we need to go to light on dark. Change most of your text to white. I’ll point out the few exceptions below. Also, clean up any text, reposition elements, and experiment with font weight as you go through this.
I’m setting some of the text in Myriad Pro, though in areas that will be coded and not images I often used Helvetica for this design, which is ubiquitous on computer systems. I also used Helvetica for some areas that I wanted to have a slightly different look than the Myriad Pro being used. I set the Aurora name in Futura Condensed Extra Bold where it was to be used for branding.
You can see the text in most of the “header,” “secondary_nav,” “promotion,” and “body” is white. A few exceptions are the logo area (which will is just a placeholder for now), the “Aurora App” text that is dark blue (#131828) to help it stand out, and the headings for the body that are the same dark blue.
We also need to work on the “bottom” section text as well. I set all the headings in Myriad Pro Bold at 20pt. The color is a bright baby blue (#85a1bc). I used that same blue for the text links. I set the rest of the text in white using a smaller Helvetica Bold.
The “footer” has just a couple color changes. The links were changed to an even brighter baby blue (#97b8d8), except for the active link which is white and underlined. The copyright text is 12pt Helvetica and darkish blue (#212b3f).
Step 6 – Bringing in the Logo Design
First, take a screenshot of our PSD file of the area we’ll be placing the logo into (with the logo placeholder text turned off). Fire up Illustrator. Place the screenshot on it’s own layer and lock it. I also turned off the artboard visibility (Shift + Command + H). Now create a layer for your logo and insert the text “iLoveMyApps,” which is serving as the company’s name for this tutorial. Set the text in Cooper Std Black Italic at 30pt, and give it a white fill, as shown below. Now with the text selected, go to Text > Create Outlines, then ungroup the text (Shift + Command + G). Also, delete the “o,” as we’ll be replacing that with a heart.
Now let’s work on the heart shape. First, turn on the grid (Command + “) and turn on Snap to Grid (Shift + Command + “), which will allow you to draw the shape easily. Go ahead and create a half heart shape with the Pen Tool. Now go to Object > Transform > Reflect and apply a Copy with the settings shown below. Now line up the inner edge of both half heart shapes, then in the Pathfinder palette click on Merge, which gives us a final heart shape.
Now scale the heart shape down and place it as shown. Also, work on spacing out each letter of the text until it looks right to you. I wanted the entire text to appear as one, but I spaced each word out just a bit to increase legibility. It still reads as one word though. Now copy and paste the final logo as a Smart Object into Photoshop.
Step 7 – Starting to Add Style To Our Design
We’ll continue to work our way down from top to bottom, but keep in mind that as you’re designing you may bounce around more to various areas of the design, and experiment with different looks and styles, which is great and feel free to do that.
Within the “header” section, select the background, then apply the layer styles shown below. This gives the top of the body area a small highlight and a subtle shadow is cast on the header area, which pushes it back a bit.
Now apply the styles shown below to our logo. For the gradient overlay the gradient goes from gray (#c0c4c9) to light gray (#e3e5e7).
Step 8 – Adding Style to Our Primary Navigation
First we’ll work on the non-active primary link background styles, which means all except for the “Apps” link. Apply the styles shown below and use colors that look right to you. Note: I got lot’s of inspiration from the Meta Lab site for this part of the design. I love the work done by this company, check out their folio while you’re there.
It’s always important to imagine where the light source is in your design. We’re applying some subtle lighting effects, which will give this design a modern feel, though we still need to keep the light source in mind.
Imagine that there is a light source coming from the top of the page shooting straight down, which is giving us the light direction for many of the styles we’ll be adding. Of course you can imagine more than one light source, and you can deviate from this somewhat, but keeping the light primary light source in mind will help to make the styles you apply make sense and work together visually.
Now apply the styles shown below to the “Apps” link background, which is our active link and will make it look like it is pressed down.
Now apply the following Bevel and Emboss style to the text within the primary navigation to make it stand out a bit. The effect on the text is subtle, but noticeable.
Step 9 – Applying Style to Our Secondary Navigation
First of all let’s add our iPhone app icons. For the main Aurora icon, use the same aurora illustration as used in the promotional area. Drag the vector mask that is applied as a gray square currently, onto a scaled down version of the aurora illustration, refer to Step 2 on how to do that. Now let’s add some style here. Add the following layer styles to the icon.
Apply the same styles to the outer icon background as we did to the “Apps” background button in Step 7. Control-click on the layer thumbnail of the “Apps” button background and select Copy Layer Styles. Then select the outer background, Control-click its layer thumbnail and choose Paste Layer Style, as shown below.
Step 10 – Applying Style to Our Secondary Navigation Continued
Now we’re going to add some style to our other application icons. These are just place holders to show the client where other icons would go. So I want to give them a similar look as the Aurora icon, but not make them stand out much. So, let’s start by filling them with a pattern. First we’ll make the pattern.
Open a 4px by 4px new document set up for the web. Grab the Pencil Tool, set the brush size to 1px and paint four rectangles as shown below. The darkest rectangle is #05020a and the lightest is #251440 this color. Hit Command + A to select All, then go to Edit > Define Pattern and name it “Purple Rain.” Yes I did where a shirt with this pattern on it in the eighties back in grade school.
Select the first placeholder icon. Notice how it is a shape layer currently. We need to rasterize that. So go to Layer > Rasterize > Fill Content, which keeps our vector mask in place, but rasterizes the fill. Notice the result is a rasterized layer with a vector mask applied to it – quick and simple. Go through and do this for each placeholder icon.
Grab the Paint Bucket Tool (G), and in the top-left corner choose Pattern from the drop down, make sure our “Purple Rain” pattern is selected, then click once on each placeholder icon to apply the pattern. Now Control-click on the Aurora icon thumbnail and copy the layer style, then paste it onto each placeholder application icon. Also, adjust the spacing of the application names to make room for the styles.
Let’s also adjust our default app store placeholder button over on the right of this section. A simple way to make this button blend in better to our design is to change the background color. Go to Image > Adjustments > Hue/Saturation and apply the settings shown below, or those of your choice.
Step 11 – Applying Style to Our Promotional Area
Let’s start with the background and buttons. First we’ll apply style to our large background area. Select the aurora illustration and apply the following layer styles. This gives us a highlight at the top and a stroke around the area.
Now apply the same styles to the top-right price area background, but also add the styles shown below. The colors used for the purple gradient overlay are sampled from the aurora graphic. The colors of the gradient go from purple (#68448f) to darker purple (#320580) and then back to a mid purple hue (#65428c).
Apply the same layer styles to our main “Light Up Your iPhone” heading, as we did in Step 7. You can copy and paste the layer style from there. Apply the same Bevel and Emboss style to the price text and the sub heading, as we applied to the primary navigation text in Step 7. You may want to change the Opacity of the Highlight Mode or Shadow Mode for the shading though, experiment with what looks best to you. Also, select the horizontal rule, which is a 1px high shape, and change it’s color to black. Also, apply the settings shown below to it.
Step 12 – Applying Style to Our Main Call to Action Button
Now apply the following layer styles to our main call to action button. We’ve placed a drop shadow on this so that it stands out from the background more. It has a bright color, which will attract attention. It’s placement also attracts attention. The gradient overlay has similar colors to the one used for the price background, but it only has two colors applied instead, which go from purple (#68448f) to dark purple (#320580). We’ll add an arrow in just a moment to make it stand out more as well.
Now grab the Ellipse Tool (U), and use it to create a shape layer as shown below. The color doesn’t matter because the styles will overlay it anyway. Rearrange the button text to look balanced with the added element. We’ll be using this circle to place a download arrow inside shortly. Apply the following layer styles to the button (the colors in the gradient overlay go from #9cc67e to #3a4f66).
Now we’ll create our arrow, place it into Photoshop, and style it.
Open Illustrator and create a web document. Turn on View > Show Grid and View > Snap to Grid. Use the Pen Tool to draw an arrow utilizing the grid. The size doesn’t matter. Now resize it to a shape that is about the size of the larger arrow shown below. Now go to Effect > Style > Round Corners and apply with a Radius of 0.139 in. Now copy the arrow and paste as a Vector Smart Object in Photoshop. Note: I’m using black below for demonstration purposes, but the arrow should be white.
Now apply the same styles to the arrow as we did our logo in Step 7 and scale to fit the space. The result is shown in the second image below.
Here’s what we have so far. The top section is looking good. Now let’s move onto the body next. We’ve got the bulk of the site styled now. It will be smooth sailing from here.
Step 13 – Applying Styles to Our Body Area
There aren’t too many styles that need to be applied here – just a few. Let’s start with the titles. We want to make them look indented by highlighting the inner bottom character edges, which is a style often used in Apple sites. Apply the style shown below to the “Aurora” title text. Also, apply the same style to the “Screenshots” and “Features” titles. With these later two titles, change the Opacity to 40% though (everything else in this Drop Shadow Layer Style is the same).
Apply the same layer style to the bullet points under the “Feature” column, as applied to it’s title. The results so far are shown below.
Now copy the horizontal rule from the “promotion” section, change the color to dark blue (#131828) and scale it to fit the area above the “Screenshots” title. Notice how the style is retained.
Now copy this same horizontal rule and use multiple copies of it in the last column of this section, as shown below. Be sure to delete the existing unstyled horizontal rules.
Now follow the same steps for these placeholder images here as you did in Step 10. Apply the same layer styles and “Purple Rain” background pattern fill. This is just a quick way to make this area look good for client review before you get ahold of the actual photos that will go there later. The final “body” section is shown below.
Step 14 – Apply Style to the Bottom Section
First, let’s apply the same Bevel and Emboss layer style to our titles here as we did to the text in our primary navigation in Step 8. Now drag four copies of our stylized horizontal rule down and resize as necessary, or apply the same styles and coloring to the existing horizontal lines as we did to them in the “body” section.
Replace the remaining horizontal rules of this section with dashes. You can use the Type Tool and the Dash Key for this. I used Myriad Pro at 14pt for this. This is something that will be coded in CSS, but we want to make sure we’re communicating this effectively in the design.
Apply the same layer styles to our buttons as we did in our primary navigation. Just copy those layer styles down. Be sure to stylize the text of the buttons as well. Now replace our twitter bird with a full-color version, which you can download free in the Practika Icon pack from Smashing Magazine.
Apply the following layer styles to the background of the “bottom” section and we’re done!
Conclusion
There are lots of creative website solutions you can create using just a handful of chosen elements, an interesting color scheme, utilization of appropriate styles, and attention to subtle light effects. The final image is below. You can view a larger version here.
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
100 Artworks from the Top 20 Designers in The Middle East and Africa
To round off our Photoshop Around the World series, we head to the Middle East and Africa – where the design skills are as hot as the weather! The artworks here represent a huge variety of styles and creative approaches. Enjoy the last leg of our trip around the world!
1. Anthony Dart
Representing: Johannesburg, South Africa
“Ontwerp is a multi-disciplinary Design & Animation studio based in Johannesburg South Africa, founded by Designer / Director Anthony Dart. Ontwerp’s philosophy places design at the forefront. Design is the emphasis. We perceive design as problem solving, we are obsessive with craft and detail, We believe in the formidable communication of imagesand type and their inherent narrative ability. Our interests extend toArt Direction, Motion Graphics, 2D & 3D Animation, Sound Design, Graphic Design for Print and Screen.”
2. One Horse Town
Representing: Cape Town, South Africa
The creative illustration work and great color schemes are what really caught my eye when checking out One Horse Towns portfolio of work. It is no doubt that this retro look and feel is one that brings them a lot of business. But, they are not limited to only that style. If you check out some of their illustration work, you will find a wide variety of work.
3. Brandt Botes
Representing: Cape Town, South Africa
Brandt Botes really is an artist without a style. While many of the samples below might lead you to think that he is limited to just a basic illustrator type style, you would be wrong. His portfolio is filled with a wide variety of styles and types of works. Everything from rough sketch style illustration to simply complex patterns can be seen in his portfolio.
4. Bison
Representing: Cape Town, South Africa
“Bison is the work of Linsey Levendall and Daniel Orme who form a creative studio based in Cape Town, South Africa. They service big to small businesses, musicians, the
arts and culture sector and ad agencies with a range of skills including illustration, graphic design, branding and art direction.
Bison holds the belief that experimentation is the key to discovery and thus find ways around the tried and tested approach producing a fresh and unexpected
result.
5. Ryan Atkinson
Representing: Johannesburg, South Africa
“Im a young south african designer who loves good design. I love typography, print design, photography, motion graphics and illustration. My icons include, Non-Format, Build (Micheal C. Place), Massimo Vignelli, Jospeh Muller-Brockman, Wim Crouwel, David Carson (Interestingly different I know, but I have my reasons). I am interested in furthering myself and my skills as often as possible, so give me a shout if you think a piece of work is not cool, and you have some ideas why 
”
6. Islam Zayed
Representing: Cairo, Egypt
While Islam Zayed has some really nice typography work in his portfolio, I was more impressed with some of his graphic design work and photo manipulation stuff. There are also of course, his works that combine the two for a truly outstanding finished piece, some of which is very Desktopgrahy-esque.
7. Mohamad Moftah
Representing: Cairo, Egypt
“Mohamad Moftah is an Egyptian born painter, graphic designer and illustrator based in Cairo, Egypt. He graduated from the Faculty of Fine Arts, Helwan University in the summer of 2008 with honors. Since then he has been working in advertising and design.
Mohamad has focused primarily on painting and design, working with diverse local and international clients like Coca-Cola and McDonald’s, producing logos, corporate identities, brochures, TV ads, print ads and most other forms of print.”
8. International Nomads
Representing: Riyadh, Saudi Arabia
“We like to describe ourselves as a Collective, an internationally present collective of professionals & creatives from around the globe, and this team of fine individuals is called International Nomads.
International Nomads specializes in Marketing & Digital Advertising. We provide a full suite of integrated marketing and advertising services, broken into 3 main areas of work; Consultation, Creative, and Production services”
9. JayDz
Representing: Dammam, Saudi Arabia
“My name’s Jay, a Graphic Designer from the Mid-East.. My Passion is My Art.. and My Inspiration’s My Fiance..
I design, I screw up, then I do good.. its how I do it lol … my Senses are my tutorial tools… I observe and learn new techniques by analyzing others’ graphics!
o to all great Designers and Illustrators out there…. Keep posting your great work! =D
Addin’ me/ Applaudin’ or Criticizin’ my Work… Sharin’ ‘em thoughts with me.. iS What Builds Me =)”
10. Younes Badi
Representing: Rabat, Morocco
“I am Younes Badi. I am a young graphic designer from Rabat in Morroco. Here is my graphic design portfolio from school. I am actually studying graphic design at a local design university. I hope you enjoy looking at some of my artwork and designs.”
11. Younes ze
Representing: Algiers, Algeria
Younes Ze is one of the younger artists on this list. According to the artist profile, they are only about 21. Whats cool about their profile, is that they have done a nice job at taking rather popular trends and turning them into a more unique style. This combination of mixing popular trends with a unique style is how new trends are born.
12. Clement de Bruin
Representing: Cape Town, South Africa
As I was checking out Clement de Bruins blog, I noticed that his most recent post was of a blank figure he painted. Anyone who has the skills to do those well gets props in my book. Toys aside, it is Clement de Bruins illustrative work that really stands out. From what i can see, it has really progressed over the years and Im sure it will only get better.
13. Disturbance
Representing: Durban, South Africa
“Disturbance is a graphic design studio based in Durban, South Africa and one of the continent’s leading design practices. disturbance’s work has been recognised both locally (Loeries awards) and internationally(D&AD, ADC, One Show, Comm Arts, Society of Illustrators).
Over the last decade disturbance has variously won awards for their clients, published a ‘zine, released a music CD, designed and operated a restaurant, a gallery and a design store and launched (and collapsed) the much hyped design brand, “Home Industries”.”
14. Karen Mc Dade
Representing: Johannesburg, South Africa
“I specialise in designing online and print media from conception to completion. I have a passion for photo-manipulation and will often stay up late at night experimenting with new techniques. I’m especially partial to the surreal and fantasy-esque style and my art has a general tenancy in this direction.
I conduct the majority of my work via the internet as many of my clients reside internationally. I have designed for companies from the United Kingdom, to South Africa to the USA. Clients include the Discovery Channel, Animal Planet, National Geographic, and Pegasus Spiele, among others.”
15. MissYucki
Representing: Johannesburg, South Africa
“MissYucki is an art and design project conceived by Kat Cameron and Alba Poretti. Inspired by the frenzy of down town Johannesburg, we have created a character named Missyucki and employing a range of mediums we create scenes and themes from her mythology as well as curiosities and novelties inspired by her way of life.”
16. Sam Moshaver
Representing: Tehran, Iran
There are no shortage of, for lack of a better term, gothic type artists out there. But few really have the creativity to take their work to a state of originality. Sam is not one of those few. He is one of the ones who can create dark images to stir emotions without being over saturated with dark cliches and stereotypes. On top f that, he can also use these design skills to create work that is a little more public friendly for ads, websites, etc.
17. Ahmed Othman
Representing: Egypt
“I’m Ahmed Othman from EGYPT, I was born in 1987 in Mansoura city. I got interested in drawing when I was young so I decided to learn about Art and that’s when I joined the faculty of Art education and this is helped me greatly to improve my talent in graphic design.”
18. Amr Tahtawi
Representing: Cairo, Egypt
“at designs is a small design studio with a big attitude in web, Print, Graphics, Logotype, and illustration. Relax, watch & enjoy selected work from Amr Tahtawi designz.”
19. Ahson Rafiq
Representing: Sanaa, Yemen
“My name is Ahson Rafiq, I’m the creator of Gurilla Skateboards and I do freelance web design right here at designatomy. I’ve done over 5 years of Graphic and Wordpress Blog Designing and now it’s time for me to make a portfolio so here’s the site and my work is showcased here officially.”
20. Mikias Hailu
Representing: Addis Ababa, Ethiopia
“Currently I’m a freelance worker with graphic design in Ethiopia. I have a good background with drawing and paintings that I have been practicing since child hood,and now I’m working with Web Design, Graphic Design, Digital Art, Illustration, etc”
100 Artworks from the Top 20 Designers in The Middle East and Africa
To round off our Photoshop Around the World series, we head to the Middle East and Africa – where the design skills are as hot as the weather! The artworks here represent a huge variety of styles and creative approaches. Enjoy the last leg of our trip around the world!
1. Anthony Dart
Representing: Johannesburg, South Africa
“Ontwerp is a multi-disciplinary Design & Animation studio based in Johannesburg South Africa, founded by Designer / Director Anthony Dart. Ontwerp’s philosophy places design at the forefront. Design is the emphasis. We perceive design as problem solving, we are obsessive with craft and detail, We believe in the formidable communication of imagesand type and their inherent narrative ability. Our interests extend toArt Direction, Motion Graphics, 2D & 3D Animation, Sound Design, Graphic Design for Print and Screen.”
2. One Horse Town
Representing: Cape Town, South Africa
The creative illustration work and great color schemes are what really caught my eye when checking out One Horse Towns portfolio of work. It is no doubt that this retro look and feel is one that brings them a lot of business. But, they are not limited to only that style. If you check out some of their illustration work, you will find a wide variety of work.
3. Brandt Botes
Representing: Cape Town, South Africa
Brandt Botes really is an artist without a style. While many of the samples below might lead you to think that he is limited to just a basic illustrator type style, you would be wrong. His portfolio is filled with a wide variety of styles and types of works. Everything from rough sketch style illustration to simply complex patterns can be seen in his portfolio.
4. Bison
Representing: Cape Town, South Africa
“Bison is the work of Linsey Levendall and Daniel Orme who form a creative studio based in Cape Town, South Africa. They service big to small businesses, musicians, the
arts and culture sector and ad agencies with a range of skills including illustration, graphic design, branding and art direction.
Bison holds the belief that experimentation is the key to discovery and thus find ways around the tried and tested approach producing a fresh and unexpected
result.
5. Ryan Atkinson
Representing: Johannesburg, South Africa
“Im a young south african designer who loves good design. I love typography, print design, photography, motion graphics and illustration. My icons include, Non-Format, Build (Micheal C. Place), Massimo Vignelli, Jospeh Muller-Brockman, Wim Crouwel, David Carson (Interestingly different I know, but I have my reasons). I am interested in furthering myself and my skills as often as possible, so give me a shout if you think a piece of work is not cool, and you have some ideas why ”
6. Islam Zayed
Representing: Cairo, Egypt
While Islam Zayed has some really nice typography work in his portfolio, I was more impressed with some of his graphic design work and photo manipulation stuff. There are also of course, his works that combine the two for a truly outstanding finished piece, some of which is very Desktopgrahy-esque.
7. Mohamad Moftah
Representing: Cairo, Egypt
“Mohamad Moftah is an Egyptian born painter, graphic designer and illustrator based in Cairo, Egypt. He graduated from the Faculty of Fine Arts, Helwan University in the summer of 2008 with honors. Since then he has been working in advertising and design.
Mohamad has focused primarily on painting and design, working with diverse local and international clients like Coca-Cola and McDonald’s, producing logos, corporate identities, brochures, TV ads, print ads and most other forms of print.”
8. International Nomads
Representing: Riyadh, Saudi Arabia
“We like to describe ourselves as a Collective, an internationally present collective of professionals & creatives from around the globe, and this team of fine individuals is called International Nomads.
International Nomads specializes in Marketing & Digital Advertising. We provide a full suite of integrated marketing and advertising services, broken into 3 main areas of work; Consultation, Creative, and Production services”
9. JayDz
Representing: Dammam, Saudi Arabia
“My name’s Jay, a Graphic Designer from the Mid-East.. My Passion is My Art.. and My Inspiration’s My Fiance..
I design, I screw up, then I do good.. its how I do it lol … my Senses are my tutorial tools… I observe and learn new techniques by analyzing others’ graphics!
o to all great Designers and Illustrators out there…. Keep posting your great work! =D
Addin’ me/ Applaudin’ or Criticizin’ my Work… Sharin’ ‘em thoughts with me.. iS What Builds Me =)”
10. Younes Badi
Representing: Rabat, Morocco
“I am Younes Badi. I am a young graphic designer from Rabat in Morroco. Here is my graphic design portfolio from school. I am actually studying graphic design at a local design university. I hope you enjoy looking at some of my artwork and designs.”
11. Younes ze
Representing: Algiers, Algeria
Younes Ze is one of the younger artists on this list. According to the artist profile, they are only about 21. Whats cool about their profile, is that they have done a nice job at taking rather popular trends and turning them into a more unique style. This combination of mixing popular trends with a unique style is how new trends are born.
12. Clement de Bruin
Representing: Cape Town, South Africa
As I was checking out Clement de Bruins blog, I noticed that his most recent post was of a blank figure he painted. Anyone who has the skills to do those well gets props in my book. Toys aside, it is Clement de Bruins illustrative work that really stands out. From what i can see, it has really progressed over the years and Im sure it will only get better.
13. Disturbance
Representing: Durban, South Africa
“Disturbance is a graphic design studio based in Durban, South Africa and one of the continent’s leading design practices. disturbance’s work has been recognised both locally (Loeries awards) and internationally(D&AD, ADC, One Show, Comm Arts, Society of Illustrators).
Over the last decade disturbance has variously won awards for their clients, published a ‘zine, released a music CD, designed and operated a restaurant, a gallery and a design store and launched (and collapsed) the much hyped design brand, “Home Industries”.”
14. Karen Mc Dade
Representing: Johannesburg, South Africa
“I specialise in designing online and print media from conception to completion. I have a passion for photo-manipulation and will often stay up late at night experimenting with new techniques. I’m especially partial to the surreal and fantasy-esque style and my art has a general tenancy in this direction.
I conduct the majority of my work via the internet as many of my clients reside internationally. I have designed for companies from the United Kingdom, to South Africa to the USA. Clients include the Discovery Channel, Animal Planet, National Geographic, and Pegasus Spiele, among others.”
15. MissYucki
Representing: Johannesburg, South Africa
“MissYucki is an art and design project conceived by Kat Cameron and Alba Poretti. Inspired by the frenzy of down town Johannesburg, we have created a character named Missyucki and employing a range of mediums we create scenes and themes from her mythology as well as curiosities and novelties inspired by her way of life.”
16. Sam Moshaver
Representing: Tehran, Iran
There are no shortage of, for lack of a better term, gothic type artists out there. But few really have the creativity to take their work to a state of originality. Sam is not one of those few. He is one of the ones who can create dark images to stir emotions without being over saturated with dark cliches and stereotypes. On top f that, he can also use these design skills to create work that is a little more public friendly for ads, websites, etc.
17. Ahmed Othman
Representing: Egypt
“I’m Ahmed Othman from EGYPT, I was born in 1987 in Mansoura city. I got interested in drawing when I was young so I decided to learn about Art and that’s when I joined the faculty of Art education and this is helped me greatly to improve my talent in graphic design.”
18. Amr Tahtawi
Representing: Cairo, Egypt
“at designs is a small design studio with a big attitude in web, Print, Graphics, Logotype, and illustration. Relax, watch & enjoy selected work from Amr Tahtawi designz.”
19. Ahson Rafiq
Representing: Sanaa, Yemen
“My name is Ahson Rafiq, I’m the creator of Gurilla Skateboards and I do freelance web design right here at designatomy. I’ve done over 5 years of Graphic and Wordpress Blog Designing and now it’s time for me to make a portfolio so here’s the site and my work is showcased here officially.”
20. Mikias Hailu
Representing: Addis Ababa, Ethiopia
“Currently I’m a freelance worker with graphic design in Ethiopia. I have a good background with drawing and paintings that I have been practicing since child hood,and now I’m working with Web Design, Graphic Design, Digital Art, Illustration, etc”
Free Set of 25 Icons from TurboMilk – Courtesy of GraphicRiver!
To help celebrate the launch of Envato’s redesigned marketplaces we have a free goodie to give away. This set of 25 web icons in 3 sizes was created by Eugene Artsebasov and the illustrious Turbomilk team!
Free Set of 25 Icons from TurboMilk – Courtesy of GraphicRiver!
To help celebrate the launch of Envato’s redesigned marketplaces we have a free goodie to give away. This set of 25 web icons in 3 sizes was created by Eugene Artsebasov and the illustrious Turbomilk team!
5 Dashing Marketplace Wallpapers
As part of Envato’s marketplace redesign you can grab some great wallpapers for each of the marketplaces (AudioJungle, GraphicRiver, FlashDen, ThemeForest, VideoHive).
Adding a Realistic Tattoo the Easy Way with Photoshop – Screencast
“The end goal of a good retoucher is to make their work appear invisible while creating some alternative reality. In this case we’re going to look at one method I use for adding a tattoo to an image while making it look like it’s really a part of the original photo. This method involves placing an Illustrator file (the tattoo source image) as a Smart Object, using the Free Transform/Warp Tool, adding a Gaussian Blur (to adjust the ‘Focus’) and then finishing it all off with a lighting effect created from a Channel Pull. Ready to begin?” Dennis Dunbar
Here is a link to the written version of the tutorial Adding a Realistic Tattoo the Easy Way with Photoshop and the video version is below.
Adding a Realistic Tattoo the Easy Way with Photoshop – Screencast
“The end goal of a good retoucher is to make their work appear invisible while creating some alternative reality. In this case we’re going to look at one method I use for adding a tattoo to an image while making it look like it’s really a part of the original photo. This method involves placing an Illustrator file (the tattoo source image) as a Smart Object, using the Free Transform/Warp Tool, adding a Gaussian Blur (to adjust the ‘Focus’) and then finishing it all off with a lighting effect created from a Channel Pull. Ready to begin?” Dennis Dunbar
Here is a link to the written version of the tutorial Adding a Realistic Tattoo the Easy Way with Photoshop and the video version is below.
Adding a Realistic Tattoo the Easy Way with Photoshop
The end goal of a good retoucher is to make their work appear invisible while creating some alternative reality. In this case we’re going to look at one method I use for adding a tattoo to an image while making it look like it’s really a part of the original photo.
This method involves placing an Illustrator file (the tattoo source image) as a Smart Object, using the Free Transform/Warp Tool, adding a Gaussian Blur (to adjust the ‘Focus’) and then finishing it all off with a lighting effect created from a Channel Pull. Ready to begin?
Final Image Preview
Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.
Video Tutorial
Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.
Introduction
The image we’re going to begin with is part of a series of images photographer Richard Radstone created featuring models representing various mythical creatures. The creature being represented here was a Celtic war goddess, Aerten.
In addition to the more exotic makeup we thought she needed a little something extra so we added a tattoo to finish off the look. She does make a beautiful warrior, doesn’t she? Now let’s get started.
Step 1
Open the file we’re going to add the tattoo to. The image below is the one we’ll be using for this tutorial. Psd Plus members will find it located in the “final.psd” file located in the “source file.” Also, you’re welcome to use an image of your choice.
The basic retouching and clean-up has already been done on the image so it’s all ready for our tattoo.
Step 2
Now we’re going to use Photoshop’s Place command to place the Illustrator file of the tattoo in the image. Go to File > Place and choose “Tattoo1.eps” (which for Psd Plus members is located in the source folder) and hit Enter. You will then see the tattoo appear in your image as another layer named “Tattoo 1.” By default Photoshop CS4 makes this layer a “Smart Object.”
Photoshop’s Smart Objects are really files within files, which gives you a lot of advantages. Since the original file for the tattoo is embedded within the Smart Object any work done using the Free Transform Tool while it’s a Smart Object will refer to the original file and re-render every time you make a new adjustment using Free Transform. This means you can play with the placement and sizing of the tattoo without worrying about losing any quality as you decide where to place it.
Step 3
Now click on the “Tattoo1″ layer and bring up the Free Transform Tool by going to Edit > Free Transform and rough it into place on her neck, as shown below.
t
Step 4
With the tattoo roughly placed we can see that it needs some work to get it to follow the contours of her neck. The muscles of her neck make the surface a little uneven, it’s not quite a smooth round cylinder shape. This means not only will we need to rotate it, but we’ll need to add some Perspective (it should get slightly smaller as it recedes around the neck) and we’ll need to give it a little Warping to get it to really follow the shape just right.
Since our layer is a “Smart Object” we’ll need to render it as a normal layer. Photoshop still doesn’t offer the ability to do as much to Smart Objects as I’d like. To render the Smart Object into a regular layer make sure you’ve chosen that layer in the Layers Palette and then make a copy of the layer by dragging it down to the Create a New Layer button (so we have the original to go back to just in case).
This will give you a layer named “Tattoo 1 copy.” This is the layer we’re going to work with next. Since we made a copy of a Smart Layer the copy will be a Smart Layer too. Changing this to a regular layer is as simple as going to the Layer Menu and choosing Rasterize > Smart Object.
Step 5
By taking advantage of the Transform Tool’s flexibility we can rotate and warp the tattoo so that it looks like it’s really following the contours of her neck all in one operation.
Select the “Tattoo 1 copy” layer we just made and bring up the Free Transform Tool by going to Edit > Free Transform (Command + T). Now rotate the tattoo by moving the cursor near one of the corners, (you’ll see the cursor change to a bent arrow), and then drag it in a clockwise motion.
When it looks about right (don’t hit Enter yet!) switch to the Warp Tool by holding down Control and clicking outside the Transform window. This will bring up a submenu listing all the available options for the Transform Tool. Choosing Warp will bring up the handles and control lines for the Warp tool. Continuing with this tool drag the corners and handles around until you are satisfied the tattoo is now following the contours of the neck.
You can hide the Transform Tool to get a better preview by invoking Photoshop’s Hide command, press Command + H on your Keyboard.
Below is a screen grab of how it looked on my version.
Note that I pulled the upper-left corner up and to the left a little, then I pulled the lower-left corner down and to the left a little. Next I pulled the upper-right corner down a little and moved the lower-right corner up and to the left a bit to make it look like the tattoo was following the curve of the muscle on her neck. Finally I grabbed some of the points inside the tool’s window and moved them around slightly to give more of a slightly wavy look to the tattoo.
Step 6
We’re almost there! Now the tattoo should look something like the image below.
Looking at the image above we can see that the part of the neck the tattoo is on is a bit soft or blurry. To make it look like the tattoo is really there it needs to match the softness of that section of the neck. Luckily we can do this easily by adding a small amount of Gaussian Blur to the tattoo layer.
Just to make sure we can easily go back and change things if necessary, let’s first make a copy of the tattoo layer by going to the Layers palette, selecting the layer “Tattoo 1 copy” and dragging it down to the Make New Layer icon as we did before in Step 4. This new layer should now be named “Tattoo 1 copy 2.”
Making sure this layer is selected in the Layers palette now go bring up the Gaussian Blur filter by going to the Filter Menu and choosing Blur > Gaussian Blur. With the Gaussian Blur dialogue open be sure to click the Preview option so you can judge how much blur is needed to match the softness of the neck where the tattoo is placed.
Since the Gaussian Blur filter’s strength is rated by pixels the amount of blur needed will depend on the actual resolution of the image you’re working on. When you’re happy with the amount hit Enter to apply the blur.
You should have something that looks pretty close to the image below now.
Step 7
With the tattoo warped and softened up to match the model’s neck it’s looking pretty close now, just two more things to think about before we’re done.
So far we’ve worked on getting the tattoo to look like it’s following the surface of the neck, and we’ve worked on getting it to match the focus of the image, but it still looks like it’s just sitting there. Looking closely we can see that our tattoo lacks the highlights and shadows that define the shape of her neck.
Since the tattoo is a very dark color we really just need to add some matching highlights. To do that we’re going to use a technique many retouchers call a “Channel Pull,” that is we’re going to copy one of the channels from the background image and use that to create the highlights we need.
So turn off the “Tattoo” group and then go to the Channels palette to look at the individual “Red,” “Green,” and “Blue” channels to see which one has the best potential for giving us the highlights.
The image below shows the individual channels side by side.
We’re looking for a channel that shows the best contrast between the highlights and shadows on her neck, and from the channels we see here the Blue channel looks like the one we’re after.
After deciding to use the “Blue” channel as the basis for our lighting effect, make a copy of the Blue channel by going to the Channels palette and clicking on the “Blue” channel. Then with that highlighted drag it down to the New Channel icon in the Layers palette as shown.
This will give us a new channel named “Blue copy.” Below is what our copy of the “Blue” channel looks like.
Let’s take a closer look at the area where our tattoo is.
An extra benefit we’ll get from using this channel comes from the fact that the “Blue” channel almost always tends to be the noisiest channel of the image. In this case the noise will help us out by giving our tattoo some nice skin like texture when we use it to add the lighting.
Step 8
To boost the effect of the lighting we’ll create a little more contrast in our “Blue copy” channel by using Curves to push the black values up a bit. Since we want to use the noisy texture in our lighting effect we’re only going to work on the Black point part of the Curves. Pushing the White point value around, or using the mid-tone areas will tend to make our noise texture block up.
Bring up the Curves dialogue by using the Command + M keyboard shortcut. Now click on the Black Point of the curve and pull it over to the right just a little as shown.
Note how the black area on the right grows a bit, this will restrict our lighting effect to the lit part of her neck and keep it out of the shadows. If you look closely you can also see this move emphasizes the noise in the channel a little as well, which will help give a textured look to our lighting effect.
Step 9
Now load the “Blue copy” channel as a selection by going to the Channels palette and Command-clicking on the icon of the channel we just manipulated. Next go to the Layers palette and make sure you’ve highlighted the warped and blurred tattoo layer “Tattoo 1 copy 2.” Then add a new layer holding down Alt while clicking on the New Layer icon at the bottom of the Layers palette.
Name this layer “Highlight” and make sure to choose the Use Previous Layer to Create Clipping Path option. This will make sure our highlight only affects the tattoo.
Now make sure you have White chosen as your foreground color and fill the selection with White using the Alt + Delete keyboard shortcut. The image should now look like the image shown below.
The tattoo now reflects the same lighting pattern as the neck and looks more like something that was in the original shot. Plus if you look very closely you’ll see that the lit part of the tattoo now shows the same texture as the skin around it. This is very important if we’re going to make
our illusion believable. Below is a close-up of the tattoo showing what I mean.
Step 10
The last step left to complete our image is to adjust the color of the tattoo. While tattoos can be almost any color most of the single color ones I’ve seen have a little bit of a greenish tinge to them so we’ll add a Curves Adjustment layer to the tattoo layer to push the color in the right direction.
To make the Curves Adjustment layer go to the Layers palette hold down the Alt key click on the icon at the bottom of the palette that looks like a half-white/half-black circle. This opens up the Pop-up menu where you can choose what kind of Adjustment layer you want to add. For this step we’re going to choose Curves.
Holding down the Alt key also brings up the dialogue box where you can name your layer and choose the Use Previous Layer to Create Clipping Path option, which as we’ve seen previously will make sure that this layer only affects our tattoo.
With the Curves layer created you’ll now want to adjust the Curves (as shown below) to give the tattoo the desired color.
From this screen grab you can see that I moved the Black Point of the Master curve over to the right a little, this darkened the tattoo. Then I moved the middle of the Red curve up some, added a little Green as well and finally took some Blue out by pulling down on the Blue curve.
Below is a wider shot showing the Curves dialogue and the adjusted image as well.
Finally with the tattoo in place, rotated and warped to follow the contours of the model’s neck, and with the lighting and color adjustments made, your image should now be complete, as shown below.
Conclusion
So in the process of adding this tattoo to our Celtic Warrior model we brought in an Illustrator file as a Smart Object, then used the Free Transform and Warp tools to work it into place, added some Gaussian Blur to make it match the softness of her neck and then added some lighting and texture by using a copy of the “Blue” channel and lastly adjusted the color of the tattoo with a Curves Adjustment layer. Not bad for a day’s work, eh?
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.