시퀀스나 스크린샷은 정상적으로 배경이 투명색으로 나오는데
애니메이션쪽 gif내보내기는 alpha값을 0으로 했는데도 검은색이 나오네요 따로 설정해야 하는게
있나요?
안녕하세요!
GIF 내보내기에 대한 답변을 드립니다.
GIF는 PNG와 달리 오직 1개의 색상값만 투명이 되며, 이를 위한 별도의 내부 기능이 필요합니다.
안타깝게도, 저희가 사용하는 GIF 내보내기 라이브러리에서 투명색으로 내보내기를 지원하지 않으므로, AnyPortrait 만으로는 요청한 기능을 수행하는 것이 불가능합니다.
(저희가 구현할 당시의 스펙을 기준으로 답변 드립니다.)
어쩔 수 없이 해당 작업을 위해서는 외부의 프로그램을 이용하셔야 합니다.
이 문의에 대해 답변을 드리고자 여러 방향으로 해결책을 모색해보니, (1) 온라인의 변환 툴을 이용하는 쉬운 방법과 (2) 포토샵 등의 프로그램을 이용하는 방법이 있었습니다.
또한 (1) 완성된 GIF 파일에서 특정 색상을 투명하게 만드는 방법과 (2) 투명 배경의 PNG 파일 리스트를 GIF 애니메이션 파일로 만들기의 두가지 방법이 있었습니다.
저희는 이 답변에서 (1) 온라인의 변환 툴을 이용하여 완성된 GIF 파일에서 특정 색을 투명하게 만드는 방법과 (2) 포토샵에서 PNG 파일 리스트를 GIF 애니메이션 파일로 만드는 방법을 각각 설명드리고자 합니다.
물론, 저희가 소개한 프로그램 외에도 유사한 기능을 제공하는 다른 많은 도구들이 존재하니 편리한 툴을 찾아서 이용해보시면 되겠습니다.
(참고로, 저희는 프로그램 사용 방법에 대해서 소개만 해드리며, 이 프로그램 사용에 대한 문제에 대해서는 책임을 지지 않습니다.)
1. 온라인 툴을 이용하여 특정 색상을 투명하게 만들기
이번에 저희가 검색을 해보니 많은 GIF 변환을 지원하는 온라인 도구들이 있었습니다.
저희는 그 중에서 " https://ezgif.com/ " 라는 사이트의 도구를 이용해보았습니다.
먼저 GIF 애니메이션을 만들어봅시다.
(1) 배경색을 설정합니다. Alpha의 값을 255로 만들어서 투명하지 않게 만들어야 하며, 캐릭터 이미지에 없는 색상이어야 합니다.
(2) 완성될 이미지 파일의 크기를 설정합니다.
(3) GIF 품질과 Loop 횟수를 설정하고 Export as GIF 버튼을 누릅니다.
GIF 애니메이션이 완성되었습니다.
(1) https://ezgif.com/ 사이트에 접속합니다.
(2) "Effects" 메뉴를 선택합니다.
(3) GIF 파일을 선택합니다.
(4) Upload 버튼을 누릅니다.
GIF 파일이 로드되면 각종 옵션들이 나타납니다.
화면의 아래쪽에 "Replace color with transparency" 항목이 나타납니다.
배경색을 보라색(#FF00FF)으로 설정했으므로 Custom (HEX)를 선택하고 해당 색상을 입력한 후, "don't stack frames"를 체크합니다.
(1) Apply selected 버튼을 누릅니다.
(2) 배경이 투명해진 GIF 애니메이션 이미지를 볼 수 있습니다.
(3) Save 버튼을 눌러서 완성된 파일을 저장할 수 있습니다.
여기서는 보라색으로 배경색을 설정했는데, 외곽선에서 블러 처리가 되어 색상이 조금 바뀐 부분에서는 투명색으로 변환되지 않은 것을 볼 수 있습니다.
따라서 이 점을 해결하기 위해서는 배경색을 검은색 등으로 설정하는 것이 좋습니다.
검은색 배경의 GIF를 만들고 동일한 과정으로 업로드를 했습니다.
이번엔 같은 옵션에서 "black"을 선택했습니다. 동일하게 "don't stack frames"를 체크합니다.
안녕하세요!
GIF 내보내기에 대한 답변을 드립니다.
GIF는 PNG와 달리 오직 1개의 색상값만 투명이 되며, 이를 위한 별도의 내부 기능이 필요합니다.
안타깝게도, 저희가 사용하는 GIF 내보내기 라이브러리에서 투명색으로 내보내기를 지원하지 않으므로, AnyPortrait 만으로는 요청한 기능을 수행하는 것이 불가능합니다.
(저희가 구현할 당시의 스펙을 기준으로 답변 드립니다.)
어쩔 수 없이 해당 작업을 위해서는 외부의 프로그램을 이용하셔야 합니다.
이 문의에 대해 답변을 드리고자 여러 방향으로 해결책을 모색해보니, (1) 온라인의 변환 툴을 이용하는 쉬운 방법과 (2) 포토샵 등의 프로그램을 이용하는 방법이 있었습니다.
또한 (1) 완성된 GIF 파일에서 특정 색상을 투명하게 만드는 방법과 (2) 투명 배경의 PNG 파일 리스트를 GIF 애니메이션 파일로 만들기의 두가지 방법이 있었습니다.
저희는 이 답변에서 (1) 온라인의 변환 툴을 이용하여 완성된 GIF 파일에서 특정 색을 투명하게 만드는 방법과 (2) 포토샵에서 PNG 파일 리스트를 GIF 애니메이션 파일로 만드는 방법을 각각 설명드리고자 합니다.
물론, 저희가 소개한 프로그램 외에도 유사한 기능을 제공하는 다른 많은 도구들이 존재하니 편리한 툴을 찾아서 이용해보시면 되겠습니다.
(참고로, 저희는 프로그램 사용 방법에 대해서 소개만 해드리며, 이 프로그램 사용에 대한 문제에 대해서는 책임을 지지 않습니다.)
1. 온라인 툴을 이용하여 특정 색상을 투명하게 만들기
이번에 저희가 검색을 해보니 많은 GIF 변환을 지원하는 온라인 도구들이 있었습니다.
저희는 그 중에서 " https://ezgif.com/ " 라는 사이트의 도구를 이용해보았습니다.
먼저 GIF 애니메이션을 만들어봅시다.
(1) 배경색을 설정합니다. Alpha의 값을 255로 만들어서 투명하지 않게 만들어야 하며, 캐릭터 이미지에 없는 색상이어야 합니다.
(2) 완성될 이미지 파일의 크기를 설정합니다.
(3) GIF 품질과 Loop 횟수를 설정하고 Export as GIF 버튼을 누릅니다.
GIF 애니메이션이 완성되었습니다.
(1) https://ezgif.com/ 사이트에 접속합니다.
(2) "Effects" 메뉴를 선택합니다.
(3) GIF 파일을 선택합니다.
(4) Upload 버튼을 누릅니다.
GIF 파일이 로드되면 각종 옵션들이 나타납니다.
화면의 아래쪽에 "Replace color with transparency" 항목이 나타납니다.
배경색을 보라색(#FF00FF)으로 설정했으므로 Custom (HEX)를 선택하고 해당 색상을 입력한 후, "don't stack frames"를 체크합니다.
(1) Apply selected 버튼을 누릅니다.
(2) 배경이 투명해진 GIF 애니메이션 이미지를 볼 수 있습니다.
(3) Save 버튼을 눌러서 완성된 파일을 저장할 수 있습니다.
여기서는 보라색으로 배경색을 설정했는데, 외곽선에서 블러 처리가 되어 색상이 조금 바뀐 부분에서는 투명색으로 변환되지 않은 것을 볼 수 있습니다.
따라서 이 점을 해결하기 위해서는 배경색을 검은색 등으로 설정하는 것이 좋습니다.
검은색 배경의 GIF를 만들고 동일한 과정으로 업로드를 했습니다.
이번엔 같은 옵션에서 "black"을 선택했습니다. 동일하게 "don't stack frames"를 체크합니다.