Jump to content


Photo

Designing Headers with light effects


  • Please log in to reply
19 replies to this topic

#1 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 05 October 2007 - 02:20 PM

Greetings guru, a new noob is here.
I remember the first time that i use fireworks. i find it soo easy to use that i couldnt resist to use it (My avatar is created with fireworks)
And now im trying to get a header done for a web site that im creating.
Any suggestions of how a header for a personal site must be? Im thinking of an image from the person's site (in my case a dancer) surrounding with a light effects. like a snake.This is my current header Posted Image feel free to tell me opinions/suggestions.
So my question is:
How i can create a light effect like this: Posted Image
Any good brush to suggest?
Also is there a font to create message in light or on fire? Although with a blur effect i think i can add manually the fire

Some other noob guestions:
Which is the best way to fill a transparent place with a certain colour?
Sometimes photoshop and fireworks stuck and i can see only a hand. why is that happening?

#2 Alan

Alan

    FireworksGuru

  • Root Admin
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,506 posts
  • Location:San Francisco, California USA
  • Interests:Longboarding, art and video games

Posted 05 October 2007 - 03:11 PM

Hey ExoSkeletor -

Sorry, I missed your post!

What version of Fireworks are you using where you only see the hand? Do you remember what you were doing when the hand showed up?

Not sure what you mean by filling in the transparent area. Brush fill via bitmap editing?

Your avatar is very cool. :)

I can think of a couple ways to achieve those flying strokes with a glow. Not sure how to describe in one shot though. :( Let me see if I can make a sample for ya.

#3 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 05 October 2007 - 04:27 PM

Im using Fireworks CS3. the problem with the hand is not often occured but when it happens i have to restart my pc. i have google it and i see its a memory problem of the adobe programs.
Filling the transparent i mean that i have an image that is the half size of the canvas for example and i want to fill the rest canvas with black colour :). Its very simple but i dont know how.
Thanx for the help, i would love to see a sample

Also how i can set transparency in a photo to begin from 0 for example and in the end of the photo to be 100

#4 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 720 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 05 October 2007 - 11:11 PM

hey there exo! welcome to fguru. That header with the lighting effects is possible in fireworks, although i cant recreate it entirely, but its just using paths with some soft glow, etc, repeating the process, maybe some bitmap brush effects ( smudging , color burn or color dodge ) , use of live filters like hue/saturation and curves. anyways heres my shot


eyefire.png

#5 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 05 October 2007 - 11:37 PM

Its perfect its perfect. Can i do that or its not for noobs? :)
Something more guys, how i can add reflection to my images?
Also i have create this with photoshop with the help of this tutorial http://www.tutorialwiz.com/fire_text/. How i can create it on fireworks? which of the 3 do you prefer?
Posted Image

#6 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 720 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 06 October 2007 - 05:21 AM

ahhh fire text, if you check the png gallery, i have made something similar to that , youll just have to convert the font to path to bitmap, apply the smudge brush , and try duplicating it, adding some layer effects.

Yes of course ! the eye is easy to make. Just try to make some nice looking curvy paths ( mine still needs a bit of tweaking ).

2.) its a good idea to play with the live filters, curves and hue saturation.

3.) use the dodge tool to highlight some of the parts, in the eye. or the burn tool to darken spots.

4.) try this neat effect of feathering the image, try drawing a selection, an oblong selection, feather it to 100 , the trick here is to make the edges smooth looking, like its fading away,on corners, try to use the selection and delete some areas, make it 10px lower to the deleted area, its a neat trick =)

#7 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 06 October 2007 - 06:06 AM

wait how i can make the paths? with the pen? dont forget im a noob :) can you tell exactly how you made yours? i dont care about the eye.. i only want the lines

#8 frgpugs

frgpugs

    FireworksFreak

  • Members
  • PipPip
  • 17 posts

Posted 06 October 2007 - 07:26 AM

im not really great with fireworks but to fill the rest of the canvas i just use the rectangle tool to make a new layer whatever color i want and arrange it to the back so that the image is on top of it. Not sure if theres a better way to do it but thats how i do it.

