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…
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,
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:
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,
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…
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/
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:
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…
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.
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?
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.
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.
i made this new one as the most responsive by doing the following
brought the DIV ON TOP of everything else
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.
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??
