:: 어시스터 PS 포토샵 버전 체크 이벤트 ::


사용하고 계신 포토샵의 버전, 어떻게 되시나요?


지난 2010년 20주년을 맞이하여 지금의 CC 버전까지.. 

역사가 20년도 더 된다고 하네요~ 놀라운 Adobe Photoshop


사용하고 계신 포토샵의 버전을 댓글로 알려주세요. (해당 페이스북 이벤트 글에 댓글만 인정됩니다.)

추첨을 통해 다섯분께 어시스터 한달 사용권 쿠폰을 드립니다.

  • 기간 : 10/15 (화) ~ 10/25 (금) 까지
  • 당첨자 발표 : 10/28 (월)

관련 글 : 한눈에 보는 포토샵의 역사

http://creativeoverflow.net/history-of-photoshop-journey-from-photoshop-1-0-to-photoshop-cs5/
http://www.webdesignerdepot.com/2010/02/20-years-of-adobe-photoshop/

1.0부터 CS5까지 스플래시 이미지와 화면을 구경해보세요~!


페이스북 이벤트 바로 가기  https://www.facebook.com/photo.php?fbid=575501559163955&set=a.496175113763267.1073741827.459035844143861

신고

포토샵으로 디자인된 작업을 모두 끝내도 애플리케이션 개발을 하기 위해서는 개발자에게 각 이미지를 모두 잘라주거나 PSD 파일을 넘겨야 합니다. 이 과정에서 간혹 실수를 하는 경우를 보았는데 Blend Mode의 잘못된 사용입니다.


먼저 아래와 같은 Application Design 작업물을 개발 환경으로
보내기 위해 모든 이미지를 알파패널을 포함한 PNG 파일 포맷으로
잘라내어야 한다는 가정을 해보겠습니다.












이미지를 모두 잘라 실제 개발화면에 적용해 보니 아래와 같은 결과가 나왔습니다. 좌측이 원본 PSD파일의 이미지이고, 우측이 개발 환경에 적용된 모습인데 뭔가 어색한 모습이죠. 바로 하단 영역의 Bar 부분과 Play 버튼의 컬러가 전혀 다른 모습으로 개발화면에 나타나고 있는 부분인데 작업 과정에서 적절하지 못한 부분에 Blend Mode를 사용했기 때문입니다.




아래 보이는 것처럼 Play 버튼의 레이어에 Blend Mode를 적용시켜 디자인을 완성했는데 보기에는 별 문제가 없어 보입니다.



하지만 문제는 각 이미지를 PNG파일 포맷으로 자르는 순간 드러납니다. Blend Mode는 하위 레이어에 어떤 컬러가 적용되어 있는가에 따라 서로 다른 컬러표현을 보여주는 기능이기 때문에 하위 레이어의 컬러가 다르다면 전혀 다른 모습을 나타냅니다. 그렇기 때문에 이미지를 자르기 위해 하위 레이어의 눈을 잠시 끄는 순간 Blend Mode는 무용지물이 되는 것이죠.



하단 Bar 부분도 마찬가지 입니다. Layer Style에서 Blend Mode 기능을 적용하였기 때문에 이미지로 자르려고 하는 순간 전혀 다른 컬러로 잘려지게 됩니다.




Blend Mode는 적재적소에 사용하면 다양하고 풍부한 느낌을 낼 수 있는 기능이지만 이런 사소한 실수를 유발할 수도 있으니 주의하세요! 

저작자 표시 비영리 변경 금지
신고

Introduction

이번시간에 소개할 내용은 임의의 배경색을 사용하는 사용하는 프로그램을 개발할 때 배경색에 대비해 읽기 쉬운 전경색을 계산하는 방법에 대해 소개합니다. 포토샵의 경우에는 이와 같은 방법을 이용해 아래 그림과 같이 색을 선택할때 현재 선택된 색을 잘 알아 볼 수 있도록 돕는 기능을 기능을 제공할 수 있습니다.

원리는 간단하게 설명하면, 사용자가 선택한 색과 전경색으로 사용할 색(흰색,검정색)과의 밝기 차이를 이용해 더 차이가 많이 나는 색을 선택하는 방식입니다.

Calculating Color Contrast for Legible Foreground

색의 밝기를 계산하고 적합한 전경색을 선택하기 위해서는 여러가지 방법이 있지만, 먼저 W3C에서는 기본적으로 YUV Color Model를 이용한 방식에 대해 소개하고 있습니다. YUV Color Model은 밝기값과 색차 신호를 이용해 색을 표현하는 방식으로, 밝기를 의미하는 Y의 값을 기준으로 임계값에 의해 적합 여부를 판단하게 됩니다.

