6 Replies Latest reply on Feb 2, 2009 7:23 PM by quality11

    Which brush stroke?

    quality11 Level 1
      Do you know which brush stroke in FW matches the brush stroke on this logo? It was created in Illustrator. I've tried the Charcoal > Soft and similar in FW, but they just don't do it.

      I ended up copying the stroke from the Illustrator file, pasting it into the png file and stringing it together, but it looks terrbile.

      ANY comments to make this site look better are most welcome! Something just doesn't work.....

      Thanks much in advance!
        • 1. Re: Which brush stroke?
          pixlor Level 4
          Oh, my. It looks like a tic-tac-toe board.

          Hmm...

          The problem is that the four lines have too much optical weight for the page. They dominate.

          I think you need to scale back your use of the charcoal stroke. Use color blocks to separate the header from the navigation and content sections (use two or three lighter versions of the yellow in the middle block, maybe?) and only use the stroke as a decorative element rather than as a major divider.


          • 2. Which brush stroke?
            quality11 Level 1
            Thanks so much for your feedback. ANY more suggestions are more than welcome. I'm not sure how to make a color lighter, believe it or not. As you can tell, I'm a newbie. I checked colorpicker.com and a color scheme website and tried that (went darker too). Is that how you would lighten (or darken) a color or is there an easier method in FW?

            Let me know if this is what you meant by color blocks. I know the colors and shapes don't work but just examples. Let me know what you think would work (erghhh...so frustrating)! I also changed the strokes, nav bar location, page layout. Let me know your thoughts (you can tell me it's terrible or worse too please)!

            Also, do you know how to make a staging area transparent like this site or how to make an image a black and white watermark in the background or should I post that separately?

            Thanks Lorraine!
            • 3. Which brush stroke?
              pixlor Level 4
              quote:

              Originally posted by: quality11
              Thanks so much for your feedback. ANY more suggestions are more than welcome. I'm not sure how to make a color lighter, believe it or not. As you can tell, I'm a newbie. I checked colorpicker.com and a color scheme website and tried that (went darker too). Is that how you would lighten (or darken) a color or is there an easier method in FW?

              Let me know if this is what you meant by color blocks. I know the colors and shapes don't work but just examples. Let me know what you think would work (erghhh...so frustrating)! I also changed the strokes, nav bar location, page layout. Let me know your thoughts (you can tell me it's terrible or worse too please)!

              Also, do you know how to make a staging area transparent like this site or how to make an image a black and white watermark in the background or should I post that separately?

              Thanks Lorraine!



              Okay! Here's how to lighten or darken a color in FW: colors.png
              Select your object, click its color swatch, click the colored circle, then use the slider to select a tint or shade. (Or any other control to change the color entirely.)

              By color blocks, I meant something more like this: home2.png and getting rid of the sketch lines all together. Note that the 1-pixel border lines will need to be created as images, and that will make the design more complex. In the header, I recommend keeping the logo intact (I kludged it a bit there) and maybe adding a photomontage on the right hand side or something.

              Also, here are a couple of ideas to make creating your design easier: Set your canvas color to your red, instead of using a red rectangle. Put logicical sections of the design on separate layers so that they're easier to find the elements and work with just those pieces.

              The transparent area on the William Jackson site is done with CSS.

              Since you say you're a newbie, I have to ask if you think that you will use Fireworks to produce the site or do you have an HTML editing program or someone who can write HTML for you? Fireworks makes designs, but it does not make sites. Not ones that don't break at the drop of a hat, anyway.

              Here's my list of recommended resources...
              Here's a book I like:
              HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro
              It covers everything in small chunks and is light enough to carry around and read.

              Some tutorials:
              HTML Code Tutorial
              W3Schools
              This one has a friendly tone, although it has lots of ads: Page Tutor
              The CSS Tutorial

              Also, check out the site recommendations by Silkrooster here:
              A question about using Fireworks to build a website


              • 4. Re: Which brush stroke?
                quality11 Level 1
                Thanks Lorraine!

                Oh....I've used the color thing before. Dah. For some reason, I was thinking I should know what hex number/letter to change.

                I see what you mean.....and I appreciate the info about the strokes making coding more difficult. Now, in terms of "Put logicical sections of the design on separate layers so that they're easier to find the elements and work with just those pieces.". Do you mean like this(someone created this for me)? Image is from PSD file but the idea is that it's organized so you can click the arrow and see what's in that "layer". I looked it up in FW, but what I read was that I have to flatter them first. I didn't think I was reading the right thing, so I gave up. How do you do that organizing layer thing?

                I actually use DW or hand code. Sometimes I hire third parties to do the css coding especially when it's a bit more challenging. Designing is new.

                Great resources. Thanks!
                • 5. Re: Which brush stroke?
                  pixlor Level 4
                  quote:

                  Originally posted by: quality11
                  ...
                  I see what you mean.....and I appreciate the info about the strokes making coding more difficult. Now, in terms of "Put logicical sections of the design on separate layers so that they're easier to find the elements and work with just those pieces.". Do you mean like this(someone created this for me)? Image is from PSD file but the idea is that it's organized so you can click the arrow and see what's in that "layer". I looked it up in FW, but what I read was that I have to flatter them first. I didn't think I was reading the right thing, so I gave up. How do you do that organizing layer thing?

                  First, you're welcome!

                  Yes, that layer thing is exactly what I mean. Fireworks has a Layers palette. If yours isn't visible, Select Window>Layers, which will toggle it on (or off). At the bottom of the palette are two icons that look like folders. If you hover over them, you'll see the tool top for what they are. The first is New/Duplicate Layer. If you click that, you'll get a new layer. You can double-click a layer to change its name. You can drag objects from one layer to another. If you download the home2.png file I put on drop.io, you'll see that I added a bunch of layers and did some organizing.

                  In my CS3, the relevant help is under "Pages, Layers, Masking, and Blending," then "Working with layers." Just search for "layers."

                  quote:

                  I actually use DW or hand code. Sometimes I hire third parties to do the css coding especially when it's a bit more challenging. Designing is new.

                  Ah...okay. That's great! Here's the thing about using FW to export HTML, then: it'll do it, but you get a hard-coded table that breaks the minute you try changing any of the content of a cell. Any object that FW names (image, table cell, CSS class) will have a horrible long name that makes things difficult to maintain. What's generally considered a good workflow is to use FW to get an idea of what you want, slice your design to produce the images you need, then build that design in DW or another product using the exported images.

                  (Since I build in DW, I have never really used the FW HTML. I've just seen it from people asking for help with it here. It's ugly.)

                  • 6. Re: Which brush stroke?
                    quality11 Level 1
                    Great info, Lorraine. Thanks.

                    I'll give the layering a try and get back to you if I need help.

                    Thanks so much again!