손그림 SVG

이 문장은 최초로 나타났다Chris DeLuca's blog
나는 손으로 그림을 그리는 자발성과 거칠음을 지닌 벡터 예술품을 그리기 위해 노력해 왔다.

TL；박사 01 명

만약 당신이 단지 나의 과정에 대해 흥미를 느낄 뿐이지 배경 이야기가 아니라면skip to the workflow
내가 선택한 디지털 미디어는 네트워크이기 때문에, 이것은 SVG가 시내에서 유일한 출력 형식이라는 것을 의미한다.이것은 완벽하다. 왜냐하면 모든 사람들과 마찬가지로 나는 지금까지 선택을 좋아하지 않았기 때문이다.

서문 로밍

일부interesting experiments 는 프로그래밍을 통해 그려진 SVG가 손으로 그린 품질을 가지도록 하지만 나는 손으로 그린 이미지가 가져온 예술적 자유를 가지고 싶다. 손으로 그린 느낌만 가지고 싶지 않다.

이 산들은 수공으로 그린 것이 아니다.
벡터 그리기 프로그램이 필요하지만, 이것은 모든 것이 붕괴될 수 있는 곳이다.내 경험에서 손으로 그린 표현력과 결합할 수 있는 제도 도구가 없고 로컬에서 SVG를 처리할 수 있으며 심지어는 SVG를 믿음직스럽게 출력할 수 있다.
물론 Inkscape 와 Illustrator 는 많은 기능을 제공했지만, 그것들은 그림 그리기 도구가 아니라 그림 그리기 도구와 비슷하다.내가 원하는 것은 맨손으로 물건을 그리는 체험이다. 구속도, 계획도, 기하학적 사고도 없다.
이런 상황은 나로 하여금 과거의 Macromedia Flash의 엉망진창이었던 날들을 그리워하게 한다. 다른 모든 것을 제외하고는, 그것은 여전히 나의 가장 좋은 벡터 그리기 도구이다.
현대 응용 프로그램이 제공하는 모든 규칙적인 기하학적 도형을 그릴 수 있지만, 맨손으로 그릴 수도 있다.만약 손으로 닫힌 모양을 그렸다면, 이 도구는 그 모양을 식별하고, 응용 프로그램을 클릭하여 바꾸거나 색칠을 할 수 있도록 합니다.
그러나 내가 장미색 안경으로 빛을 돌이켜 보았을 때, 그것도 엉망이었다.우선 마우스로 그림을 그려야 한다. 왜냐하면 이것은 좋은, 상대적으로 저렴한 터치스크린이 나타나기 전이기 때문이다.이것은'자유의 손'이 완전히 자유롭지 못하게 한다.마우스 손, 더 닮았어.대사가 달라 보여요.
지금 나는 애플 연필로 아이패드에 접근할 수 있다. 그러면 나는 거기에 선을 그리고 그것들을 SVG로 변환할 수 있다.사실상, 이 기능은 이미 몇 개의 유행하는 그래픽 응용 프로그램에 내장되어 있다.
그럼에도 불구하고 나는 완전히 수공으로 그리는 방법에 대해 궁금하다.나도 소프트웨어 개발자이기 때문에 더 적은 디지털 기술과 더 많은 명령행을 동시에 사용하는 업무 절차를 시도하기로 결정했다.쌍방이 모두 매우 기뻐하다.

워크플로우 스트로크

전통적으로 나는 연필로 종이에 흑백 이미지를 그리고 사진 한 장을 찍으며 이미지 처리를 해서 이를 SVG로 변환한 다음에 이를 SVG 편집 프로그램에 가져와 착색했다.
지금까지 나는 이 과정을 결코 싫어하지 않았다.
나는 처음에 붓과 가볍게 터치해서 낙서를 많이 그렸다.내가 말한 가벼운 터치란 내가 최대한 터치에 힘을 쓰지 않고 내 아내가 말한 것처럼 선의 경쾌함과'탐색성'을 유지하는 것을 말한다.이것은 나로 하여금 그림을 그리는 과정에서 줄곧 이 그림을 생각하게 했다. 내 아내를 제외하고는 나는 아무것도 장가들지 않았다.