일반적인 환경에서 사용하는 RGB Color를 YUV Color로 변환하기 위해서는 다음과 같은 식이 사용되며

밝기를 의미하는 Y값을 계산하게되면 아래와 같이 간단하게 표현될 수 있으며 W3C에서 권장하는 밝기의 기준값인 125보다 작은경우 흰색을 큰 경우 검정색을 선택 할 수 있습니다.


포토샵에서는 보다 정확한 계산을 위해 LAB Color Model을 사용하는데, LAB는 국제조명위원회에서 인간의 색체인지 연구를 바탕으로 개발된 XYZ Color Model를 개선하여 개발된 Color Model입니다. (자세한 변환과정은 LAB ColorModel Wiki를 참고하시기 바랍니다.)

LAB Color Model에는 빛(휘도)을 의미하는 L성분을 가지고 있는데 포토샵에서는 L성분의 임계값을 62로 지정하여 사용하고 이를 이용해 전경색을 선택하고 있습니다. 이를 코드로 표현하면 다음과 같습니다.


이상으로 이번 포스팅을 마치며, 혹시 위 내용과 관련하여 궁금하신점이나 문의사항은 댓글이나 이메일로 주시면 답변드리도록 하겠습니다. 감사합니다.

신고

Introduction

포토샵을 사용하는 디자이너와 협업하여 WPF프로젝트를 진행하다보면, 디자이너가 작업한 결과물들을 사용가능한 형태(XAML)로 변환하는 과정이 필요한데, 전문 디자인 툴인 포토샵의 기능들을 기본적으로 제공되는 WPF의 기능만으로 표현해 내는것은 한계가 따릅니다. 대표적인 예로 GradientBrush, Effect, Blend Mode등이 대표적인 예입니다. 이번시간에는 포토샵에서 Gradient를 편집할때 사용 할 수 있는 MidPoint GradientStop을 WPF에서 적용 할 수 있는 방법에 대해 생각해보고 구현하는 방법에 대해 소개합니다.

What is the MidPoint GradientStop?

MidPoint Gradient란, 시작 GradientStop에서 종료 GradientStop까지 색이 변화 하는 과정에서 두 색이 절반씩 섞여 중간색으로 변환되는 시점을 말합니다. 실제 포토샵에서는 예를 이용해 조금더 설명을 하자면, 아래 그림의 경우 빨간색을 시작으로 파란색으로 끝나는 Gradation에서 MidPoint가 0.5 즉, 빨간색과 파란색의 중간색인 보라색이 0.5지점에 위치하는걸 확인 할 수 있습니다.


마찬가지로 MidPoint가 0.9에 위치하게 되면, 아래 그림과 같이 중간색인 보라색이 0.9지점에 위치하게 됩니다.


간단한 논리로 생각을 해보면, 두개의 GradientStop을 지정했지만, 실제로는 MidPoint가 변경되거나, Start 혹은 End의 색이 변경될때 중간 값을 띄는 GradientStop이 하나 더존재 한다고 생각할 수 있겠습니다.

Create MidPoint Attached Property

WPF에서는 기본적으로 위에서 설명한 MidPoint를 지원하지 않기 때문에 MidPoint를 지원하도록 하기 위해 가장먼저 GradientStop에 MidPoint를 지정 할 수 있도록 아래와 같이 Attached DependencyProperty를 정의합니다. GradientStop에만 사용되기 때문에 대상 타입을 Gradient Stop으로 지정했습니다.

이제 MidPoint Attached Property가 정의되었으면, 위에서 이야기 한바와 같이 MidPoint와 관련된 일을 수행하는 GradientStop을 생성해야 합니다. 그리고 기준 GradientStop과 이전 GradientStop의 색에 따라 중간 색이 변경될 수 있도록 Binding을 하고, Converter를 이용해 중간색을 계산합니다.

Calculate Mid Point Color & Offset



위 코드는 두 GradientStop의 Offset을 입력받아 상대 값으로 입력된 MidPoint를 절대값 Offset으로 변환 하는 부분과 두 색을 입력받아 중간 색을 계산하는 코드입니다. 그리고 다음과 같이 XAML 에서 MidPoint를 적용하실 수 있습니다.



이번시간에 사용된 소스코드는 아래에서 다운로드 받으실수 있으며, 기타 궁금하신 점이나 문의 사항은 댓글달아주시면 답변 드리도록 하겠습니다. 감사합니다.

 
신고