Adobe Fireworks 와이어프레임 리소스 및 자습서

Adobe Fireworks는 와이어프레이밍 및 프로토타이핑을 위해 웹 디자이너 사이에서 가장 인기 있는 응용 프로그램 중 하나입니다. 다른 그래픽 편집기보다 Fireworks를 사용하여 프로토타이핑하는 데는 여러 가지 이유가 있지만 이 게시물에서는 다루지 않을 것입니다(A Case for Adobe Fireworks against Photoshop and Illustrator).

이 게시물은 Fireworks의 첫 단계를 밟고 싶지만 어디서부터 시작해야 할지 잘 모르는 디자이너를 위한 포괄적인 출발점이자 참고 자료입니다.

Fireworks를 와이어프레이밍에 사용하기 시작하면 다시는 돌아오지 않을 것임을 약속합니다.

Fireworks 와이어프레임 자습서 및 Adobe 리소스

Fireworks로 표준 준수 웹 디자인 만들기 →
이 문서에서는 CSS 내보내기 기능의 향상된 기능을 사용하여 표준 호환 디자인을 만드는 방법을 보여줍니다.

CSS 및 이미지 내보내기를 위한 Fireworks 웹 디자인 목업 설정 →
이 기사에서는 먼저 Fireworks 웹 디자인 목업을 웹으로 이동할 준비를 할 때 도움이 될 수 있는 주요 도구를 나열합니다. 그런 다음 각 도구를 자세히 검토하고 몇 가지 예를 제공합니다. 이 기사는 간단한 웹사이트 디자인 목업 예제(PNG 파일 제공)로 계속됩니다. 마지막으로 이 기사는 내보낸 CSS/HTML 코드를 검토하고 빠르게 최적화하는 데 도움이 됩니다.

Fireworks CS4로 웹 사이트 응용 프로그램 디자인 →
이 자습서에서는 원본 페이지 디자인 스케치에서 와이어프레임 개발, 최종 디자인 만들기에 이르기까지 Adobe Fireworks에서 웹 사이트 응용 프로그램을 만드는 프로세스를 보여줍니다. 이 문서에서는 Fireworks 내에서 웹 사이트와 디자인을 즉시 제작할 수 있도록 모든 필수 도구와 지침을 다룹니다.

Fireworks에서 미리 작성된 CSS 템플릿 →
이 문서에서는 제공된 샘플 PNG 템플릿을 사용하여 Fireworks의 CSS 내보내기 기능을 최대한 활용하는 방법을 설명합니다.

Fireworks에서 대화형 프로토타입 만들기 →
Fireworks 팁과 트릭 비디오. 이 에피소드에서는 대화형 프로토타입을 만드는 방법을 배웁니다.

Fireworks 와이어프레임 자습서

Fireworks: PDF의 대화형 프로토타입

이 튜토리얼에서는 PDF 형식의 Fireworks에서 직접 대화형 프로토타입을 생성하는 방법을 설명합니다. 이러한 종류의 프로토타입은 클라이언트와의 레이아웃 승인에 매우 유용하거나 디자인 개발 팀 간의 커뮤니케이션을 더 쉽게 만들 수 있습니다.

Fireworks에서 프로모션 iPhone 앱 웹사이트 와이어프레임 구축

이 튜토리얼에서는 Fireworks에서 iPhone 응용 프로그램 웹 사이트용 와이어프레임을 만드는 디자인 프로세스를 다룹니다. Fireworks에 익숙하지 않은 사람들에게는 Fireworks를 사용하여 웹 디자인 프로젝트를 와이어프레임하는 데 좋은 출발점이 될 것입니다. 이 자습서는 여러 부분으로 구성된 시리즈의 첫 번째 부분입니다.

Fireworks를 사용하여 기본 와이어프레임 만들기

이 튜토리얼에서는 Fireworks를 사용하여 자신만의 와이어프레임을 만드는 방법을 알려줍니다. 와이어프레임 내에서 필요한 웹 요소 및 페이지 링크의 기본 사항을 다룹니다. 이 튜토리얼에서 구축되는 사이트는 화려하지 않지만 단순함 때문에 사용자는 내 사진에 집중할 수 있습니다.

Fireworks 와이어프레임 비디오 자습서

불꽃놀이 프로토타이핑(1/3)

이 비디오에서는 간단한 웹사이트를 프로토타이핑할 때 상태, 메뉴 및 하위 메뉴가 있는 탐색 모음을 만드는 방법을 배웁니다.

