Brandmark Tutorial

13 02 2006

On a moviesite, my eye felt (surprisingly) on this poster for an new movie: “This film is not yet rated”.

this_film_is_not_yet_rated.jpg

I thougt: “Nice Photoshop. Let’s try to do this myself.”

And so I did. This is what I came up with:

brandmerk5.jpg

Of course, I wrote a “making of”. Read on:

The working process consists of three phases: first we make the mark, then the smoke and then we throw everything together and apply the special effects.

Start the Photoshopmachine!

A: The Mark.

1. Open a new file, size 250 x 130, on a transparent background.

bm0.gif

Fill (“G”) the area with a red color (I used A11D21).

2. Ctrl-A to select all, then click select>modify>contract and set this to 10 pixels.
Now you have a smaller selection, hit “delete” so you have a red 10-pixel border.

bm1.gif

3. In the same red color, type your text. I wrote PHOTO-SHOP with this font settings:font: Arial Black

size: 60
horizontal spacing: -50
vertical spacing: 50

bm2.gif

4. In the main menu, choose layer>merge visible to combine the border and the text into one, editable layer.

bm3.gif

    B: The Smoke.

    1. Leave the mark-file open and open another one, dimensions 1000 x 1000.
    Press “D” to reset the foreground and background colors to black and white.

    2. Apply the filter>render>clouds to generate some clouds (if you don’t like the random result, press ctrl-F to apply the filter again and get another one).

    bm9.jpg

    3. Now we have white clouds on a black background; we want to get rid of these black areas. Therefore, click select>color range in the main menu. When you get the settings popup, click on a black area with the eyedropper and set the fuzziness to 141.

    bm10.gif

    4. Go in Quick Mask-mode (”Q”).

    bm13.gif

    Apply the filter>blur>Gaussian blur with value 5,0.
    Return to normal mode and hit delete. Ctrl-D to deselect.
    If everything went fine, you should now have white clouds only.

    C. The Assembling.

    1. Open your model picture.

    2. Start by dragging the mark into the picture. Using ctrl-T or edit>transform>free transform and edit>transform>rotate to adjust the size and angle until it looks right to you.

    bm4.jpg

    3. At this moment, the brand is to straight, so it seems to floate. That’s because it doesn’t follow the curves of our model. Therefore, apply filter>distort>wave and fill in these values:

    number of generators: 1
    wavelength: 122 – 551
    amplitude: 5 – 35
    scale: 100% - 100%

    bm5.gif

    (Other settings might work as well; you can experiment with the distort filters pinch and spherize too.)
    bm6.jpg

    4. Apply the filter>Gaussian blur> 1,5 and then set the blending mode to “color burn”.
    Duplicate the layer, place it underneath the original mark-layer, and apply filter>blur>Gaussian blur> 10 on it (blending mode of this layer copy is still set to color burn).

    bm7.gif

    bm8.jpg

    This should be enough for the mark. On to the smoke …

    5. Throw in the smoke-layer (drag from the apart Photoshop-file).
    Adjust the size with the free transform tool (ctrl-T) and then apply a layer mask.

    bm14.gif

    As you know, brushing with black in a layer mask erases, white recalls. Now brush the edges away with a soft brush and a low opacity (about 20%), as well as unnessary (or unreal looking) parts.

    6. Set the blending mode of the smoke layer to “screen”.

    7. Finishing touch: on a new layer, paint some white lines with a soft brush from the border to the smoke and then apply a gaussian blur (5) on this layer. Again, set the blending mode to screen.

    bm11.jpg

    This is my finished result:

    brandmerk5.jpg

    If you enjoyed this tutorial, please Digg it!

Bookmark and Share

Previous articles:

The real Photoshop Wizard.
Did you know there's a Photoshop Wizard hidden in the Photoshop Program? It's a so-called "Easter...
Gallery.
...

105 responses to “Brandmark Tutorial”

16 02 2006
James (08:23:53) :

Nice work, I love it. The smoke effect is good.

16 02 2006
sarah (11:41:10) :

i dont know how to work this thing.
HELP!!!!

16 02 2006
Jack (14:42:04) :

It would been better WITHOUT the smoke.
But otherwise, nice work:)

16 02 2006
Koista (15:28:18) :

Oh, really nice idea!! 10\10!

16 02 2006
davey (17:24:25) :

I like the tut but the smoke looks really fake. srry to say.. rest is perfect except for you could make some red skin round the mark using eleticol marque tool and just make it darken the skin in dark red..

16 02 2006
Mg Aung Phyp Tun (17:24:35) :

All maner taught is clear. But smoking effect is refused.

16 02 2006
Keri Lee (18:30:03) :

I Love this idea…Interesting smoke effect!

16 02 2006
G. Eren (18:30:24) :

Realy nice idea, I love it…

16 02 2006
Snoopy (20:13:08) :

Very nice tutorial

16 02 2006
PhotoshopGirl (21:46:59) :

Great Tut !!! :D

16 02 2006
Mirage (22:57:13) :

Pretty good, but I think there should be less smoke…
Anyway its good

17 02 2006
jayef (15:17:20) :

i have problem with doing it, i can’t click select - modify - contract, pls someone help send info at jayef@abv.bg

17 02 2006
Entityx (17:34:57) :

Wah this is a great tutorial, thanks for publishing it

17 02 2006
[GEEKS ARE SEXY] Tech. News (20:55:13) :

Love the effect :) Digg.

You should be removing the popups, they are annoying

Kiltak
[Geeks Are Sexy] Tech. News

17 02 2006
Paul-Serge (21:19:43) :

@Kiltak: Do you see pop-ups? Hm, must be from that irritating NedStat - I was using another statistics program but that was using too much CPU, so I’m right now in search of a better - preferably free - statistics program, without popups.
Please note that I don’t earn any money with these popups :)

BTW: In Firefox, I see nothing ..
Get Firefox! :)

Update: In the meanwhile I’ve installed a SiteMeter-counter. I will be examining the results from both counter systems for a few days, and if the sitemeter results are valuable, the NedStat counter (and popup) will dissapear.

17 02 2006
[GEEKS ARE SEXY] Tech. News (22:26:47) :

Yeah, I think it was from your other counter. I also use SiteMeter, and it’s great… You’ll see, looking at your traffic 24 hours after having a story published on DIGG is very interesting.. I had 4 stories published on there, and the best one brought me around 30000 hits.. Not bad :)

Good thing that your switched, the DIGG crowd isn’t very tolerent of popups.. LoL.

Kiltak
[Geeks Are Sexy] Tech. News

17 02 2006
wowCoolEffect! (22:49:25) :

GOD DAMN POPUPS

17 02 2006
techtakeover.com - Blog » Brandmarks on Human Body (in Photoshop) (22:49:48) :

[…] read more | digg story […]

17 02 2006
sosuke (22:50:11) :

http://www.deviantart.com/deviation/22206267/
ya’ll might find that one interesting then, I made that for quakecon2005 while i was at the convention for my friends 24″ dell widescreen

-sosuke

17 02 2006
James Carlos (22:50:31) :

looks great! can’t wait to try it out….

James

17 02 2006
Paul-Serge (23:33:32) :

@Sosuke: Nice one :)

18 02 2006
sosuke (00:29:08) :

I was just amazed we used different paths and ended up with similar results, great tutorial, getting branded / tattooed this was is much less painful than the real deal, and you get to see what you will look like with a goofy tattoo :)

18 02 2006
Daniel (00:36:44) :

..should have made a displacement map, would have made the effect much more realistic. also, the steam/smoke is too strong.

18 02 2006
Al rojo vivo con Photoshop | Sólo otro blog infame (01:12:58) :

[…] Buen tutorial para Adobe Photoshop que nos enseña a simular una marca de fuego sobre piel humana. […]

18 02 2006
Neil (02:46:14) :

The tattoo is good. The smoke looks like crap and masks the tattoo :(

18 02 2006
Ivan Minic (03:57:39) :

What a cool tutorial!

18 02 2006
ect0 (03:59:23) :

the smoke is a little too heavy and slightly generic, but the overall is nicely done and high quality. thanks for the tip!

18 02 2006
LinuxGuy (04:21:10) :

“fell (surprisingly) on this poster” lol

18 02 2006
donal (05:46:19) :

cool! there shouldn’t be drops of perspiration on the newly-branded skin.

18 02 2006
Rain City Geek » links for 2006-02-18 (13:20:01) :

[…] Photoshopblog.net » Brandmark Tutorial (tags: Photoshop) […]

18 02 2006
carl (16:25:58) :

Nice work.

18 02 2006
carl (16:26:54) :

I have some free photoshop brushes over at my site you might be interested in. I made them myself. once again nice tut.

18 02 2006
Digger Parsons (18:44:11) :

Photoshop. One word.

18 02 2006
SIXFACE » Blog Archive » links for 2006-02-18 (20:23:49) :

[…] Photoshopblog.net » Brandmark Tutorial (tags: photography tutorial) […]

18 02 2006
patricia de miranda (21:00:32) :

wonderfull ; ))

