Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Best Practices for Photoshop to Unity uGUI

Discussion in 'General Discussion' started by Ben-BearFish, Jul 22, 2015.

  1. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,204
    I'm working with an artist who laid out our UI's design in Photoshop with guides to show precisely how the UI needs to be laid out. I have to translate his UI into the Unity UI screen space. I was wondering if there is a guide or a best practices anyone could reccomend to matching up the positiong of the UI in Photoshop to the positioning of the UI in Unity?
     
  2. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,204
    Any suggestions?
     
  3. Diericx

    Diericx

    Joined:
    Jun 8, 2013
    Posts:
    62
    I would say if you are trying to match it EXACTLY you should probably position everything programmaticallyvia scripts and what not
     
  4. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,204
    This mostly works until I have UI elements within UI elements, then the Unity anchoring system causes issues.
     
  5. zombiegorilla

    zombiegorilla

    Moderator

    Joined:
    May 8, 2012
    Posts:
    9,042
    Export the whole image, drop in the background and use it as guide to line up the separate elements.
     
  6. Master-Frog

    Master-Frog

    Joined:
    Jun 22, 2015
    Posts:
    2,302
    If you get funky anchoring problems, consider world space positioning and parent the ui canvas to the camera. It works.
     
    Ben-BearFish likes this.
  7. calmcarrots

    calmcarrots

    Joined:
    Mar 7, 2014
    Posts:
    654
    Try different scaling modes on the canvas
     
  8. Kiwasi

    Kiwasi

    Joined:
    Dec 5, 2013
    Posts:
    16,860
    Do you have to support multiple screen resolutions and UI elements stretching?

    If not anchoring everything to the centre of the screen or the nearest corner can be a handy trick.
     
  9. Ben-BearFish

    Ben-BearFish

    Joined:
    Sep 6, 2011
    Posts:
    1,204
    Currently, I just need to support 16:9, but multiple resolutions based on that aspect ratio.

    I'll try the world space positioning and the exporting the Photoshop image as suggested, that may help.
     
  10. Kiwasi

    Kiwasi

    Joined:
    Dec 5, 2013
    Posts:
    16,860
    If your aspect ratio is constant you don't need to do any thing fancy with anchors. Either anchor everything to all four corners of its parent. Or anchor everything to a single point.
     
    zombiegorilla likes this.
  11. superpig

    superpig

    Drink more water! Unity Technologies

    Joined:
    Jan 16, 2011
    Posts:
    4,649
    Yeah, if you're not supporting multiple aspect ratios I would simply anchor everything to the default position (which I think is the centre?) - the supporting multiple resolutions is just done through having a Canvas Scaler component on the root.
     
    Kiwasi and zombiegorilla like this.