친절한효자손 취미생활

일러스트레이터로 작업한 오브젝트를 약간의 필터 변화만으로 전혀 다른 분위기로 연출할 수 있습니다. 포토샵에만 이팩트 효과가 있는것이 아닙니다. 간단한 이펙트는 일러스트레이터에서도 있어요. 일단 일러스트레이터로 대~충 숲 비슷한 분위기를 만들어 보았습니다. 본문의 내용은 필터 이펙트를 적용하는 것이므로 만들어지는 과정에 대해서는 생략하도록 하겠습니다. 적용하고자하는 오브젝트를 모두 선택합니다. Effect > Stylize > Scribble 로 들어갑니다. 그러면 바로 실시간 미리보기가 적용되어 있을겁니다. 각 옵션에 대해서 값을 변경해가면서 변화하는 모습을 보시면 어떻게 적용되는지 쉽게 파악할 수 있을거에요. 이렇게해서 마치 색 사인팬으로 슥삭슥삭 색을 칠한 것 같은 효과를 연출할 수 있습니다. 어렵지 않지요?

여러 도트 그리기 프로그램들이 있지만 일러스트레이터로도 편하게 도트를 그릴 수 있는 방법이 있습니다. 그리 어렵지 않게 도트를 찍을 수 있어요. 도트 가로 및 세로 개수도 자유롭게 설정할 수 있으며 일러스트레이터만의 기능을 활용해 아트보드 페이지 크기를 늘리고 줄이면서 도트 이미지를 여러개 복제할 수 있고 추가 작업도 가능합니다. 일러스트레이터로 그냥 적당한 크기의 문서를 만듭니다. 저는 A4 사이즈로 만들었습니다. 이제 왼쪽에 있는 여러 도구툴 중에서 사각형(Rectangular) Grid Tool 을 선택합니다. 라인툴을 길게 누르면 보일겁니다. 빈 문서에 클릭하면 옵션창이 뜹니다. 크기는 500 x 500 pt 로 하고 가로 및 세로의 라인 수를 각각 19씩 입력했습니다. 그러면 칸은 20개가 되는거죠. 이해되시죠? 이렇게 20 x 20개의 셀이 완성되었습니다. 이 상태에서 바로 작업할수는 없습니다. 전체 선택툴로 그리드를 모두 선택해 줍니다. Object > Live Paint > Make 로 들어갑니다. 단축키는 Ctrl + Alt + X 입니다. 그리고 Live Paint Bucket 툴을 선택합니다. 단축키는 K 입니다. 이제 준비는 다 되었습니다. 원하는 색을 선택하시고 그냥 찍어주세요! 칸 하나 하나 클릭하셔도 되며 드래그해서 연속으로 부어도 됩니다. 그리드 라인 색상 변경도 가능합니다. 전체 선택툴로 그리드 선택 후 라인 색을 변경해주시면 됩니다. 흰색으로 하면 이렇게 백그라운드와 깔맞춤이 되어 더욱 도트 느낌이 납니다. 적당히 작업을 완료했다면 그대로 내보내면 안 됩니다. 이걸 Expand 해줘야 합니다. Object > Live Paint > Expand  를 실행합니...

일러스트레이터와 포토샵 기능을 활용하여 마치 구슬을 닮은 이미지를 만들어 보겠습니다. 과정이 길어보이지만 막상 따라해보면 쉽습니다. 제목에서도 언급했듯 일러스트레이터와 포토샵 두 가지 프로그램을 같이 사용할 것입니다. 포토샵의 Path 툴 사용이 익숙하신 분들이라면 그냥 포토샵에서 작업을 하셔도 됩니다. 일러스트레이터 작업 먼저 일러스트레이터에서 작업을 합니다. 여기에서는 원형 툴만 사용합니다. 원형툴 선택 후 정원을 그려줍니다. Shift를 누른 상태에서 드래그하면 가능합니다. 방금 만든 정원을 선택하고 Alt + Shift를 누른 상태로 아래로 적당히 드래그하면서 수직 복제합니다. 방금 복사한 원을 선택 후 Ctrl+C / Ctrl+F를 눌러 바로 위에 복사합니다. 그리고 복사한 원형을 Alt를 누른채로 축소시킵니다. Alt를 누르는 이유는 센터 기준으로 크기가 변형되기 때문입니다. 원본 원형 말고 나중에 복사한 두 개의 원을 한 번에 선택합니다. 선택할 때 중요한게 있습니다. 검정색 포인트인 전체 선택툴로 선택합니다. 그리고 흰색 포인터로 양 선을 Alt를 누른채 축소시켜줍니다. 그러면 데칼코마니처럼 반대쪽도 줄어들 겁니다. 위의 이미지처럼요. 그리고 적당히 기울여줍니다. 모서리에 마우스를 가져다 올리면 회전 모드가 적용되죠? 이제 일러스트레이터 작업은 모두 끝났습니다. 이 오브젝트를 Ctrl+C를 눌러 복사합니다. 포토샵 작업 이제부터 포토샵 작업을 진행하겠습니다. 포토샵 실행 후 적당한 크기의 문서를 만들어 줍니다. 크기는 정해지지 않았습니다만 최소 500 x 500 픽셀 이상으로 만들어주면 좋을 것 같군요. 만든 문서에서 그대로 Ctrl+V를 눌러서 붙여넣기를 시도합니다. 그러면 옵션창이 뜹니다. 붙여넣기를 할텐데 어떻게 가지고 올지에 대해 묻는 옵션창입니다. Path를 선택 후 OK 버튼을 누...

