Archive for the ‘3.Photoshop’ Category
Posted on January 20, 2009 - by Khaled
Easily Create “Obama style” graphics with Photoshop
Easily show your support! This tutorial will show you how to use Photoshop to quickly turn your photograph into a graphic that has the “Obama style”. WIth Obama the internet was used at its fullest so this tutorial seems to be something in tune with his campaign! especially that today is his inauguration day. Start with your photograph, set the mode to CMYK.
Hit ctrl+M to pop up the curves window. Set channel to black, output to 70 and input to 35.
Then go to filter > Blur > Smart Blur. Set Radius to 2, threshold to 50 and quality to high.
Revert back to RGB Mode. Go to Image > adjustments > Gradient Map. Set the first color at location 0% (blue color: #03334c ), the second color at location 25% ( red color: #d91a21), the third point of the gradient at location 60% (color: #70969e) and the last one at location 100% (color #fce3a6). and hit OK. You will obtain this:
Add some ornaments and text to customize it more.
Tweak it a bit more with Mask layers, dodge and burn tools and you’re quickly done.
This was a tutorial written on the fly for the occasion of Obama’s inauguration day! Let’s say we’re full of hope right now for the future.
Posted on January 20, 2009 - by Khaled
Create a cool frog in just 3 steps with Photoshop
Another quick photoshop tutorial…So do you remember this fella?
If you were a regular reader of this blog when it used to be called “No relation” then you will recognize this frog as it was on the header. You can download the full resolution stock photo from sxc.hu for free. I will quickly show you in 3 steps how to turn this plain ordinary frog into a cool one! Ok first of all let’s change the eyes color to something more attractive and exotic! what about pink?
Step 1 : Eyes color
Start with the selection of the eyes with the elliptical marquee tool.
Now we’re going to add a new adjustment layer to tweak the Hue/saturation of the eyes.
Set the hue/saturation to the following values:
Of course by setting the hue value differently you can have a different eyes color. Just choose what you like!
Step 2 : Body color
Ok don’t deselect just inverse the selection (ctrl+shift+I). Add a new adjustment layer of Brightness and contrast: set brightness to +30 and contrast to +25.
Now as you see the colors are a lot more lively and nicer to see!
Step 3 : Final touches
Ok use the Burn tool (brush 35px, Range: Midtones; Exposure: 30%) and darken the shadow and the lower parts of the frog. You may want to use the dodge tool to add some brightness to the eyes. The final result will look like this:
I hope you enjoyed this quick tutorial. If you need more details about the steps just let me know.
Posted on January 16, 2009 - by Khaled
Easily achieve the trendy LetterPress effect with Photoshop
In late 2008 and early 2009 LetterPress effect is becoming increasingly popular and used in many web sites. So here 2 quick examples on how you can create a realistic letterpress effect with Adobe Photoshop (Version 7 or newer). This will take you just a couple of minutes and you can achieve it even if you are a beginner.
Example 1:
Open Photoshop, create a new document (600 x 400 for instance). I started with a white background and typed the word Letterpress (Font: Century Gothic, 60pt, All caps and set the color for instance to: #00bae8).
Now we are going to add layer effects (double click the text layer) and simply check the inner Shadow box and set it to these values (shadow color: black #000000):
You will obtain this kind of effect:
As you see we’re almost there! You can customize a bit more with overlaying a gradient overlay or you can rasterize the type layer and work on it with burn/dodge tool. You can check out this tutorial to see how to use Dodge/Burn tools. You should be able to end up with a final aspect that looks like this:
I just applied a gradient overlay effect and some burning at the base of the letters.
Example 2:
Ok, let’s see another variation that might work better if you are after a metallic Letterpress effect. Create a new document, fill in the background with a light grey color (#d0d0d0 for instance). Type in LETTERPRESS (Font: Century Gothic, 60pt, All caps, Set tracking to 50 and set the color for instance to: #919191). Now we’re going to add an inner glow effect this time. Set the Inner glow values as following (color: #000000):
The noise percentage can be tweaked and set to what is best for your purpose!
Now apply an outer glow with these settings:
You should obtain something like this:
All you need now is to play with your background to make it look like brushed metal using noise filters and motion blur along with dodge/burn tools. May be also add a gradient overlay to the text layer and you will have something that looks like this:
If you think I should put more details about the creation of this metallic background or on the last steps of this tutorials let me know!
Posted on January 7, 2009 - by Khaled
Top 10 Web Design / Web Development Podcasts
Nowadays, Podcasting is gaining a ceaseless increasing interest. The word podcasting was created by blending the words “iPod” and “broadcast”. This is due to the fact that the first podcasting scripts were developed for Apple iPod portable media player. However, an iPod is no longer required to listen to podcasts. Most Media Players will do the job! I prefer iTunes though as it allows searching podcasts, subscribing to them (free and paid podcasts do exist) and of course listening to them. iTunes offers really cool features for this.
Podcasts are generally a series of audio or video files which are diffused on the web via syndicated download, through Web feeds. So they are a perfect combination of RSS specification and the MP3 compression algorithm.
Over the few last years I gathered a nice collection of podcasts that I like to watch/listen to. I am going to share with you the top 10 podcasts that I favor when it comes to Web Design and Web Development.
1. BoagWorld.com
Paul Boag’s Podcast (co-hosted with Marcus Lillington) started since August 2005. It has, as of today, 147 episodes. Episode 148 will be released within a week or so. Paul deals with different subjects related to the web design business. He usually invites some big names to the show. The live streaming recording is a nice bonus too!
2. SitePoint.com
A fairly new, yet excellent Podcast, that started last November (2008). The Hosts are Brad Williams, Patrick O’Keefe, Stephan Segraves, and Kevin Yank. The SP Podcast is about The Web industry. This is an outstanding show with different point of views. 5 episodes till now but the 6th is in its way soon!
3. Photoshop User TV
An excellent Podcast to watch for Photoshoppers! Hosted by the Photoshop guys: Dave Cross, Matt Kloskowski, and Scott Kelby from the National Association of Photoshop Professionals (NAPP). The Photoshop guys share each week some very nice Adobe Photoshop tutorials, along with some very cool tips and tricks that will hugely increase your Photoshop productivity. 167 episodes for now.
4. Web Design TV
This podcast is produced by .net magazine. This podcast deals with different web design aspects and presents several software tutorials and tips (CSS, Graphic design, Flash, Photoshop…). The podcast started back in March 2008 and 28 episodes were released till now.
5. Adobe Creative Suite Video Podcast
The Adobe Creative Suite Podcast features tips and tutorials mainly about Photoshop, Indesign and other Adobe CS software. It is hosted by Terry White. This is a 2 years old podcast that started in 2006 and still active till now.
6. The Rissington Podcast
Hosted by famous web designers John Oxton and Jon Hicks. Deals with Web geeky stuff. Started in late 2007. 19 podcast episodes were released.
7. php|architect’s PHP Podcast (P3)
A bi-weekly radio-style podcast full of news, events and discussions about PHP. It is probably one of the oldest Podcasts on the net as it started since 2003.
8. Appclinic
A video Podcast with tutorials for graphic designers hosted by Adam Hay.
9. Rookie Designer
An audio podcast about web design as a job/career hosted also by Adam Hay. This podcast wasn’t very active lately but the early episodes are great.
10. Rails Podcast
A nice rails podcast.
Now even if some of these are less active these days, listening to older episodes is really a good thing that will help learn tons of things. Most of them are available for subscription via Apple iTunes which the media player I really recommande for podcasts.
Posted on October 22, 2008 - by Khaled
Create your own Icons using Photoshop
Yet another old tutorial from the old Kyscorp tutorials depot.
I read in many forums some threads from people asking how to make icons (windows icons) but i did not appreciated the answers because they wasn’t well explained or totally wrong (changing the extension of a gif file to .ico!!!). So i made this tutorial and tried to explain all the steps needed to get the final result.Yes, I’m not a professionnal but this might help beginners.In this tutorial I’m using photoshop cs (or newer) and microangelo (5.58 or +) (this is what i’m using to make my icons).
Posted on April 15, 2008 - by Khaled
Photoshop Wrap background Tutorial
Another old Photoshop tutorial picked up from the kyscorp archives again. This is just to show you how to create some special background effect with Photoshop. Of course once you see how the background was done you can change it and make some tweaks all along the tutorial modifying any step to obtain what you exactly need. It is an old tutorial that was created for Adobe Photoshop 7 but you can of course use Photoshop CS, CS2 or CS3. More old tutorials will be posted soon…
Posted on April 7, 2008 - by Khaled
Rusted Engine Photoshop Tutorial
Yet another old Photoshop tutorial already posted on Kyscorp. This one is called: Rusted engine. During this tutorial you will learn some basic photo manipulation techniques in Adobe Photoshop. You can use those techniques in so many different ways to create different effects especially related to texturing with Photoshop.
It is an old tutorial that was created for Adobe Photoshop 7 but you can of course use Photoshop CS, CS2 or CS3. More old tutorials will be posted soon…
Posted on April 7, 2008 - by Khaled
Photoshop Metal Interface Tutorial
Another old Adobe Photoshop tutorial from Kyscorp old archives. I’ll be reposting most of those. This is not a text effect tutorial but it is a simple Photoshop tutorial for beginners that will show you how to use the dodge and burn tools in Photoshop to create a metal-like interface. Quite easy to learn with good results at the end. It is an old tutorial that was created for Adobe Photoshop 7 but you can of course use Photoshop CS, CS2 or CS3. More old tutorials will be posted soon…
Posted on April 7, 2008 - by Khaled
Photoshop Twirl Neon Text Effect
So back to posting the old Photoshop tutorials that used to exist on Kyscorp. Many of you emailed me asking for those especially the ones related to Text effects. So I am just starting with this one: Photoshop Twirl Neon Text Effect. It is an old tutorial that was created for Adobe Photoshop 7 but you can of course use Photoshop CS, CS2 or CS3. More old tutorials will be posted soon…
Posted on March 28, 2008 - by Khaled
Adobe Photoshop Express Beta: now Online for free!
Adobe Photoshop Express Beta is now officially launched. It is free but only available for the US users at least for now. I believe some other countries should follow up soon. Photoshop Express is a light version of Photoshop that’s based on Flash 9 web application. You won’t be able to use layers, make heavy changes and manipulations or even use text and text options but it is pretty simple to use Photoshop Express to crop, resize, sketch, saturate or change the colors of your Image (Hue).
With your Free online Photoshop Version you will have 2GB of free disk space storage and a Flickr-like admin to go with it. Moreover you can and it synchronize it with your Facebook, MySpace or Picasa accounts to change any of your photos and when you save those tweaks via the Photoshop interface they show up directly in your Facebook or Myspace. As for the synchronization with Flickr it is being devoloped and will be happening soon. Same for adding other languages and of course countries as I’ve mentioned it before. So now soon we will see everyone having his own light Photoshop reachable online! and probably soon Photoshop Express will be a lot more powerful than what it is now…. Only time will tell. If you are based in the US go get your Adobe Photoshop Express Beta! all you need is to sign up for a free account! For the other just wait for your country to be listed!
Continue to the Adobe Press release:
Posted on January 17, 2007 - by Khaled
Photoshop “Reflection” tutorial
So this is the second simple Photoshop tutorial I am posting in the new Photoshop tutorials series. As I’ve stated before, this is to show to achieve the reflection effect that was created at the end of the Photoshop “Glass Text” Tutorial. And yes! many of you were requesting it.
This tutorial was done using Adobe Photoshop CS2 but, of course, it can be achieved using older Photoshop versions. So we are going to start where we ended in the previous Photoshop “Glass Text” Tutorial. You are curious aren’t you ? Dig for it to find out (more…)
Posted on December 25, 2006 - by Khaled
Photoshop “Glass Text” Tutorial
As I have announced it before, I am going to be posting Photoshop tutorials on this blog. Some tutorials are old others are new and will be posted for the first time. So stay tuned!
Today I am going to start off with quite a simple tutorial that will show you how to achieve a glassy text effect .
This tutorial was made using Photoshop CS2 but can be achieved using older Photoshop versions. You can now add a cool effect to your text easily. Of course, and as usual, your feedback is more than welcome.
First of all I’ve created a new blank document That is 400×150, Then I have selected the text tool, I’ve set the font to “Gill Sans Ultra Bold”, the size to 60pt and the color to #d41385 (yeah that’s pink!!). Then I’ve typed in my text. Read on (more…)
Posted on December 5, 2006 - by Khaled
Photoshop Tutorials Series
Upon some demand from some friends and users I will start posting some of my old Adobe Photoshop tutorials here on this blog. I will also post new Photoshop tutorials soon. The Old tutorials were already published on Kyscorp, good-tutorials.com and SitePoint forums and many other Photoshop tutorials sites. I am gathering them again here. Most of them are for beginners. Stay tuned guys!
Posted on June 3, 2006 - by Khaled
Photoshop CS2 on MacBook Pro!
After installation I wanted to test them
they were really slow especially photoshop! and I am a patient kind of person!! Things that should take someting like 3 minutes take up to 5-6 minutes! so if you are gonna work for hours just imagine…
So Don’t get a MacBook Pro if you are a ‘Photoshoper’ until CS3 is here!
Photoshop runs in emulation using the Rosetta emulator technology and Adobe mentioned that intel native version of their CS will wait till the next version: CS3.
Photoshop CS3 will be probably released in the second quarter of 2007.
Posted on May 15, 2006 - by Khaled
Photoshop Smart Objects: are they that smart?
Well in fact this new Photoshop CS2 feature called ”Smart Object” can be a vector file imported into your Photoshop, but it also can be any cluster of raster or vector layers that are put together. This means that you will be able thanks to smart objects to group a logo layer and a text layer into one object: a smart object.
The layers that contain Smart Objects, like any other layer, can be styled, scaled, flipped, moved….. In my opinion, their main advantage is that while you edit them you won’t change the actual original files. That’s why they are considered to offer non destructive editing of files and this could be really helpful and time saving.
And of course Smart Object layers can be rasterized into plain PS layers.Also you may need to know that Smart Objects are rasterized when they are saved as Photoshop .eps. This is due to the fact that the linked file into a Smart Object will be embedded within it. This isn’t good in my opinion as .eps files are ‘encapsulated’ so they are only editable using the software that first created them.
So with Smart Objects you may think that you don’t have full control on your objects!
If you save your work as a Photoshop file it will retain the linked file and if you have a vector included in a SO you can edit it elsewhere and the Photoshop file will update it and display the editing you made.
The Smart Object text can’t be changed directly using Photoshop you can only style it, move it, scale it, skew it….but you are unable to edit what is written. You have to do that with illustrator save it and your PS file will update it showing the change you’ve made with illustrator.No layer Mask?
Photoshop CS2 is not allowing Smart Objects to be linked with a layer mask, yes this could be annoying to most of you! But here’s a fast trick to link a layer mask to smart objects!
let’s say that for instance you are working with a graphic where you have a Smart Object as the top Photoshop layer and a background made up by a photo. If you will try to link a mask to the Smart Object you will see that the layer mask icon is disabled.
So this could lead you into a painstaking process to move layers separately etc…
Well this is how I’ve learned to proceed:
- Create a new folder in the layers window (Window >> Layers)
- Add a mask to this newly created folder
- After you have to select the layer with the smart object and drag it into the layer that is above to move the Smart Object within the folder this way you will be able edit the folder’s mask instead of editing the layer mask of the Smart object and this will do the trick
This also allows you to transform and move the Smart Object thanks to the folder.
Editable vector type?
Another quick trick: if you need editable vector type set with Illustrator and pasted in Photoshop this is how you can do it:
- Write what you want in Illustrator CS2
- Copy the text you have written
- Jump to Photoshop, select your text tool and make a new text layer
- Paste your text in there
This generates editable text copied from Illustrator and pasted in Photoshop.
This trick is helpful to keep the vector data in while saving the file as a .eps from Photoshop
Smart Objects: Time savers?
Yes! I consider Photoshop Smart Objects as time savers. As I said before they are a non destructive editing method as it keeps the original files unchanged and updates automatically the embedded files if they are edited elsewhere…
In my opinion Smart Objects definitely allow bigger versatility for the images and graphics that are opened in Photoshop!
This is the way I learned to use them to work with the raw graphics files I want to tweak or adjust:
I open the Raw pic/image as a Smart Object then make adjustments with the adjustment layers in Photoshop then save this new layered file as .psd. This is useful to flip, wrap, scale, and add styles to the picture and still be able to double click on the thumbnail icon on the layer to change the camera raw options used to initially open that picture. Even more: with Layer >> Smart Objects >> Replace Contents you may select a new raw file that will take the place of the first picture without loosing the tweaks, changes and adjustments you’ve done with thae original Smart Object! This is, for me at least, a big time saver.
Different interpretations for a same file?
Yes this is possible! Smart Objects allow you to have different Interpretations for a same initial file! This is how it works: let’s suppose we have an image that has a part of it that is nicer/clearer with a set(#1) of camera raw settings, and the remaining parts of that pic look nicer/clearer with a set(#2) of camera raw settings. Here’s where Smart Objects are ‘magic’ for me the fan of Dark Art and photo manipulations!! This helped me with the creation of many CD covers for Hard Rock and metal bands!!!
Well just open the pic as a SO using one of sets settings (set#1 for instance) and after Layer >> Smart Objects >> New Smart Object Via Copy and this will produce a 2nd separate layer.
After that double click on the 2nd layer thumbnail icon and put in the settings for set#2 this will only change the latter layer without modifying the first Smart Object. This makes it easy to combine those two layers into 1 pic with Masking techniques…
As for editing/retouching a Smart Object layer just duplicate it (ctrl+j) then Layer >> Smart Objects >> Convert to Layer and apply a filter on it; retouch it etc…
Hope this quick tutorial/guide helps with Photoshop CS2 Smart Objects
Polls
Loading ...