이것은 내가 쓰는 연필이다.
나는 자신의 낙서를 무관한 상태로 유지하고, 단지 내가 자신의 선이 이미 창조하고 있다고 생각하는 것을 그릴 뿐이다.
일단 내가 이것에 만족한다면, 나는 아내의 화려한 잉크펜으로 나의 연필획에 선명한 검은 선을 그렸다.연필은 잉크 밑에서 여전히 뚜렷하게 보이지만, 진정한 선을 어디에 두었는지는 아무도 틀리지 않는다.

이것은 내가 쓰는 잉크펜이다.
나는 그 그림을 찍었고 아이폰7 카메라에서 가능한 한 밝은 빛으로 찍었다.사실 이것은 같은 그림(해상도가 더 높음)이다. 아래 그림과 같다.

너는 잉크선 아래의 연필선과 종이의 흠집을 볼 수 있다.
나는 이 사진을 나의 맥 미니에 복사한 다음 Acorn 에 복사했다. 이것은 간소화된 맥 중심의 포토샵 버전으로, 나는 그것이 더욱 사용하기 쉽다는 것을 발견했다.나는 가능한 한 종이와 연필획의 탁한 회색을 생략하고 먹줄을 상대적으로 어둡게 유지했다.
그리고 나는 도형을 흑백으로 전환했다. (그레이스케일과 달리, 모든 색깔은 검은색이 아니면 흰색이다.)나는 남은 연필줄이 모두 흰색이고 잉크선이 모두 순수한 검은색일 때까지 그 예도 등급을 가지고 놀았다.나는 아래의 결과를 .bmp 파일로 저장했는데 원인이 매우 뚜렷하다.

저 깨끗한 라인들 좀 봐.
아까 그 수수께끼 기억나세요?내 말은, 왜 그것을 이런 오래된 파일 형식으로 저장해야 합니까?이것은 압축되지 않은 이미지 형식이기 때문에 데이터를 잃어버리지 않지만, 더 중요한 것은 비트맵에서 벡터 변환 도구 Potrace 가 원하는 (그것도 수신할 수 있다 .bmp 파일이지만, 솔직히 말해서, 나는 이 파일들이 무엇인지 모르고, 나도 그것들을 찾으려고 애쓰지 않았다.)
Potrace는 명령줄에 사용되는 소스 오픈 도구이자 상기 Inkscape와 같은 다른 비즈니스 및 비상업 소프트웨어의 일부입니다.나는 명령행을 매우 좋아하기 때문에, 나는 지루한 인터페이스를 개의치 않는다.

potrace --backend svg my-image.bmp --output my-image.svg

나는 프로그램으로 하여금 SVG를 출력하게 했다. (이것은 EPS와Postscript도 할 수 있다.) 프로그램은 매우 완벽하게 작동한다.그것은 흑백 이미지에서만 작동하지만, 나는 이미 알고 있기 때문에 모든 것이 순조롭다.

같은 흑백 낙서는 비트맵에서 벡터로 바뀐다.위의 그림과 비교하기;더 바삭바삭하죠?
다음, 색깔.나는 Boxy SVG 에서 나의 새 SVG를 열었다. 이것은 간단한 프로그램으로 본기에서 SVG를 처리한다.
나는 최초의 그림에 낙서된'주제'가 많았기 때문에 왼쪽 상단에 있는 인물에 집중하기로 했다. 나는'슈퍼 요정'이라고 부른다.
만약 이것이 Flash라면, 나는 페인트 통 도구를 사용하여 모든 연속된 모양을 채울 수 있다.그러나 내가 사용하는 모든 SVG 도구에서 모양은 엔진 덮개 아래.pnm, <polygon> 또는 유사한 도구를 눌러서 모양을 채워야 한다(프로그램은 <ellipse> 속성을 요소에 추가하기만 하면 된다).자동으로 생성된 SVG 코드는 Potrace의 출력처럼 거의 항상 간단fill 요소로 그려지는데 이 요소들은 불가능하지 않아도 색으로 채우기 어렵다.
반대로 채울 선의 크기와 같은 모양을 그려서 배경색을 주고 도면층 보기에서 선 뒤로 옮길 계획입니다.
나는 머리에 녹색 타원을 그려 착색하기 시작했다.내가 그린 머리는 완벽한 타원이 아니기 때문에 배경색이 가장자리에서 튀어나왔다.그러나 나는 그것이 값싼 만화에서 컬러 인쇄가 그다지 정확하지 않다는 거친 느낌을 더해 주었다고 생각한다.

