- This topic is empty.
March 1, 2011 at 8:11 pm #31837RoxonMember
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 http://www.premiumpixels.com/pretty-little-progress-bar-psd/ 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.March 1, 2011 at 10:02 pm #57436sliver37Member
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.March 2, 2011 at 3:56 pm #57120RoxonMember
No, it’s the diagonal half opaque bars that go across the progress bar I’m after.March 2, 2011 at 5:45 pm #57121soapParticipant
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 opacityMarch 3, 2011 at 4:25 am #57050MoofinParticipant
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 :)
- The forum ‘Other’ is closed to new topics and replies.