#9 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 06 October 2007 - 12:01 PM

im not really great with fireworks but to fill the rest of the canvas i just use the rectangle tool to make a new layer whatever color i want and arrange it to the back so that the image is on top of it. Not sure if theres a better way to do it but thats how i do it.


nice one thanx

#10 stompwampa

stompwampa

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 484 posts
  • Location:Minnesota

Posted 06 October 2007 - 04:26 PM

wait how i can make the paths? with the pen? dont forget im a noob :) can you tell exactly how you made yours? i dont care about the eye.. i only want the lines



Hey Exo -


Yes, the most effective way to make lines is with the pen tool. It is by far the most hated and the most loved tool of all designers. Hated because when you're new to using it, you'd much rather smash your computer in with a sledge hammer because it can be very frustrating....loved becasause....well, it's the pen tool! The gawd of all tools! Once you figure it out, you can do some very cool things!

There are some Pen Tool Tutorials around here somewhere....I'll see if I can dig them up...

#11 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 06 October 2007 - 07:11 PM

If i have understand correctly i have to draw some paths that are close to eatch other and then select them all and add some filters?
blue2x if you have the .png of your eye i would want that please

#12 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 720 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 06 October 2007 - 07:46 PM

download that eye file, its already a png, but the paths, those glowing things have been converted to bitmaps

#13 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 08 October 2007 - 04:45 AM

Guys how i can make the backround of this image black? im trying to use teh magic wand tool but it leaves a white line all over it

#14 stompwampa

stompwampa

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 484 posts
  • Location:Minnesota

Posted 08 October 2007 - 09:27 AM

post your example....

#15 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 08 October 2007 - 03:56 PM

oups sorry. i was sure that i have upload it. :)
And this is my final header, with your help i manage to make the lines i want. Do you guys find the fire in the right too big? (when you are saving jpg's for the web, what percentage in quality did you use?)

Attached Images

  • 500855_91884917.jpg
  • goguaHeader4final.jpg


#16 frgpugs

frgpugs

    FireworksFreak

  • Members
  • PipPip
  • 17 posts

Posted 08 October 2007 - 04:04 PM

Guys how i can make the backround of this image black? im trying to use teh magic wand tool but it leaves a white line all over it


I dont get it. If you want to make the background black just change the color to black instead of white in the color selection. FW8 its on the bottom left where theres 2 boxes. The bottom box is what changes the background color. Im not sure if its exactly the same in FW CS3 but I would assume its in the same spot

#17 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 08 October 2007 - 04:32 PM

I havent create the image so there isnt any backround. i have download it from the net

#18 Alan

Alan

    FireworksGuru

  • Root Admin
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,506 posts
  • Location:San Francisco, California USA
  • Interests:Longboarding, art and video games

Posted 08 October 2007 - 05:07 PM

I havent create the image so there isnt any backround. i have download it from the net


Hey Exo -

Thats looking cool. I see what you mean by the fire being too much on the right. You should extend that flare across to the right side and beyond. It would give a sense of speed rather than getting all bundled up there in space.

In terms of JPG quality it depends on the colors in my opinion. With a lot of black you could get away with a lower compression just depends. 85 is typical for me. I also use the selective JPG compression to yield even smaller JPGs that compress very small.

#19 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 08 October 2007 - 06:37 PM

Hey those light streams are looking quite good!

About the fire stuff on the right, you could try cloning little pieces around the light streams so they have wisps too, so it's not such a sudden transition from pretty solid light trails to wispy smokey effects.

Not sure if you ever managed to get the background of that image black, so you can check out the attached Fireworks PNG. It contains two methods, in both cases just added a few Live Effects:

1) Invert + Hue/Saturation = black background, same red smoke
2) Other->Convert to Alpha + Adjust Color->Color Fill + Curves = transparent background

Attached Images

  • smoke.invert.fw.png


#20 Exoskeletor

Exoskeletor

    Fireworker

  • Members
  • PipPipPip
  • 39 posts

Posted 10 October 2007 - 10:10 AM

thanx for the photo