GameSalad

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Trying To Make This Simple Thing In Photoshop But No Luck!

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

  • toastyteetoastytee Posts: 57Member, PRO

    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

  • IceboxIcebox Posts: 1,483Member

    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

  • SocksSocks London, UK.Posts: 12,822Member

    @toastytee said:
    This is probably much easier to do in a vector program like illustrator.

    +1

    @toastytee said:
    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

    Exactly how I would do it too.

  • KillerPenguinStudiosKillerPenguinStudios Posts: 1,291Member

    @toastytee said:
    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 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!

  • KillerPenguinStudiosKillerPenguinStudios Posts: 1,291Member

    Thank you for your replies @Icebox1910 and @Socks

  • SocksSocks London, UK.Posts: 12,822Member

    @KillerPenguinStudios said:
    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.

  • floatingwoofloatingwoo Los Angeles, Calif.Posts: 393Member
    edited June 2015

    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.

  • creativeappscreativeapps Posts: 1,770Member

    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

  • wanegroupwanegroup Posts: 84Member, PRO

    Here's a vector version. Enjoy: http://cloud.coldtree.com/bnHK

    iOS Apps/Games: Factoids | SkyGunner | TriSideX

  • floatingwoofloatingwoo Los Angeles, Calif.Posts: 393Member
    edited June 2015

    @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.

  • SocksSocks London, UK.Posts: 12,822Member

    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.

  • SocksSocks London, UK.Posts: 12,822Member

    Example project . . . . .

  • SocksSocks London, UK.Posts: 12,822Member

    Screenshot from GameSalad project . . . .

  • floatingwoofloatingwoo Los Angeles, Calif.Posts: 393Member
    edited June 2015

    @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?

  • SocksSocks London, UK.Posts: 12,822Member

    @floatingwoo said:
    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 . . . . . .

  • SocksSocks London, UK.Posts: 12,822Member

    @floatingwoo said:

    Here you go (file attached):

  • floatingwoofloatingwoo Los Angeles, Calif.Posts: 393Member

    @Socks Thats sweeet! All we need is a bucket of paint tipping at the top and we have it!

  • floatingwoofloatingwoo Los Angeles, Calif.Posts: 393Member
    edited June 2015

    @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?

  • SocksSocks London, UK.Posts: 12,822Member

    @floatingwoo said:
    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.

  • floatingwoofloatingwoo Los Angeles, Calif.Posts: 393Member
    edited June 2015
  • SocksSocks London, UK.Posts: 12,822Member
  • KillerPenguinStudiosKillerPenguinStudios Posts: 1,291Member

    @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.

  • KillerPenguinStudiosKillerPenguinStudios Posts: 1,291Member

    @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 said:
    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.

  • KillerPenguinStudiosKillerPenguinStudios Posts: 1,291Member

    @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!

  • KillerPenguinStudiosKillerPenguinStudios Posts: 1,291Member

    @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!

  • tintrantintran Posts: 453Member

    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).

  • SocksSocks London, UK.Posts: 12,822Member
    edited June 2015

    @KillerPenguinStudios said:
    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.

    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 :wink: 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.

  • The_Gamesalad_GuruThe_Gamesalad_Guru Posts: 9,913Member

    Do you need help with motion?

  • tintrantintran Posts: 453Member
    edited June 2015

    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.

Sign In or Register to comment.