이번에는 아디다스 로고입니다. 어도비 일러스트레이터로 편집 후 HTML 코드로 변환하였습니다. 코드는 오리지널 로고와 신형 두 가지 모두 적용시켰습니다. 말이 필요없죠? 바로 미리보기로 살펴보시겠습니다. 미리보기 로고는 이렇게 두 가지를 준비했습니다. 보시면 아시겠죠? 구버전과 신버전의 아디다스 로고입니다. 구버전(Origin) See the Pen adidas_New_LOGO by rgy0409 ( @rgy0409 ) on CodePen . 신버전(New) See the Pen adidas_New_LOGO by rgy0409 ( @rgy0409 ) on CodePen . 사용 방법 적용시키고자 하는 웹문서에 HTML 코드를 몽땅 복사 후 그대로 붙여넣기 하시면 됩니다. 색상 변경은 fill 부분의 16진수 코드를 변경하시면 됩니다. 기타 궁금 사항은 댓글로 질문 주시면 확인하는대로 답변 드리겠습니다. 오늘 내용 끝!

우리들이 컴퓨터에서 쉽게 접할 수 있는 이미지 파일들은 대부분 비트맵 방식입니다. 레스터 이미지라고도 하는데 도트 하나 하나를 찍어 커다란 이미지가 되는 방식입니다. 그래서 고용량, 고화질일수록 이미지 파일 크기가 커집니다. 레스터 이미지와 대조되는 개념은 벡터 이미지라는 것입니다. 벡터 이미지는 점과 점을 인식해 선을 잇는 방식입니다. 보통 벡터 이미지는 회사의 로고, 텍스트, 아이콘을 표현할 때 많이 사용하는 방식입니다. 어도비 일러스트레이터는 벡터 이미지를 생산하는 대표 프로그램이라고 할 수 있겠습니다. 수 많은 비트맵 이미지들을 벡터 이미지로 변형하는것도 가능합니다. 버튼 하나만 누르면 순식간에 벡터 이미지로 변환됩니다. 일러스트레이터의 Image Trace (이미지 트레이스)라는 기능을 이용하면 간단하지요. 그럼 빠르게 방법을 알아보겠습니다. 일러스트레이터를 실행합니다. 저는 고양이로 한번 이미지를 깨보겠습니다. 이미지는 그냥 드래그해서 넣으면 자동으로 들어갑니다. 이미지를 선택 후 Alt 키를 누르면서 드래그하면 복사됩니다. 복사된 오른쪽 이미지를 한번 이미지 트레이스 해보겠습니다. 선택 후 위의 메뉴를 보시면 Image Trace라는 버튼이 있을겁니다. 하지만 아직 누르지는 마세요. 오른쪽에 보시면 작은 아래 화살표 아이콘이 있는데 눌러보세요. 그러면 다양한 변환 옵션이 보일겁니다. 위쪽일수록 높은 퀄리티의 변환이며 아래로 내려갈수록 저렴해지는 퀄리티 변환입니다. 저는 High Fidelity Photo 를 사용하겠습니다. 아무래도 가장 높은 퀄리티로 변환해서 살펴보면 대충 아래쪽 퀄리티는 어느정도 예상할 수 있으니까요. 이미지를 백터로 변환한 결과입니다. 큰 차이가 없음이 느껴지십니까? 왼쪽이 원본, 오른쪽이 이미지 트레이스가 끝난 벡터 이미지입니다. 이미지가 클 수록 변환하는 시간이 더 소요됩니다. 하지만 아직 완벽하게 패스 따기가 완료된건 아닙니다. 이 상태에서 한번 더 익스팬드를 해줘야 합니다. 이미지 선택 후...