[Pro] looking for photoshop advice for FW background

Hi,
if someone has time and knowledge, can you please help direct me to this small task.

I already have a .png that is a glowing white line with black.
I have it as my background and it stretches across the top completely and fills the entire page above and below it black because I have these settings:

horiz:tile
vetical:top

here it is to see.

What I want to learn to do, is use this exact graphic, but now NOT fill the entire page with the black, but only go down 770pxls or so.

here is the look I am shooting for…

http://directmailmac.com/

When I currently open my .png in photoshop the dimensions are
2000pxls wide and 167 high. I think this.png was made in FW and then I exported it if I remember,

Thanks for any help in what to do.

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry, I think the way to do it would be:

In Photoshop or similar set up a document 170px (or whatever the height you want your black to be) high, by 20-25px wide, draw your horizontal white line on here 100px (or wherever you want it) from the top. save as a gif or jpeg, can’t remember which.
Use this as your background image with the horizontal/vertical settings you have, and while nothing is selected on the page, choose white (or a pale grey) as your background colour.

I think!!

Trev

On 12 Jul 2012, at 14:18, Barry Hoffman wrote:

Hi,
if someone has time and knowledge, can you please help direct me to this small task.

I already have a .png that is a glowing white line with black.
I have it as my background and it stretches across the top completely and fills the entire page above and below it black because I have these settings:

horiz:tile
vetical:top

here it is to see.

http://hoffkids.com/

What I want to learn to do, is use this exact graphic, but now NOT fill the entire page with the black, but only go down 770pxls or so.

here is the look I am shooting for…

http://directmailmac.com/

When I currently open my .png in photoshop the dimensions are
2000pxls wide and 167 high. I think this.png was made in FW and then I exported it if I remember,

Thanks for any help in what to do.

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

thanks for writing in!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

i got it!!!

thanks!!!

http://hoffkids.com/test.html

now i would love to learn how to get the black to look textured like this background…

would love any PS tips…

Barry


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Experiment with Filter/Noise/Add Noise, followed by blur or any of the painterly or brushstroke filters. Take it very easy on the noise, a little goes a long way when building a texture. I take advantage of the multi-stage undo in Photoshop, particularly the non-linear undo in the most recent versions, and if you experiment a lot, you can find combinations to build anything. I made a very convincing cork texture years ago (Photoshop 2.5 was the current version) with nothing but noise and a few other filters that became the base for a hyper-realistic illustration for a newspaper ad.

Walter

On Jul 12, 2012, at 10:17 AM, Barry Hoffman wrote:

now i would love to learn how to get the black to look textured like this background…

would love any PS tips…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Another option would be to set an html item box behind the other page
elements and fix it in the window. Then you can set the height and color
and background-image to suit your taste. I am working on something similar
here: http://portfolio.thebigerns.com/

Here are the freeway setting I used to stretch the top box:
http://cssway.thebigerns.com/workbench/du_jour/black_bar.png

This has the benefit of better control over appearance in situations where
graphics don’t load. Also, if you choose to change the height for whatever
reason, you don’t have to count pixels. You can also add a stroke to the
bottom edge to create a fancier look. Tiling a background texture in this
div is easer to accomplish graphically than, again, counting pixels.


Ernie Simpson

On Thu, Jul 12, 2012 at 9:31 AM, Barry Hoffman email@hidden wrote:

thanks for writing in!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And if you do go this route, just make sure that the edges are tileable and you don’t get a horrible vertical stripe.

I know there’s a a ‘Carry On…’ joke in there somewhere!
Trev

On 12 Jul 2012, at 15:22, Walter Lee Davis wrote:

Experiment with Filter/Noise/Add Noise, followed by blur or any of the painterly or brushstroke filters. Take it very easy on the noise, a little goes a long way when building a texture. I take advantage of the multi-stage undo in Photoshop, particularly the non-linear undo in the most recent versions, and if you experiment a lot, you can find combinations to build anything. I made a very convincing cork texture years ago (Photoshop 2.5 was the current version) with nothing but noise and a few other filters that became the base for a hyper-realistic illustration for a newspaper ad.

Walter

On Jul 12, 2012, at 10:17 AM, Barry Hoffman wrote:

now i would love to learn how to get the black to look textured like this background…

would love any PS tips…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks guys. taking it all in today.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The trick for this is to use Filter / Other / Offset. Enter some positive number of pixels that’s near half the width/height of the element you want to tile. You should see a hard line (if there’s a problem) in the middle of the image. Use the cloning tools to remove it, then run the filter again and see if a new one appears. Repeat until the pattern is seamless. Long ago, when Adobe had a Web-specific photo tool (what was that called?) it had a filter that would create a seamless tile out of any image you sampled. Has that ever made it back into Photoshop? I haven’t found it if it did.

Walter

On Jul 12, 2012, at 10:34 AM, Trevor Reaveley wrote:

And if you do go this route, just make sure that the edges are tileable and you don’t get a horrible vertical stripe.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walt,

