웹 일러스트 레이션 준비
2008년 6월 16일 chriscoyier ·에 의해 3 개의 댓글 
일러스트 웹 디자인에 사랑스러운 추세입니다. 그것은 잘 맞는 매체. 위대한 일러스트 레이터하지만, 종종 웹의 관점에서 일러스트 레이션 할 때 그들은 그렇게 생각하지 않습니다. 아주 멋진 하늘을 봐 / 난 shutterstock에서 발견 언덕 풍경 그림 :
이 그림은 웹 디자인을위한 훌륭한 기반을 만드는 것이라고 생각하지만, 분명 - - 상자 같은 작업을위한 준비가되지 않습니다. 몇 가지 조작을 할 수 있으며, 웹 그것을 준비합니다.
포토샵으로 가져와
그것은 벡터 일러스트 환상적입니다. 그건 우리가 품질의 손실없이 필요 크기로 만들 수있는 모든 것을 의미합니다. 우리의 목표는이 장면은 브라우저의 상단 중앙에, 그러니까, 포토샵으로 최대 저희 웹사이트의 주요 콘텐츠 영역과 함께 나가자 앉아서 할 것입니다. , 960px 말해봐. 새로운 포토샵 문서를 확인하십시오 폭이 960px보다 키가에 맞게해야합니다.
Adobe Illustrator에서와 모두 선택하여 그림을 엽니다. 복사 및 붙여넣기를 귀하의 포토샵 문서로. 스마트 개체로 붙여 있는지 확인합니다. 이것은 그것의 벡터 자연을 유지, 당신은 그것을 품질의 손실없이 고급 수있게된다. 너무 작은 놀러 수있습니다. 아니 거기 그냥 960px 다양한 문서에 맞는 규모가 최대 우려하고있다.
가장자리 확장
브라우저 창을 포토샵 문서와 같은 환경에서 고정 너비가되지 않습니다. 우리는 그림을 준비할 때 브라우저 창을 우리 기지를 960px보다 넓은됩니다 이뻐요해야합니다. 앞날을 가서 우리 1280px 문서의 캔버스에 폭 증가 그렇게 우리는 함께 일할 공간을 좀 보자 구.
우리의 목표는 여기에 수평으로 반복 될 게이 그림은 최종 가장자리가하는 것입니다. 사람이 웹 디자인을 작동하게하려면 이런 게 필요할 것입니다이 문서를 부러 뜨리는데. 결국 이것은 슬라이스 웹페이지의 <body> 요소에 대한 배경, 메인 일러스트 꼭대기에 앉아있을 것입니다.
나는이 그림의 오른쪽 가장자리의 작고 얇은 할게요 ""그것에 그것을 자신의 새로운 레이어 (지휘 - 일본) 플로트.
이제 우리는 자유 (지휘 - T)를이 새로운 작은 슬라이스를 변환하여 수평으로 문서의 양쪽 모두 벗어를 확장합니다. 왜냐하면 좋은 그라디언트 및 수직으로 만들어졌습니다,이 확장 멋지게 오른쪽에서 작동합니다. 힐, 부시 대통령과 도로과 오른쪽하지만, 너무 과격한 모습이 갑자기 중단되고.
전환 왜곡
아무것도보다는 너무 좋아하니 함께이 두 레이어를 병합하려고하면,의 전경 배치에 의해 혹독한 무명의 직접 전환 가기 이상의 개체를 보자. 이 그림은 여분의 깊이가 조금 어쨌든 할 수있습니다.
이 벡터 사서함을 잘 할 것입니다.
사서함 자체를 제외하고 모두 삭제하고 스마트 개체로 그림에 붙여 넣습니다 단지 우리가 원래 그림을 차지했다. 작은 크기를 조정 및 배치 그리고 배경의 전환 왜곡에 대한 완벽한 요소.
메인 콘텐츠 영역
우리의 그림 사랑스러운 헤더와 배경에 대한 확인을하려고했지만이 웹 사이트의 실제 내용에 대한, 우리는 백인의 대형 블록의 일종이 필요합니다. 드롭 그림자 조금 벗어 설정 상단에 하얀 둥근 사각형을 마우스 오른쪽 드롭 다운하자.
바닥 필링
수평 가장자리에 지금은 잘 드러나지 않아, 우리의 웹사이트 이랑 하단의 나머지 색상을 작성할 수있습니다. 샘플 방법은 가장 하단에 그림의 픽셀의 색상을 Eyedropper 도구 ()와 함께 다음이 새로운 컬러와 함께 대부분의 비어있는 레이어를 우리의 하단에 기입하여주십시오.
메인 컨텐츠로 영역이 지금은 모든 훌륭한 웹 디자이너를 위해 슬라이스 바람이 될 것이다.
마지막 손질하는 것
하늘에서 멋진 선물을 환영 메시지를 던져 우리 스스로 멋진 그림을 찾고 웹 이랑있다. 왜냐하면 우리는 신중 둘 다 수평 및 수직 확장성 확장성 돌봐 가지고,이 그림은 지금은 전환에 대한 실제 웹 마크업에 최적입니다.
모두이 작업을 위해 사용하는 포토샵 왜?
왜 포토샵 사용합니까? 포토샵이 이미지는하지만, 레이아웃 (튜토리얼 아이디어)에 대한 좋은 생각과 같은 벡터 웹에 대한 이미지, 아니위한 좋은 도구입니다.
제보 주셔서 감사합니다! 포토샵 마술이야!