크기와 위치 맞추기
이미지 레이어를 선택하고 자유 변형을 누르세요. 모서리로 크기를, 위쪽 원으로 각도를 조절합니다.
Ctrl+T · 비율 유지 · Enter로 적용A tool by SLOHERO
Photoshot
사진의
다음 장면.
배경을 지우고, 새로운 풍경에 놓고,
자연스럽게 다듬으세요.
설치 없이 시작하는 레이어 기반 사진 편집기.
DOWNLOAD / FOR PHOTOGRAPHERS
사진 셀렉 작업실을
내 컴퓨터로.
원본 폴더 연결부터 고객 이메일 초대, 선택한 원본 정리까지.
개인 작가를 위한 Local Studio를 내려받아 내 컴퓨터에서 사용하세요.
- 사진 선택 · 즐겨찾기 · 보정 메모
- 이메일 초대 · 고객 선택 자동 반영
- 선택한 원본을 새 폴더로 복사
실행 방법 내려받은 SLOHERO-Local-Studio.html을 Chrome 또는 Edge로 여세요. 원본은 컴퓨터에 보관합니다. 고객 초대·자동 반영에는 인터넷이 필요합니다.
VECTOR EDITOR / BROWSER WORKSPACE
사진에서 도형으로.
새로운 작업의 시작.
펜과 도형으로 로고를 그리고, 글자와 색을 더해 포스터를 만드세요. 설치 없이 브라우저에서 시작하는 벡터 편집기입니다.
- 펜·곡선, 도형 합치기와 클리핑 마스크
- 한글 문자, 그라디언트, 이미지 벡터화
- SVG 가져오기 · SVG / PNG / JPG / PDF 내보내기
Adobe .ai 파일 열기는 지원하지 않습니다.
Inside the workspaceLayers / Masks / Transform
레이어는 따로. 결과는 함께.실제 편집 화면 · 스냅 사진으로 만든 예제
Make it your own
한 장의 사진에서,
당신만의 이미지로.
사진을 열고, 필요한 부분을 남기고, 글자를 더하세요.
완성본은 PNG로, 이어 할 작업은 프로젝트로 저장합니다.
01 / THE PROCESS
자르고, 배치하고.
사진에서 남길 범위를 정하고 글자와 장식을 각 레이어에 놓으세요. 크기와 위치를 바꾸며 한 장의 포스터를 완성합니다.
실제 화면으로 따라 하기 ↗
02 / THE PROCESS따로 다듬고,
따로 다듬고,
함께 완성하고.
사진과 제목, 브러시를 서로 다른 레이어로 관리합니다. 불투명도를 조절하고 마스크로 숨기거나 복원하면서 원본을 남겨 두세요.
실제 화면으로 따라 하기 ↗
BeforeAfter
A new background
배경을 바꾸는
세 가지 단계.
주인공만 남기기
배경 제거로 인물을 분리하세요. 원본을 지우지 않는 마스크로 저장해 가장자리를 다시 다듬을 수 있습니다.
빠름·자동 모드 · 마스크 숨기기·복원배경을 부드럽게
아래 배경 레이어에서 가우시안 흐림을 조절하세요. 저장한 뒤에도 반경을 바꾸거나 효과를 끌 수 있습니다.
적용 전 비교 · 다시 조절 · PNG 저장Learn & build / 17 notes
Photo notes.
사진을 다듬는 손끝부터,
그 뒤에서 작동하는 코드까지.
새 인물 사진과 실제 편집 화면으로 읽는 포토샷 작업기.
무료 포토샵을 만들면서 모든 것을 처음부터 작성하지는 않았다. GitHub에서 개발되는 React와 PixiJS를 가져다 쓰고, AI와 함께 포토샷의 문서 구조·레이어·마스크를 연결하는 코드를 작성했다. 첫 편은 무엇을 가져왔고 무엇을 새로 만들었는지, 초기 커밋과 현재 코드를 나란히 펼쳐 보는 기록이다.
무료 포토샵 개발기 1편: GitHub 코드와 AI로 레이어·마스크 연결하기
인물 사진을 열고, 얼굴을 가리지 않게 제목을 배치하고,
레이어와 마스크로 작업을 나누는 과정.
02↗03↗04↗05↗05↗06↗07↗08↗09↗10↗11↗12↗13↗14↗15↗16↗
무료 포토샵 개발기 2편: GitHub의 Konva 코드를 읽고 밝기·대비 고치기
무료 포토샵의 밝기·대비는 GitHub 검색에서 출발했다. Konva의 실제 필터 코드를 읽고 AI와 포토샷용 계산을 작성했지만, 슬라이더가 움직이는 것만으로 결과까지 맞지는 않았다. 참고 코드, 직접 구현, 측정 후 수정이라는 세 단계를 코드로 남긴다.
무료 포토샵 개발기 3편: GitHub 코드에 레벨·히스토그램 연결하기
무료 포토샵의 레벨 기능은 검은점·흰점·감마를 계산하는 식 하나로 끝나지 않았다. GIMP 문서로 동작을 확인하고, AI와 작성한 계산·손잡이·히스토그램 코드를 기존 조정 레이어에 연결했다. GitHub에 공개한 세 파일을 펼쳐서 조합 과정을 설명한다.
무료 포토샵 개발기 4편: GitHub의 glfx.js에서 출발한 곡선 코드
무료 포토샵의 곡선은 GitHub의 glfx.js를 읽으며 구조를 잡았다. 점 사이 값을 미리 256칸 표로 만든다는 아이디어를 참고하고, 보간과 편집기 연결 코드는 AI와 별도로 작성했다. 이후 비교 결과에 따라 계산을 바꾸고 예전 작업의 모양도 지킨 과정이다.
무료 포토샵 개발기 5편: GitHub에 공개한 노출 계산과 AI의 수정 코드
무료 포토샵의 노출은 기존 GitHub 참고 작업으로 마련한 조정 구조에 새 계산을 연결한 기능이다. 이번 편에서는 특정 외부 저장소를 가져왔다고 꾸미지 않고, 포토샷 GitHub 코드에서 확인되는 색 변환·EV 계산·버전 분기를 적극적으로 펼쳐 본다.
색을 진하게 만드는 것도 한 가지 계산은 아니었습니다
포토샷의 활기·채도와 피부색 보호 옵션이 어떤 계산을 고르는지 정리했습니다.
파랑만 바꿀 때 경계가 끊기지 않도록
포토샷 색조·채도에서 특정 색 범위를 고르고 바꾸는 부분을 정리했습니다.
그림자와 얼굴의 색을 따로 조절하려면
포토샷의 어두운 영역·중간톤·밝은 영역 색상 균형을 한 레이어에 묶었습니다.
흑백으로 바꾼 뒤에도 피부 밝기를 조절하려면
포토샷에 색상별 밝기를 조절하는 흑백 레이어를 구성했습니다.
필터 농도와 레이어 불투명도는 왜 따로 뒀을까
포토샷 포토필터의 색·농도·명도 유지 설정과 레이어 합성을 연결했습니다.
출력 빨강을 원본의 어떤 색으로 만들까
포토샷 채널 혼합에서 출력 R·G·B마다 원본 채널의 비율을 지정하도록 구성했습니다.
LUT 파일을 읽는 것과 ICC를 해석하는 것은 달랐습니다
포토샷 컬러 룩업에서 외부 LUT와 ICC 파일을 사진에 적용하는 부분을 정리했습니다.
반전 수식은 짧아도 레이어 연결은 따로 필요했습니다
포토샷의 색상 반전을 공통 조정 레이어에 연결했습니다.
같은 5단계라도 경계를 어디에 두느냐가 달랐습니다
포토샷 포스터화에서 색 채널을 정해진 단계로 줄이는 계산을 정리했습니다.
기준값과 같은 픽셀은 검정일까 흰색일까
포토샷 한계값 도구에서 밝기를 두 값으로 나누는 판정과 화면 표시를 정리했습니다.
그라데이션 띠와 실제 사진의 색이 이어지도록
포토샷 그레이디언트 맵에서 밝기를 여러 색상 정지점에 대응시켰습니다.
16개 보정을 만들며 공통으로 묶은 부분
포토샷 선택 색상에서 아홉 색 계열의 C·M·Y·K 조정과 공통 합성 구조를 정리했습니다.
어떤 작업부터
시작할까요?
Before you begin
시작하기 전에.
Photoshot은 무료인가요?
현재 공개한 기본 편집 도구는 무료로 사용할 수 있습니다. 설치 없이 브라우저에서 열어 시작하세요.
Layer Studio와 같은 도구인가요?
네. Layer Studio라는 이름으로 만들던 편집기를 Photoshot으로 소개합니다. 기존 주소로도 기본 편집기를 열 수 있으며 작업 파일 확장자는 .layerstudio를 유지합니다.
포토샵 PSD 파일도 편집할 수 있나요?
File 메뉴에서 PSD·PSB 열기와 저장 기능을 제공합니다. 복잡한 문서의 효과·텍스트 등은 호환 차이가 있을 수 있으므로 불러온 결과를 확인하세요. 포토샷에서 작업을 이어갈 때는 .layerstudio 프로젝트도 함께 저장하세요.
조정 레이어와 AI 레이어 분리도 사용할 수 있나요?
밝기·대비, 곡선 등 조정 레이어와 배경 제거 마스크를 사용할 수 있습니다. 여러 물체를 각각 분리하는 AI 레이어 분리는 아직 공개 기능에 포함하지 않았습니다. 작업기 02는 조정 레이어를 만들던 당시의 기록입니다.
모바일에서도 사용할 수 있나요?
사용법과 작업기는 휴대폰에서도 볼 수 있습니다. 실제 편집은 도구와 레이어 패널을 함께 보기 좋은 PC 화면을 권장합니다.
A photo. A new possibility.