Fireworks를 사용하여 아이콘에 정교한 디테일 만들기

이 기사에서는 Fireworks 소프트웨어를 사용하여 기성 아이콘 이미지에 일부 세부 정보를 만들어 아이콘을 더욱 세련되고 아름답게 만듭니다!

아이콘 디자인을 위해 Fireworks(이하 FW)를 사용할 때 주의해야 할 두 가지 주요 사항이 있습니다.

첫째, FW는 웹 디자인에 중점을 두고 있으며 지나치게 복잡한 PS 효과를 만드는 데 적합하지 않습니다. FW CS5의 PS 필터를 기대할 수 있습니다.
둘째, FW의 편집 방법은 AI와 유사합니다. PS와 같은 픽셀 셰이딩 환경에서 작업하는 데 익숙하다면 이 튜토리얼을 무시해도 됩니다.

다음으로, 모든 사람이 이해하기 쉽도록 비교적 표준적인 아이콘을 복사하여 설명하겠습니다.

아래 사진은 국내 유명 eico 디자인으로 제작된 아이콘 세트입니다. 튜토리얼의 테마로 인해 이 아이콘에 몇 가지 세부 사항을 추가하므로 최종 복사 결과가 원본 이미지와 다를 수 있음을 미리 설명하겠습니다.

01단계

참조로 복사하려는 아이콘을 잘라내고 레이어를 잠급니다. 여기 FW의 경로 패널은 Fireworks CS4에서 추출되었지만 CS3에 포함된 모든 기능을 사용하기 때문에 후속 작업에는 영향을 미치지 않습니다.

02단계

둥근 사각형 도구를 사용하여 샘플 이미지와 유사한 둥근 사각형을 그리고 4개의 둥근 모서리 제어점을 사용하여 둥근 모서리의 반경을 조정한 다음 Ctrl+Shift+G를 눌러 모양을 분리합니다.

그런 다음 첫 번째 둥근 사각형을 복사하고 흰색 화살표 도구를 사용하여 네 방향으로 한 픽셀을 이동한 다음 그림과 같이 두 개의 둥근 사각형을 만듭니다(둥근 모서리에 있는 8개의 노드는 흰색 화살표로 처리됩니다. 정렬됨).

가상 테두리 때문에 죽기 때문에 스트로크를 사용하여 직사각형에 외부 테두리를 추가할 수 없습니다. 둥근 사각형 도구를 사용하여 그린 둥근 사각형에 스트로크가 아닌 가상 가장자리가 있는 경우 노드를 분산시키고 검은색 화살표 도구를 사용하여 경로를 선택한 다음 경로 패널에서 점을 픽셀로 둥글게 클릭하여 경로의 모든 노드를 반환합니다. . 픽셀 교차점에 위치를 지정합니다(흰색 화살표 도구를 사용하여 개별 원점 이동을 위한 노드를 선택할 수도 있음).

03단계

크고 둥근 직사각형을 복사하여 상단 레이어에 놓고 흰색 화살표와 Shift+화살표 키를 사용하여 역삼각형을 만든 다음 복사하여 위쪽 역삼각형을 선형 그라데이션으로 채우고 아래쪽 역삼각형을 단색 갈색으로 채웁니다. 1px 페더링을 설정합니다.

04단계

흰색 화살표를 사용하여 중앙에 표시된 노드를 선택한 다음 키보드의 화살표 키를 사용하여 두 픽셀 아래로 이동하여 봉투를 더 길게 보이게 만듭니다(여기서 단일 아이콘은 전체 스타일에 의해 제한되지 않기 때문입니다).

05단계