불꽃놀이 프로토타이핑(2/3)

이 비디오에서는 웹사이트의 프로토타입을 만들 때 페이지를 연결하는 방법을 배웁니다.

불꽃놀이 프로토타입 제작(3/3)

이 비디오에서는 이미지 교체 또는 롤오버 분리를 만들고 상호 작용을 추가하는 방법을 배웁니다.

Fireworks 와이어프레임 리소스 및 템플릿

주황색 명령

Orange Commands는 웹 디자이너의 삶을 더 쉽게 만들고 워크플로를 더 빠르게 만들어주는 Fireworks용 명령 모음입니다. Orange Commands는 무료이며 오픈 소스입니다.

Fireworks 미니 웹 와이어프레이밍 키트

Fireworks 미니 웹 와이어프레이밍 키트는 웹 와이어프레이밍에 필요한 모양만 제공합니다. Fireworks 자체가 프로토타이핑 및 와이어프레이밍을 위한 훌륭한 도구이기 때문에 다른 모든 경우에는 기본적으로 Fireworks를 사용할 수 있습니다. 파일은 Fireworks 고유의 PNG 형식이며 Fireworks에서 모든 모양을 편집하고 크기를 조정할 수 있음을 의미합니다.

와이어프레임 라이브러리 기호

이것은 풍부한(심볼 속성에서 변경할 수 있는 항목이 있음을 의미) 기호 집합입니다. 이 세트는 손으로 그린 ​​와이어프레임 항목처럼 보입니다. 색 구성표는 청사진 잉크처럼 보입니다.

Fireworks 공용 라이브러리 스텐실

Fireworks용 다운로드 가능한 스텐실 키트입니다. 키트는 공통 라이브러리 형식입니다.

흑백 회사 웹사이트 템플릿

회사 웹사이트에서 사용하도록 설계된 와이어프레임 템플릿입니다. 디자인은 심플한 블랙&화이트입니다.

Android용 불꽃놀이 템플릿

Android용 Fireworks 템플릿입니다. Android 사용자 인터페이스 요소가 벡터 이미지로 다시 그려졌습니다. 폴더에서 요소는 대부분 Android 어휘에 따라 레이블이 지정되었습니다.

불꽃놀이용 블랙베리 목업 템플릿

BlackBerry용 Fireworks 템플릿입니다. 템플릿은 해상도가 640×480인 블랙베리 단말기용으로 제작되었지만 모든 UI 요소가 벡터 이미지이기 때문에 쉽게 크기를 조정할 수 있습니다.

Fireworks용 제스처 라이브러리

터치 제스처 참조 가이드는 터치 기반 사용자 인터페이스에서 작업하는 소프트웨어 디자이너와 개발자를 위한 고유한 리소스 세트입니다. Fireworks의 경우 제스처 세트가 풍부한 기호로 재현됩니다.

유용한 불꽃놀이 자료

웹포트 →
Webportio는 Fireworks용 그래픽 리소스입니다. 모든 그래픽 파일은 구조가 잘 되어 있어 탐색이 쉽습니다. 삽화는 벡터 기반이며 필요에 따라 쉽게 사용자 정의할 수 있습니다. 그리고 모든 파일은 무료로 사용할 수 있으며 비상업적 또는 상업적 용도로 사용할 수 있습니다.

불꽃놀이 존 →
Fireworks Zone은 튜토리얼, 기사, linkbase, 명령, 스타일, 텍스처, 패턴, 자동 모양이 있는 Fireworks 애호가를 위한 리소스입니다. 웹 사이트에 따르면 웹에서 가장 크고 정기적으로 업데이트되는 Fireworks 사이트 중 하나입니다.

추가 읽기

와이어프레임: 팁, 도구 및 기법 →
와이어프레이밍에 사용할 수 있는 몇 가지 관련 도구, 기술 및 팁을 살펴보는 한 쌍의 기사입니다. 이 두 기사 중 첫 번째 기사에서는 도구에 대한 개요를 제공하고 다음 기사에서는 와이어프레이밍 프로세스를 원활하게 하기 위한 몇 가지 팁과 기술을 다룹니다.

Fireworks로 와이어프레임을 만드십니까?

당신에게: Fireworks로 와이어프레이밍을 하시나요? 그렇다면 아래 댓글 섹션에서 좋아하는 튜토리얼, 리소스 및/또는 템플릿을 자유롭게 공유하십시오.