Trying To Make This Simple Thing In Photoshop But No Luck!
KillerPenguinStudios
Member Posts: 1,291
Hey GS,
I have been trying different ways to recreate this image and I feel it should be simple but having no luck. Was wondering if someone could help point me in the right direction to create at least one of the rounded lines. I tried creating an oval then warping it into an arch but did not work. Not asking for someone to make it for me but rather guide me so I can learn! Thanks in advance!!!!
Comments
This is probably much easier to do in a vector program like illustrator. To create one of the lines with photoshop you're probably going to want to create a blue circle, then a white circle inside of it. Delete the bottom portion and then create little blue circles to go on the ends. It can be done but yeah, easier in a vector program
i usually use adobe flash so not sure if this option is available in adobe photoshop , but i think it is , you can put a rectangle shape , drag the upper part to the top and drag the bottom part to the top, and at the edge u can drag it as well to make a circular edge. make 3 rectangles and resize them to the position you want
+1
Exactly how I would do it too.
I originally started in illustrator but then switched to photoshop as I know it better. I didn't think about creating little circles and putting them on the ends of a the deleted sections of the circle. If it's not too much to ask, how would you do this in illustrator? Also, thank you for replying!
Thank you for your replies @Icebox1910 and @Socks
If this is specifically in Photoshop . . . then . .
Create a square canvas - make it much higher res than your final target image . . . for example if the final image is 256 x 256 then work at 4000 x 4000.
Start with a white square canvas - make 3 blue stripes - left to right - at the bottom of the canvas - the lower most being white.
Use the polar coordinates filter to warp this into a circle.
Using judgement, guides and the circular marque tool cut the complete circles down to the required sizes, as well as rounding off their end points.
Heres a way, not the only way.....
On Mac
Open PhotoShop
New Doc ...make it large 8 x 11 800 res
Go to View, show grid
use the elliptical tool
hold down Opt. Shift
click in the center of the grid drag out a perfect circle
make a new layer
go to edit stroke
get the width and color the way you want it push ok
With the marquee circle still selected
make a new layer
go to select transform selection
At the top link your Hight and width by clicking the little chain link icon
select the hight dimension and use the arrow key to reduce the circle size
when you have it where you want it push return
stroke it...rince and repeat above
You now have three different size rings all with the same width stroke each on its own layer
to get the rounded ends...with the grid still showing
use the Square marquee tool
select the area u want to remove from the base of each circle
delete it
make a new layer
with the elliptical tool
make a circle the same size and color as your stroke
Zoom in and drag the little circle to one of the ends of your large circles
once you have it in place you may have to clean up the ends of the large circle
go to selection inverse selection click on the layer with the larger circle and erase any points that may be there.
go back to the layer with the little circle
with the move tool (V)
hold down opt and drag off a duplicate
this will make a new layer
move it to the other end of the large circle
rinse and repeat until all the ends are done
select all the layers in the layers window
use command E to merge down if needed.
Otherwise use the pen tool and stroke it, but if you don't know how to use it , it would take to long for me to try and teach you here.
Download photoshop psd. Included Single Circle in one layer and Individual circle in 3 different layers. Its in smart object shape so you can adjust size as per your requirement.
http://speedy.sh/952wf/cirlce.psd
Here's a vector version. Enjoy: http://cloud.coldtree.com/bnHK
iOS Apps/Games: Factoids | SkyGunner | TriSideX
@creativeapps Its in smart object shape so you can adjust size as per your requirement.
.......
If you adjust the size of a smart object shape you will not have control over adjusting the width of the line. Im not sure that will help him.
Actually the more I think about it, the more I realise the best software to originate this in is not Photoshop, Flash or Illustrator, but GameSalad . . .
Just spawn a bunch of tightly spaced circles and grab a screenshot - work to an iPad project size and if you need a higher resolution image simply go > Edit Custom Resolution, enter 1536 x 2048 and select that from the pulldown.
And if you need the background to be transparent then change the GameSalad project so it's white on black and use that as a mask or alpha channel in Photoshop.
Example project . . . . .
Screenshot from GameSalad project . . . .
@Socks I love it, motion graphics even.
Art director says, yes nice, but can we have it start from the center and evolve in both directions?
Sure, just make your starting angle 90° (rather than -45), duplicate the spawn behaviour and give it a negative cosine . . . . hold on, it's 30 seconds work, it'd be quicker to just do it rather than type all this . . . . . .
Here you go (file attached):
@Socks Thats sweeet! All we need is a bucket of paint tipping at the top and we have it!
@Socks Only sorry I can't upload a project to the forum...
http://tinypic.com/m/iy05sy/2
Edit_How does one attach a project file to a comment?
Open yourself a free MediaFire account, throw project onto MediaFire - post link here.
@Socks Cool Thanks!
mediafire.com/download/54v78xmt93ii9sc/logo-2.gameproj.zip
Nice !
@Socks, @floatingwoo, @creativeapps, & @wanegroup thank you all for everything and helping out! I really didn't think it was that difficult to make this as in I felt it should have been easier if that makes sense. LOL Thank you again for helping out! Greatly appreciated!
I was trying to make this thing as it is part of my logo icon. It is near completion now thanks to everyone! I like your way @floatingwoo but think it's better to use what @wanegroup provided as it's in illustrator and with it being vector based, I can resize as many times as needed and not lose any quality. That's what I originally wanted to use but I am better with photoshop.
@Socks, I love what you did! now I have an idea for my intro motion logo thanks to you! Now I just need to take what you did and add the rest of my logo to it and the intro vid will be complete.
When you mentioned the below part in your previous post, I could not find where I go to edit the custom resolution as you stated.
@Socks and @floatingwoo, I love how evolved my little simple question has evolved and love where it has gone! Has helped me come up with other ideas and given me more insight. This is another reason why I come to the forums because working with other creative minds opens up new and sometimes better doors! Your guys and everyone else is AWESOME and INCREDIBLE! Now to try and finish the logo! It's near completion!
@wanegroup, I really thank you for helping me out with it in illustrator. Is there a simple way to explain how you got it to work? I have a little more of the image to complete and would like it to be in illustrator for the fact that I can resize to any size needed!
I thought this was a fun challenge. I don't use Photoshop. I use GIMP but I am guessing the steps are similar to produce.
First, draw 3 circles (I did them by making a circular selection for the large circle, turn that into a path so that I can stroke the paths later using paint brush, shrunk the selection by 40 pixels in this example, turn that into a path, shrunk the selection by 40 again and turn that into a path. Then stroke the 3 paths with brush of size 20 so it created 3 blue circles with white with the same thickness between them.
Now I use the free select tool and cut away at the sections that i didn't want, from your example image it looks like the smallest circle only has about 1/3 of a full circle, the mid size circle has about 2/3 of a full circle, the largest circle has about 3/4 of a full circle, for this part I just eye-balled it. And cut away
Then I set my paint brush tool to be the size of 20 (same size I stroked the paths with) and a round brush, just and just dotted the end points.
I hope that helps in reproducing it in Photoshop (at least I am imagining that photoshop has similar tools, I could be wrong since I haven't used Photoshop for like about a decade already).
First hit Preview, then in in the drop-down menu in the upper left select Edit Custom Resolution - Make a new Custom Resolution, Height 1536, Width 2048 - hit OK, now select that custom resolution from the same drop down menu. You are now viewing the actual Retina resolution graphics - so much better to capture a screenshot from if that is something you needed to do.
Unfortunately like most things in GameSalad this feature has been specifically designed to frustrate GS users
so as soon as you stop the preview all your settings are lost - and not just lost as in the preview will revert to standard resolution when you next preview, but lost as in the Custom Resolution you just made has gone, so you will need to go through the whole process every time you want to preview your project at Retina - create a new Custom Resolution, enter the dimensions, select this new custom resolution from the drop down - and so on - which unfortunately makes a great feature a real pain to use - but it's fine for one off screenshots.
Do you need help with motion?
Guru Video Channel | Lost Oasis Games | FRYING BACON STUDIOS
I scaled up your original image and noticed that the arcs have different thickness to them (The smallest arc is the thinnest, then the next arc has a little thicker width and the largest arc has the thickest width).
So I scaled up your image and used it as reference.
Then used guides and path tools (apparently you can edit paths like adding points to a circle and deleting different sections of a path in GIMP that i didn't know about so i learned something new today, I learned this through someone else on another forum when i posted my earlier version as a challenge to see if people can do it better and they can, and with some plug-in called path to shape which creates perfect circular paths and then i can edit it using guides and adding points to the existing circles and delete unwanted sections)
Here's the result
notice this version is better than my previous post, with no artifacts around the edges of the arcs.