[Mockup] 반응형 홈페이지 목업

사이트 목업 썸네일

목업 Mock-up

실제품을 만들어 보기 전, 디자인의 검토를 위해 실물과 비슷하게 시제품을 제작하는 작업의 프로세스, 결과물을 통칭한다.
산업 디자인, 출판, UI / UX 디자인에서 주로 사용한다.

 

 

 

1. 파일 다운로드

아래의 링크에 들어가서 첨부파일을 다운로드한다. 

바이러스가 의심이 되면 하단에 있는 출처 사이트에서 다운로드한다.

 

↓↓↓↓다운로드 링크↓↓↓↓

 

https://drive.google.com/file/d/1WjIc7DBoxnh7KAPk73Jm_bq1kd4OTFcq/view?usp=sharing

web-mockup.psd

 

2. 파일 열기

다운로드한 파일을 실행한다.

 

 

다운로드 받은 파일을 실행을 하고 나면 위에처럼 셋팅이 된다.

 

3. 작업 영역

레이어에서 "iPhone","MacBook","iPad","info"부분이 우리가 작업을 해야 할 영역입니다.

 

각 폴더에 "PUT YOUR SCREEN HERE" 레이어를 더블클릭하여 들어가면 해당하는 화면을 수정할 수 있습니다.

 

각 영역에 맞게끔 이미지를 배치 한 뒤,

 

저장을 하면 원래 있던 레이에어 적용이 된다.

 

왼쪽에서 부터 아이폰,아이패드,맥북

 

"info"폴더에서는 PSD에 들어 있는 문구들을 수정할 수 있다.

 

 

4. 정보

 

만든이	Pixeden.com
파일 타입	PSD
레이어 구분	구분됨
스마트 오브젝트	사용함
크기	5000X3400
해상도(DPI)	300dpi
저작권	100% 자유(개인용,상업용)

 

파일이 도움이 되었다면 공감과 덧글 부탁드립니다.

 

5. 참고자료(출처)

 

https://www.mockupworld.co/free/responsive-web-design-showcase-mockup/

Responsive Web Design Showcase Mockup | Mockup World

---

추가설명 #2021.05.25

목업은 예시 페이지를 만드는데 사용합니다. 

저의 블로그를 목업에 입혀보았습니다.

 

주로 포트폴리오를 만드는데 사용합니다.

홍보용이지요 ㅎㅎㅎㅎ

 

저작권없는 파일이에요 자유롭게 사용하셔도 됩니다.