this “other thing” does not seem to be working exactly for me- I followed your directions. maybe cannot be accomplished in FW?

your directions…
http://www.freewaytalk.net/thread/view/73220

trying to do…
http://www.inclind.com/about/index.htm

then check out mine below the smartboard. cannot get it when I mouseover to go UP, then when pull mouse away go down. seems to get all mixed up

http://hoffkids.com/test.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

wow texture is somewhat involved. now i understand why these guys get nice $$.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, I see that problem here as well. I think the key is to add one more box to the mix. Imagine a layer cake like this:

   ----caption html box----
   ---------photo----------
-------------div--------------

The bottom layer is an empty HTML box, the photo is stacked above that (and is smaller in both dimensions, so the lower DIV pokes out around the edges) and above the photo is your caption box. Now you would apply the Transition FX to the photo, and set it to cause the caption box to slide down on rollover. Next, you would apply another Transition FX to the lower DIV, and set it to slide up the caption box on rollover. The idea is that the photo would “capture” the mouseover event and cause the caption to slide down, and only after the mouse moved outside of the bounds of the photo would the mouseover event be captured by the lower DIV, causing the caption to slide back up. Imagine it as a fence around the photo, and make sure it is about 12px wider and taller than the photo, so there’s enough of a barrier to catch a fast-moving mouse.

Walter

On Jul 12, 2012, at 10:43 AM, Barry Hoffman wrote:

Walt,

this “other thing” does not seem to be working exactly for me- I followed your directions. maybe cannot be accomplished in FW?

your directions…
[Pro] Cool rollover effect. Can this be done, or mocked, in Freeway? | FreewayTalk | FreewayTalk

trying to do…
http://www.inclind.com/about/index.htm

then check out mine below the smartboard. cannot get it when I mouseover to go UP, then when pull mouse away go down. seems to get all mixed up

http://hoffkids.com/test.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

will give it a shot now.

I hate to ask this and show my amature status, but what is DIV short for?

:slight_smile:

thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Barry Hoffman wrote:

I hate to ask this and show my amature status, but what is DIV short for?

Division.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walt,

tried your new and improved method.
-should the TOGGLE be checked on both transitions? (they are currently)
-should the “initially hidden” be checked for both? (they are currently)
-the HTML box with text has no transition on it now.

here is the new one.

http://hoffkids.com/test.html

better but quirky?

If I pull the mouse on and off quick it kinda goes off what it is supposed to do?

do the setting TIMES matter?
right now both transitons have:
DURATION=1
delay=0

getting there

:slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Set the initially hidden only on the Transition FX applied to the photo. Leave the other one alone. I don’t see any difference between toggle and not, but try it in various combinations to see if it changes anything for you.

It’s a shame that there isn’t a picker option in TransitionFX to add an effect on mouseout. Also, there’s a very useful new option in Prototype 1.7 (Freeway 5.6.4 and better) that is less twitchy in general – the events are mouseenter and mouseleave – and they have the dubious distinction of both being invented by Microsoft and also being less annoying than the W3C standard events mouseover and mouseout.

Walter

On Jul 12, 2012, at 12:11 PM, Barry Hoffman wrote:

Walt,

tried your new and improved method.
-should the TOGGLE be checked on both transitions? (they are currently)
-should the “initially hidden” be checked for both? (they are currently)
-the HTML box with text has no transition on it now.

here is the new one.

http://hoffkids.com/test.html

better but quirky?

If I pull the mouse on and off quick it kinda goes off what it is supposed to do?

do the setting TIMES matter?
right now both transitons have:
DURATION=1
delay=0

getting there

:slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

gotcha- will roll with this and see if I can get it pro looking.

appreciate it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walt,

i made this new one as the most responsive by doing the following

  1. brought the DIV ON TOP of everything else
  2. made the DIV box the same size as other two.

The problem now is when you mouse over the picture it comes down pretty nicely, but in order to get it to move up, you have to go off the picture and back.

in other words mousing OVER the picture is what is making it go up and down.

http://hoffkids.com/test.html

maybe a 4th box needed?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Earnie,

Did you do those white glowing rollover boxes in Freeway??

http://portfolio.thebigerns.com/

please tell

thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Beary,

Yes those were done entirely in Freeway Pro using the Style Editor. The
whole site so far is generated completely by FWP.

I used a CSS3 attribute called “box-shadow” and applied it to the hover
state of the menu link anchor. You can find it in the stylesheet under the
style* .MENUlist li a:hover *…which is CSS code for “hover state of the
anchor tag located in the list item of a list within an element styled with
the class style .MENUlist”.

I would love to restart my blog and teach users how to really get the most
out of CSS in Freeway Pro, but I do not currently have the resources to do
that.


Ernie Simpson

On Thu, Jul 12, 2012 at 4:32 PM, Barry Hoffman email@hidden wrote:

Earnie,

Did you do those white glowing rollover boxes in Freeway??

http://portfolio.thebigerns.com/

please tell

thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options