19 02 2006
Erik Hellengren (00:35:03) :

AWSOME DUDE :P

19 02 2006
Peter Cooper (04:20:28) :

Tell me I’m dreaming, but I was at the newsagents today flicking through a special edition of Computer Arts magazine and I swear I saw something exactly like this. I think it was a different technique, but the whole look (a branded stamp on a body) was the same.

19 02 2006
Cheyne (09:11:56) :

Very nice effect.
www.thewebdesignblog.com

19 02 2006
sam (15:26:56) :

the contract part dont work but i got around that and the smoke could be done without but otherwise it is good woop

20 02 2006
Santhosh Dot Net » Blog Archive » links for 2006-02-18 (11:34:30) :

[…] Photoshopblog.net » Brandmark Tutorial (tags: photography tutorial) […]

23 02 2006
Up Your Ego » links for 2006-02-23 (20:18:12) :

[…] Brandmark Tutorial This is a brilliant step by step guide to creating a branded effect in photoshop - brand your friend forehead or arm without actually hurting them. (tags: branding photoshop technology design interface) […]

25 02 2006
Anders (16:06:32) :

I have troubles making the red boarder. When I have hit ctrl+A I get the area selected but then when I’m going to do the “select>modify>contract” I don’t get a smaller selection. What must I do do make it work? Please help!

Thanks!

26 02 2006
mike (03:33:16) :

what were you doing on taht site anyways?

lol j/k ;-)

26 02 2006
Svidy (21:05:54) :

nice tutorial! and easy - perfect..

26 02 2006
bryan (21:35:42) :

Border:

Fill the square with your color

then

shift + ctrl+i to select inverse

select - modify - contract - delete

28 02 2006
Anders (20:45:06) :

Okey, thanks!
Does anyone know were to find a picture like the one that the maker och this tutorial used?

11 03 2006
BALLER619 (22:37:08) :

Probably lower the opacity of the steam to lighten it up, I think it would look better.

1 04 2006
arron (15:06:04) :

What settings do you need for the page when trying to apply the smoke render? I do as the tutorials says, create a 1000 x1000 page, but it wont let me select the clouds option from render, any ideas?

29 04 2006
jhendriana (07:39:35) :

great tuts man…!

6 05 2006
temnotak (18:46:00) :

May we exchange links with your site?

15 05 2006
Asfaltkonijn » Digg.com frontpage. (09:11:05) :

[…] -Photoshop in combinatie met funcioneel naakt (zie hier). -Lijstjes/Overzichtjes en tegelijk fulmineren op een andere grote Tech-site. […]

16 05 2006
Dudun (02:05:08) :

Havin a hard time getting the smoke to look right. It just looks like a blur.

31 05 2006
Dudun (21:30:08) :

If you’re having a hard time, select your blank space, hit CTRL-A then edit, stroke, add 10 stroke with dark red.

BTW: got the smoke problem fixed.

28 06 2006
Wise (19:11:47) :

superb tutorial man, i’ve used it on my clan site in conjunction with a raw meat tut i saw so its branded flesh :D

5 07 2006
jonas ! (18:48:29) :

oh yeah!!:D:D:D that was realley amazing ! keep it up ! I want some more ! ;D ;P

23 09 2006
patrik (22:58:32) :

did I block in a part of the lesson because I don’t understand many the English and I have a French version of the “PHOTODHOP” be this-that you are able to send me the french version of this lesson?? plzzzzzzzzzzzzzzzzzzzzzzz

9 11 2006
kwng (04:27:56) :

I cant figure out this ….. plz help!!!!!

Fill (“G”) the area with a red color (I used A11D21).

19 02 2007
bethan (20:11:43) :

where are the blending options and the ‘drag and drop’ from each file to file doesn’t seem to work. Also when creating the box in the beginning how do you keep the box - layer 1 and the txt layer together? I think you could be more descriptive.

27 03 2007
used club car part (17:36:57) :

used club car part…

Intresting information about used club car part….

31 03 2007
virgin sex (04:07:09) :

virgin sex…

Relevant links for virgin sex….

24 04 2007
japanese pussy (16:58:01) :

japanese pussy…

japanese pussy author…

29 04 2007
Svfgrso (16:05:07) :

