티스토리 뷰
[iOS] Steps to create image filters with designers (디자이너와 이미지 필터 만드는 법)
eungding 2020. 6. 16. 14:56평소 카메라 앱들을 보고
디자이너나 여행작가가 필터 디자인을 하면 개발자가 개발하는 프로세스?!? 는 어떻게 될까 너무 궁금했는데요.
상용 카메라 앱 개발 경험이 있으신 개발자분이 알려주셨습니다...!! (감사합니당..>__<)
프로세스는 이렇게 됩니다. (2년 전에 개발하셨던 한 분의 이야기를 들은 것이라서 다른 곳에서는 다른 방식 일 수 있다는 것 유의해주세요...!!!!)
------- 디자이너 ---------
1) 포토샵으로 원하는 필터를 만든다.
2) 포토샵의 "Color lookup tables로 export하기" 기능을 이용하여 LUP Cube파일을 만든다.
3) LUP Cube파일에서 LUP 이미지 파일을 만든다. 이미지 파일을 개발자에서 넘겨준다.
-------- 개발자 ----------
4) 개발자는 받은 필터 파일을 이미지에 입히는 프로세싱을 한다. (CIColorCube 또는 Metal을 통해..!)
[배경지식]
Look-Up Table 이란..?!?
우선 Color Space는 모든 컬러를 담고 있는 3-dimensional shapes로 표현될 수 있다고 합니다.
RGB는 각 면이 0에서 1 사이의 값을 갖는 큐브로 표현될 수 있습니다.
Look-Up Table은 RGB 큐브를 얇은 slices로 슬라이스 합니다. 그리고 slices들을 평평한 이미지(flat image)로 배열(arrange)합니다.
flat image는 이미지에서 해당 위치에 따른 컬러를 "Look up(찾아보기)"하는 테이블입니다.
컬러가 이미지의 위치와 어떻게 관련되는지 여부는 큐브를 어떻게 잘라냈는지와 슬라이스를 어떻게 배열했는지에 따라 달라진다고 합니다.
[1] Color loopkup 설정해서 원하는 필터 만들기
포토샵 기초[Photoshop CC] - 컬러 룩업 (Color Lookup)
포토샵 기초[Photoshop CC] - 컬러 룩업 (Color Lookup) ※ 본 포스트는 OS: 한글 윈도우7 환경아래...
blog.naver.com
[2] Color lookup tables로 export해서 LUT 파일 (.cube) 만들기
digital-photography-school.com/easily-make-lut-photoshop/
How to Easily Make a LUT in Photoshop
The new creative profiles by Adobe make it a lot easier to use and make a LUT and use it in Photoshop to apply a distinctive look to your images.
digital-photography-school.com
참고로 LUT는 Lookup Table의 약자입니다.
export 하면 이런 LUT파일을 만들어주는 것 같아요 (CUBE..?)
XCODE에서 열어보면..
이렇게 구성되어있더라구요
참고로 LUT파일은 영상편집할때도 쓰입니다.
www.youtube.com/watch?v=dLXH4d_TYNo
==> 여기서 35 FREE LUTs를 다운 받을 수도 있습니다.
[3] LUT cube파일을 png파일로 변환하기
포토샵에서 쉽게 할 수 있다고 합니다.
2번에서 만든 CUBE LUT 파일을 로드해줍니다.
png로 저장해줍니다.
출처: streamshark.io/obs-guide/converting-cube-3dl-lut-to-image
Convert a CUBE or 3DL LUT to a PNG Image
Follow our step by step guide on how to convert a CUBE or 3DL file to a PNG image. Learn how to now!
streamshark.io
저는 무료 LUT Image 여기서 다운받았어요
이메일쓰면 보내주는 여기서도 받을 수 있어요
[4.1] CIColorCube로 LUT based filter 만들기
three-dimensional color table을 사용하여 image pixels를 transform해주는 CIColorCube를 사용합니다.
파라미터들은 아래와 같습니다.
muukii/ColorCube
Create CubeData for CIColorCube from LUT image. Contribute to muukii/ColorCube development by creating an account on GitHub.
github.com
stackoverflow.com/questions/49973474/how-to-apply-lut-from-png-to-an-image-swift-xcode
How to apply LUT (from .png) to an image? (Swift + Xcode)
I am trying to apply a LUT to an image by pressing a button. Because, I am new to programming I mostly copied code and tried to modify it for my own project. I get no error messages, but when I try...
stackoverflow.com
[4.2] Metal로 LUT based filter 만들기
programmer.ink/think/metal-series-of-tutorials-2-metal-implementation-of-lut-filters.html
Metal series of tutorials (2) - Metal implementation of LUT filters
Simple filter In our usual image processing process, the longest thing to do is to change the overall image of a certain color. Let's take an example. If we change the R value of all RGB to 0.5 times the original value, according to the previous wiki, the
programmer.ink
=======
자세한 코드 작업은
다음 글을 참고해주세요
[Reference]
medium.com/the-bergen-company/recreating-vsco-filters-in-darkroom-291114051a0e
Recreating VSCO Filters in Darkroom
Note: If you want to eat the fish, without learning how to fish, feel free to jump ahead to the “How to Recreate a VSCO Filter” section…
medium.com
'🍏 > iOS' 카테고리의 다른 글
[SnapKit] 스냅킷 헷갈리는 것 정리 (inset vs offset / left vs leading / translatesAutoresizingMaskIntoConstraints) (2) | 2020.07.05 |
---|---|
[iOS] Lookup Table Image (LUT Image)로 필터 적용하기 with CIColorCube, Metal (2) | 2020.06.23 |
[CIKernel] CIWarpKernel에 대해 알아보자 (0) | 2020.06.12 |
[CIKernel] CIBlendKernel에 대해 알아보자 (0) | 2020.06.12 |
[CIKernel] CIColorKernel 에 대하여 알아보자 (0) | 2020.06.12 |
- Total
- Today
- Yesterday
- Django FCM
- 플러터 싱글톤
- 플러터 얼럿
- PencilKit
- Sketch 누끼
- Flutter Spacer
- 장고 URL querystring
- Flutter 로딩
- METAL
- Flutter Clipboard
- github actions
- Flutter getter setter
- 장고 Custom Management Command
- SerializerMethodField
- Python Type Hint
- Django Firebase Cloud Messaging
- drf custom error
- flutter dynamic link
- DRF APIException
- ipad multitasking
- ribs
- flutter 앱 출시
- Flutter Text Gradient
- cocoapod
- flutter deep link
- 구글 Geocoding API
- Django Heroku Scheduler
- Watch App for iOS App vs Watch App
- Dart Factory
- flutter build mode
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |