3 Replies Latest reply on Feb 24, 2011 3:32 PM by Linda Nicholls

    Creating graphics like on Apple's site?

    StanWelks Level 1

      I want to create graphics similar to the look-and-feel of the attached graphic. I made a square and have the roundness set at 8. What else is being done to create the look of depth with it? How is this style of gradient made? How is the shine on the top of the graphic made?

       

      Thanks.Screen shot 2011-02-23 at 6.19.30 PM.png

        • 1. Re: Creating graphics like on Apple's site?
          Linda Nicholls Level 4

          I think this is pretty similar. If you open it in Fireworks you can see how it was done and save it as a style.

           

           

          ApplePanel.png

          1 person found this helpful
          • 2. Re: Creating graphics like on Apple's site?
            StanWelks Level 1

            Thanks for doing this. I see how you added the gradients, and now I want to try to do it myself from scratch. I open the original Apple graphic in a new FW document and create a new shape that I want to take on the same look-and-feel of. I try sampling different colors of the image with a linear gradient, though it is not coming out right.

             

            1. What is your approach when looking at a graphic like this to know how many points to add for the gradient?

            2. Where do you choose to sample your colors from on the Apple graphic?

             

            Thanks.

            • 3. Re: Creating graphics like on Apple's site?
              Linda Nicholls Level 4

              Sample the darkest color first, and then the lightest one at the bottom. Slide the color chips in the gardient editor back and forth until the balance of the two colors looks right. Where there's a highlight at one end of the gradient, as there is in this example, add a color chip where the highlight should be (in this case, next to the dark chip) and nudge it until you get the look you want. As for other types of gradients, sample wherever there is a change of color.