back

  • person_pin
  • calendar_today
  • remove_red_eye

[layout계산기] 포토샵 및 시안 작업시 배너간격 및 사이즈 배치를 도와드립니다.

페이지 정보

작성자 webpaper 댓글 0건 조회 207회 작성일 19-04-19 16:05

본문

순전히 일을 하다가 필요할거 같아서 만들어 보았습니다. 

포토샵으로 시안을 작업할 경우 같은 사이즈의 배너를 같은 간격으로 정렬해야 되는 경우가 있습니다. 자주는 아니지만, 

가로 간격은 제한적이고, 배너 숫자를 고려햇을 때 간격과 배너의 크기는 얼마나 할 것인가 ..

항상 엑셀을 켜두고 계산을 했습니다. 물론 엑셀로 하면 되지만,, 

재미삼아 만들었습니다. 

원리는 이렇습니다. 


예를 들어, 가로폭이 1450px의 화면에 5개의 배너20px 간격으로 배치를 합니다. 

이럴 경우 계산을 하죠, 가로폭 - 간격의 합(배너숫자에서 -1 * 20px) 

ex ) 1450 - ((5-1)*20) = 1325

1325 나누기 배너개수 = 1325/5 = 265

이러면 가로폭이 265px 배너를 20px 간격으로 배치를 하면 되는 것이죠.. 

이 것을 조금 편리하게 해본 것입니다. 

 

 

e2c0544284f1c3b0999f31f2da032fc5_1555657111_0515.png

첫 화면에서 위에서 언급했던 항목들을 입력합니다. 

전체 가로사이즈, 배너 개수, 배너간격, 그리고 양쪽으로 동일한 크기의 간격이 필요한 경우 

입력 후 Create 버튼 클릭!

e2c0544284f1c3b0999f31f2da032fc5_1555657016_2595.png

그럼 하단에 이렇게 화면이 표출됩니다. 

1500px /1500px (0px)

이렇게 표시가 된 부분에 대한 설명을 드리자면, 

앞이 1500px은 현재 하단에 계산되어 나온 박스들의 합입니다. 

두번째 1500px은 사용자가 입력한 기준 값입니다. 

그리고 뒤의 괄호안의 숫자는 두 숫자간의 차이를 나타냅니다. 

이렇게 한 이유는 현재 예시처럼 정수로 딱 떨어지는 경우도 있지만 그렇지 않은 경우도 있습니다. 

그럴 경우 소수점 한자리로 고정해서 계산하고, 사용자가 직접 미세 조정을 통해서 작업하도록 합니다. 

전체 사이즈 및 퍼블리싱을 고려할때, 간격이 모두 동일하게 안나오는 경우도 있기 때문입니다. 




e2c0544284f1c3b0999f31f2da032fc5_1555657016_2997.png

위에서 설명한 숫자 아래의 버튼에 대한 설명입니다. 

Box / Inner Margin / Outer Margin 버튼들은 동일하게 숫자를 조정할 것인가 말 것인가를 체크하는 것입니다. 

즉 체크 표시가 되어 있습니다. 항목의 숫자를 변경하였을 때 해당 위치가 모두 동일한 숫자로 변경되는 것이고, 

체크를 해제하고, 변경하면, 변경한 숫자만 반영되는 것입니다. 


e2c0544284f1c3b0999f31f2da032fc5_1555657016_3409.png


그리고 우측의 버튼은 가로 정렬과 세로정렬의 구분입니다. 


e2c0544284f1c3b0999f31f2da032fc5_1555657016_379.png



사실 뭐 이런 것 없이도, 엑셀로 다 할 수 있습니다. 

매번 열고 하는 것이 귀찮아서, 

자주쓰는 기능으로 한번 만들어 보았습니다. 

감사합니다.