Free Ringtones
[url=https://helpdesk.shorter.edu/bugzilla/attachment.cgi?id=6]Free Ringtones[/url]

4 05 2007
Asero (18:01:24) :

Hello piople
phentermine online
bay piople bugaga

4 06 2007
Damn (16:06:29) :

4 06 2007
Nelly (16:38:40) :

5 07 2007
Bukjykkk (06:47:39) :

very interesting
breast augmentation atlanta breast augmentation philadelphia

25 08 2007
freepornocliopsr (05:45:12) :

Yes!
I like it!

29 08 2007
Xoceuala (02:33:02) :

Thank you for your site.
alaska alaska fishing+ king salmon

8 09 2007
Pesyjbob (04:11:42) :

search big sausage pizza
search big sausage pizza

19 09 2007
AppleGeeks 3.0 (18:20:54) :

[…] Photoshop is getting a new logo? Personally I don’t like it. The logo reminds me of something…. wait I know… […]

21 09 2007
Branding - Graphic Design Forum and Web Design Forum (08:13:36) :

[…] Branding Photoshopblog.net Brandmark Tutorial __________________ Harry Roberts Design | The Web Team […]

5 10 2007
Lowuaxox (01:53:39) :

big sausage pizza with asian
big sausage pizza with asian

6 10 2007
Xuwqaxox (20:16:59) :

against car complaint enterprise filed rent
against car complaint enterprise filed rent

15 10 2007
Rjcuexox (03:25:01) :

crash diet fast loss weight
crash diet fast loss weight

19 10 2007
Xjhyqxox (21:30:50) :

best diet fast lose weight
best diet fast lose weight

23 10 2007
Mac Wilkins (13:05:08) :

It could be better with less smoke and a larger or more zoomed in focus on the brand sizzle. But for starters and explaination, this is smashing.

7 11 2007
New Photoshop logo | General | photoshop technique (08:49:08) :

[…] It would be under understatement to say I don’t like the new logo (I think they’re trying a little to hard to be ‘trendy’), but I am honoured John Nack referenced my article about ‘Photoshop branding’ […]

7 11 2007
New Photoshop logo | General | photoshop technique (08:49:08) :

[…] It would be under understatement to say I don’t like the new logo (I think they’re trying a little to hard to be ‘trendy’), but I am honoured John Nack referenced my article about ‘Photoshop branding’ […]

10 11 2007
XeliAggg (01:11:04) :

alamo car rental
alamo car rental

18 11 2007
XevyAkok (09:48:28) :

19 11 2007
MjgUqkok (20:03:24) :

gtyuhbgdfdes

25 11 2007
HiNeykok (16:55:10) :

holiday
holiday

25 11 2007
SypOekok (18:52:26) :

adult
adult

26 11 2007
RqCAikok (09:30:01) :

art
art

26 11 2007
WevjOkok (10:47:06) :

holiday
holiday

28 11 2007
VyljOkok (12:51:45) :

art
art

28 11 2007
FihUekok (13:47:53) :

holiday
holiday

28 11 2007
SOryikok (14:49:35) :

smell
smell

28 11 2007
XiNyAkok (21:08:16) :

smell
smell

29 11 2007
VyxAqkok (16:56:50) :

smell
smell

3 12 2007
Fegiykok (09:19:30) :

tsunami
tsunami

3 12 2007
Rihjykok (10:20:38) :

art
art

3 12 2007
PimUAkok (23:09:43) :

gtyuhbgdfdes
smell

4 12 2007
prescription phentermine shipped no (00:16:09) :

no phentermine still prescription no prescription phentermine us

5 12 2007
VirqOuon (17:22:24) :

b
b

7 12 2007
XelOAuon (02:59:28) :

l
l

8 12 2007
Gewqykok (15:46:14) :

adult
adult

8 12 2007
Cemyikok (17:13:01) :

smell
smell

9 12 2007
ReTyOggg (18:07:49) :

drug know maker need xanax
drug know maker need xanax

13 12 2007
Wigqjkok (11:10:44) :

smell
smell

14 12 2007
TelOqkok (20:52:14) :

casino
casino

21 12 2007
RqfyOkok (12:21:35) :

smell
smell

21 12 2007
MUDqAkok (13:16:24) :

art
art

5 01 2008
Asfaltkonijn » Blog Archive » Web Achievements (01:02:37) :

[…] Check. Zowel Digg, Delicious als Reddit. Diverse keren. En een artikel op de Digg frontpage krijgen equals 100 000 views op 24 uur tijd. […]

2 02 2008
serega (08:19:22) :

Leave a comment

You can use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>