앞서 그린 그라데이션 채우기 역삼각형을 수직으로 뒤집어 복사하여 배치하면 아래 그림과 같습니다. 두 개의 역삼각형은 위에서 아래로 1px 조금 넘게 분리되어 있습니다. 흰색 화살표 도구를 사용하여 어두운 갈색 역삼각형 위에 있는 4개의 노드를 선택하고 보조선으로 마우스를 드래그하여 노드를 0.3~0.5픽셀 위로 이동하면 먼저 어두운 갈색이 덜 흐릿하게 보입니다. 다시 한번, 가능한 한 빨리 테두리에 스트로크를 사용한다는 아이디어를 포기하십시오. 이것은 포토샵이 아닙니다.

06단계

참고로 샘플 이미지의 아이콘 위에는 하이라이트가 있는데, 이는 일반적인 단일 픽셀 복사 하이라이트가 아닙니다(약 2픽셀의 하이라이트 위의 1px 하이라이트가 아래의 1px보다 밝습니다). Ellipse와 같은 타원형 라디에이터가 이 효과를 얻습니다.

아래쪽 둥근 직사각형을 두 번 선택하여 복사합니다. 위치를 이동한 후 서로 2px 떨어진 두 개의 둥근 직사각형을 얻습니다. 두 개의 직사각형 경로를 빼는 방법을 사용하여 새 경로를 얻고 Ellipse(흰색 0)로 채웁니다. -100 투명도), 마지막으로 이 하이라이트 경로의 오버레이 모드를 오버레이로 설정합니다.

07단계

하단에 1px 하이라이트를 추가합니다.

08단계

현재 결과는 아래와 같습니다. 잠시 쉬면서 차를 마셔보겠습니다.

09단계

일시적으로 배경을 흰색으로 변경하면 이전 역삼각형에서 사용된 페더링으로 인해 봉투 양쪽에서 일부 픽셀이 약간 오버플로된 것을 볼 수 있습니다.

이러한 픽셀을 처리하는 방법에는 두 가지가 있는데, 하나는 비트맵으로 병합하는 것이고, 다른 하나는 경로를 유지하면서 나중에 편집할 수 있기 때문에 후자를 선호합니다. 작업은 그림과 같습니다. 아래에:

10단계

어두운 배경으로 돌아가서 봉투의 측면이 약간 평평하다고 느끼십니까? 막대 또는 방사형 채우기를 사용하여 효과를 추가해 보겠습니다.

11단계

다음으로, 봉투의 위쪽 및 아래쪽 삼각형에 단일 픽셀 하이라이트를 추가합니다. 경로 빼기 작업(Punch Path, 수정 – 경로 결합 메뉴에서 찾을 수 있음)은 이전에 반복적으로 논의되었으므로 설명하지 않겠습니다. 여기서는 아래와 같이

12단계

같은 방법으로 아래 삼각형에 하이라이트를 추가합니다.

13단계

배경이 더 어두운 색이므로 광선을 추가하는 것을 고려해 볼 수 있습니다. 여기서는 FW의 투영이나 발광 필터를 사용하지 않고 Path를 사용합니다. 왜냐면 개인 취향에 따라 제어하기가 더 쉽기 때문입니다. 페더링 없이 투명도 30을 사용하여 봉투의 아래쪽 둥근 사각형보다 위쪽, 아래쪽, 왼쪽 및 오른쪽이 1px 더 큰 새로운 둥근 사각형을 만들 수 있습니다.

14단계

그런 다음 아래에 1px 강조 표시를 추가하십시오.

15단계

이쯤 되면 기본적으로 아이콘이 완성되고, 이제 폴리싱 단계에 들어갑니다. 모든 레이어를 선택하고 "복사"한 다음 빠르게 Ctrl+Alt +Shift+Z를 눌러 레이어를 비트맵으로 병합한 다음 오버레이 모드를 오버레이로, 투명도를 60으로 설정하여 채도를 확인할 수 있습니다. 아이콘의 정도와 대비가 향상되었습니다. 이것은 빠른 연마를 위해 제가 개인적으로 선호하는 방법이지만 항상 적용 가능한 것은 아닙니다. 곡선, 대비, 그리고 채도.

마치다

최종 효과(봉투 아래의 삼각형은 경로를 투영으로 사용함)