같은 그림: 같은 눈의 넘침 기술.
이런 지저분하고 색채가 풍부한 외관은 매우 좋으나, 반창의적인 위험을 무릅쓰고, 내가 선 안에 색깔을 칠할 수 있습니까?
결과:네.다각형 도구를 사용하여 음영처리하려는 모양의 각도 버전에 점을 그립니다.

해각 다각형의 반을 그리다.
일단 내가 완성된 형상을 선 뒤에 놓으면 선은 다각형의 뾰족한 끝을 흐리게 하고 연속적인 색깔의 착각을 일으킨다.
불행하게도, 나의 첫 번째 그림의 결과는 완벽하지 않아서, 나의 다각형 변이 정확하게 직선 위에 떨어질지, 특히 아래 그림에서 보여준 꼭대기 부근에 떨어질지 판단하기 어렵다.

물론, 나는 여기서 싼 색깔을 다시 한 번 볼 수 있지만, 나는 더욱 정확하게 채울 수 있는지 없는지를 보고 싶다.
다행히도 Boxy SVG는 우수한 형태 변환 도구를 제공합니다.나는 형상이 내가 원하는 선 안에 떨어질 때까지 기하학적 점을 조정할 수 있다.

각 점은 다각형의 제어점입니다.
일단 내 색깔이 마음에 들면, 나는 내 컬러 하이퍼라인 문자만 선택하고 내보낸다.손으로 그린 불규칙한 도형에 대해 나는 원래 파일 크기가 반만 크기였으면 좋겠지만, 결국 디스크에 있는 무게는 <path> 밖에 되지 않았다.이것은 최적화 및 축소 이전이므로 원본 SVG 코드는 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="444.783 273.522 749.717 1341.237" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Super Wisp</title>
<g>
<title>Color</title>
<polygon style="stroke: rgb(0, 0, 0); fill: rgb(248, 106, 106);" points="601.655 994.655 551.522 1042.12 540.507 1115.09 559.784 1190.82 630.653 1268.49 761.935 1345.18 883.477 1369.06 954.659 1425.66 971.182 1500.33 960.166 1544.39 984.7 1600.03 1075.78 1605.45 1156.2 1557.99 1190.15 1467.87 1175 1431.5 1148.84 1372.3 1162.53 1287.74 1145.36 1232.1 1072.32 1233.48 984.195 1260.366 912.535 1209.34 870.519 1125.57 886.312 1071.31 909.719 1036.88 900.081 1017.6 798.189 1001.08 765.143 966.659"/>
<!-- The real code keeps going, but one can only stare at so much XML. -->

나는 서류를 한 번 훑어보았는데Svgcleaner 파일 크기가 절반 이상으로 줄어들었다64k!현재 코드는 다음과 같습니다.

<svg viewBox="444.783 273.522 749.717 1341.237" xmlns="http://www.w3.org/2000/svg"><path d="m601.655 994.655-50.133 47.465-11.015 72.97 19.277 75.73 70.869 77.67 131.282 76.69 121.542 23.88 71.182 56.6 16.523 74.67-11.016 44.06 24.534 55.64 91.08 5.42 80.42-47.46 33.95-90.12-15.15-36.37-26.16-59.2 13.69-84.56-17.17-55.64-73.04 1.38-88.125 26.886-71.66-51.026-42.016-83.77 15.793-54.26 23.407-34.43-9.638-19.28-101.892-16.52-33.046-34.421z" fill="#f86a6a" stroke="#000"/>
<!-- Enough of this; the only thing worse than starting at too much XML is starting at too much minified XML. -->

이것이 바로 완성된 SVG입니다. 이 페이지에 직접 삽입되어 매우 어지럽습니다.

아직 완벽하지 않은 점이 많다. 이른바 예술의 조잡함의 한계를 넓혔고, 특히 스크린에서는 그렇다.하지만 결국 나는 테스트에 성공했다는 것을 발견했다.나에게 있어서 이 이미지는 매력과 개성이 있다. 내 심리학자가 경고한 것처럼, 그것은 바로 나에게서 온 것이다.
작업 절차가 완벽하지는 않지만 매우 실행 가능하다.전체 과정이 단지 나에게 몇 시간밖에 걸리지 않았는데, 이것은 내가 처음으로 이렇게 한 것이다.나는 계속 탐색할 수 있어서 매우 흥분된다.