The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Photoshop Bars

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #31837

    Chris as well as Orman Clark has many examples of these “bars” I’m talking about but have no idea how to create. Orman Clark’s PSD freebie, located at has the black, somewhat opaque bars slanted across the middle. How can these be made? I know Chris made them in CSS3 with gradients in his most recent project, but I would like to do it in PS.


    Are you talking about the whole progress bar effect, or just the background?

    Rounded rectangle shape with a gradient and light bottom stroke for depth, is all that’s creating the black background wherein the progress bar will grow.

    It’s called an “inset”, just to help you out with googling, if this is indeed what you were after.


    No, it’s the diagonal half opaque bars that go across the progress bar I’m after.


    A pretty simple way would be to make a line, put it a 45 degree angle, duplicate it, nudge it ov as far as you want, and repeat until its filled. Then delete what’s outside of the bar and lower opacity


    The way I would achieve this effect is to make a repeatable pattern. Make your diagonal bar in a 5px * 5px canvas (or however big you want it to be) then select it > Edit > Define pattern.

    Then on your progress bar go into the layer style menu and go to pattern overlay. Select your pattern and viola – to get the effect Orman used I suspect he selected Overlay in the blending options and then decreased the opacity.

    Hope that helps :)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Other’ is closed to new topics and replies.