상업적으로 사용가능한 예쁜 무료 목업을 찾기란 쉽지 않다. 디자이너라면 내 디자인을 실제 제품에 적용하여 검토를 하게 되는 과정이 필요하므로 한번쯤은 무료 목업 소스(free mock-up)를 찾아서 웹서핑을 한 적이 있을 것입니다. 하지만 이러한 무료 목업 소스들의 라이센스를 확인해보면 개인적인 검토용이나 포트폴리오용으로는 사용해도 무방하지만 상업적으로 사용가능한 것을 찾기가 쉽지 않습니다. 그래서 간단하게 목업을 제작하는 방법을 알려드리고자 합니다. 상업적으로 사용가능한 이미지 소스들은 비교적 많기 때문에 좋은 이미지와 약간의 포토샵(Photoshop) 지식만 있다면 누구나 제작 가능합니다.
목업으로 쓸 이미지는 아래 Pixabay 링크에서 다운받으 실 수 있습니다. 2. 포토샵에서 목업으로 쓸 이미지 파일을 열어줍니다. (Ctrl+O) 3. 빨간 점선 안에 ‘내 디자인 시안 이미지’를 넣을 예정이므로 비슷한 크기로 어림잡아 사각형 도구(Rectangle Tool / 단축키 U)를 사각형을 그려주세요. 사각형 그릴 때 옵션은 모양(Shape)으로 합니다. 4. 레이어 패널(layer)에서 사각형 레이어의 오른쪽 버튼을 클릭하여 고급개체로 변환(Convert To Smart Object)을 해줍니다. 이러한 작업을 하는 이유는 고급개체로 변환하게 되면 원본을 손상하지 않고 크기 변형이 가능하기 때문입니다. 5. 목업 이미지가 살짝 보여야 크기 및 모양 변형이 쉽기 때문에 레이어 패널에서 사각형 레이어의 불투명도(opacity)를 20%~60% 사이로 조정해줍니다. 불투명도 조절6. [편집(Edit)] — [자유변형(Free Transform Tool / Ctrl+T)] 를 사용하여 크기 및 기울기를 목업 이미지에 맞게 조절합니다. 그 후 다시 사각형 레이어의 불투명도(opacity)를 100%로 조정해줍니다. 자유변형(Ctrl + T)을 이용해 크기 및 기울기 맞추기7. 레이어 패널에서 사각형 레이어 패널의 고급 개체 아이콘(Smart Object)을 더블 클릭 합니다. 그러면 사각형 원본이 있는 새로운 파일이 열립니다. 8. ‘내 디자인 시안 이미지’ 를 사각형 파일에 불러와줍니다. ( 내 디자인 시안 이미지 파일 열기(Ctrl + O) → 전체선택 (Ctrl + A) → 복사 Ctrl + C → 사각형 파일에 붙여넣기 Ctrl + V ) 9. [편집(Edit)] — [자유변형(Free Transform Tool / Ctrl+T)] 를 사용하여 내 디자인 시안 이미지를 사각형 크기에 맞춰 편집합니다. 그 후 저장 (Ctrl +S) 하고 사각형 파일을 닫아줍니다. 10. 목업이 얼추 완성 되었지만 좀 더 자연스럽게 해보겠습니다. 완성 되었지만 배경 이미지에 은은한 음영 때문에 자연스럽지가 않다.11. 새 레이어(New Layer / Shift + Ctrl + N)에 부드러운 원 브러쉬(Soft Brush) 선택 후 불투명도(Brush opacity)를 약 5~20%로 조절하여 이미지에 어울리도록 블랙 컬러(Black)를 칠해줍니다. 브러쉬 크기는 너무 작지 않게 150px 이상으로 합니다. 파란 영역에 블랙컬러를 브러쉬로 칠해주었다.12. 레이어 패널(Layer)에서 브러쉬 칠한 레이어를 사각형11 레이어 기준으로 클리핑 마스크를 적용해줍니다. (브러쉬 칠한 레이어에 Ctrl + Alt + G 하거나 레이어 패널에서 두 레이어 사이에 Alt 키를 누른채 클릭하면 가능) 13. 자연스러운 목업이 완성되었습니다. 14. 목업을 PSD 파일로 저장해놓으면 사각형 레이어의 고급개체(Smart Object)로 더블클릭하여 들어가 내 시안 이미지만 수정하면 되므로 편리하게 이용할 수 있습니다. 간단한 목업을 제작해보았습니다. 이러한 기술들을 활용하면 유료 목업보다 더 퀄리티있는 목업도 제작 가능합니다. (하지만 유료 목업이 시간적인 면에서는 편리하다...) 내 디자인과 어울리는 목업을 제작하는데 이 글이 도움이 되길 바랍니다. - 본 글은 엑스테일즈(Extales)의 zkdpxp11에 의하여 작성되었습니다. "목업(mock-up)이란 제품을 실제로 제작하기에 앞서 좀 더 실제적으로 검토하기 위해 나무 또는 이와 비슷한 것으로 만드는 실제 크기의 모형 예를 들어 디자인을 하고 나면 이게 실제로 출력되거나 적용이 됐을 때의 느낌을 미리 확인하고 검토하기 위해서 사진으로나마 실제 크기의 모형에 적용하는 것이다." 디자인을 하게 되면 실제로 적용하기 전에 내 디자인을 스스로 검토하기 위해서 목업이란 것을 활용해야 한다. 좋게 디자인을 해도 목업에 적용해보면 느낌이 이상할 때도 있고 디자인을 별로 못했다고 생각을 했어도 목업에 적용해보면 느낌이 좋을 때가 있다. 그래서 디자인을 하면 목업 활용은 필수적이라고 생각을 한다. 물론 디자인뿐만 아니라 모든 제작활동에는 목업이란 개념이 필수적으로 들어가야 된다고 생각한다. 그래서 오늘은 내가 처음에 무료 목업 사이트들을 알아갈 때 찾느라고 고생했지만 이렇게 정리하고 공유해서 처음으로 시작하는 분들은 조금이나마 시간을 단축시키길 하는 바람으로 정리해본다. 내 기준으로 정리를 하는 것이니 더 좋은 곳이나 이상한 부분이 있으면 말씀해주시길 바랍니다. 1.https://goodmockups.com/ Good Mockups | Best Free Mockup PSD Files for Designers Good Mockups is an online podium to bring before you the high quality, hand-picked and absolutely free mockups that you have been probing everywhere. goodmockups.com  내가 무료 목업을 찾으려고 하면 가장 처음으로 들어가는 사이트. 브랜딩 위주 / 아웃도어(배너, 간판 등) 위주 / 제품 위주 등등으로 정리를 아주 잘해놓았다. 다른 곳들은 정말 거대하게 무료 목업, 무료 텍스트, 무료 그래픽 등 정말 많은 것들이 있어서 헷갈리고 어지럽지만 이 사이트는 무료 목업만 올려져 있기 때문에 굉장히 편하다고 생각한다. 2.https://www.behance.net/ Top Creative Work On Behance Showcase and discover creative work on the world's leading online platform for creative industries. www.behance.net 어도비 프로그램을 쓰고 있거나 디자인을 알고 있다고 누구나 알법한 사이트. 어도비사의 비헨스 포폴 공유방이다. 물론 작품 위주로 많이 올라가지 있지만 여기서도 목업들을 찾을 수 있다. 검색란에 내가 찾고 싶은 목업 즉 내가 로고 목업을 찾고 있다면 logo mock up이라고 치면 많은 정보들이 나온다. 무료를 찾고 있다면 문장 앞에 free를 붙여서 쓰면 무료 목업들도 많이 나오게 된다. 영어로 검색을 해야 하는 건 누구나 알 테니 따로 말하진 않겠습니다. 3.https://graphicburger.com/mock-ups/ 찾아들어가기 힘든 사이트 그래픽 버거입니다. 무료 목업 사이트들에 나와있는 목업들 중에도 다른 곳에 올려져 있는 것들이 링크되어있는 게 많은데 목업들을 찾다 보면 퀄리티 있는 목업들은 이 사이트에 많이 올려져 있는 경우가 많다. 하지만 이 사이트에 들어가게 되면 항상 사이트를 찾을 수 없다고 떠서 막막했었는데 아마 특정 나라 빼고는 차단이 걸려있는 것 같다. 이 차단을 풀려면 구글에 touch vpn이라고 치면 처음 글에 올라오는 구글 크롬 확장 프로그램을 다운로드하면 차단이 걸려있는 걸 풀면서 이 사이트에 접속할 수 있게 해 준다. touch vpn은 바이러스가 없고 구글 웹스토어에서 제공하는 확장 프로그램이니 안심하고 사용해도 된다. 한번 깔고 나면 다음부터 그냥 클릭 한 번으로 키고 끌 수 있으니 편안하게 사용 가능하며 이 확장 프로그램은 구글 크롬을 켰을때 오른쪽 상단에 점 세개의 아이콘에 들어가서 도구 더보기에 확장 프로그램을 누르면 찾을 수 있다. 당연히 구글웹스토에서 바이러스 되어있는 걸 제공할 수 있게 해 줄리는 없겠지? 그렇다고 이걸 사용해서 불법적인 사이트에 들어가서 바이러스를 얻게 되면 개인의 몫 고품질의 목업들이 그래픽 버거에 많으니 귀찮더라도 목업들을 찾기 위해선 꼭 한 번씩 들어가서 확인해본다. 4.https://www.freepik.com/free-psd/mockup Mockup PSD, +24,000 free PSD files Mockup PSD for free. Download now and use them for personal and commercial use, we have thousands of free graphic resources available for you www.freepik.com 정말 방대한 정보들이 많이 있는 사이트. 무료 목업 페이지는 psd메뉴에 mockup을 찾아들어가면 찾을 수 있다. 너무 방대하다 보니 어지럽고 헷갈릴 수도 있지만 그만큼 많은 정보를 접할 수 있다. 다만 무료 목업과 유료 목업이 있으니 잘 구분하고 사용하길 바란다. 보통 마음에 드는 목업이 있어서 들어가기 전에 사진 외쪽 상단에 왕관 표시가 있으면 프리미엄 목업이라고 해서 유료 목업이니 원한다면 구매해서 사용할 수도 있다. 5.https://www.free-mockup.com/all-templates/ All Free Mockups | Free Mockup The biggest source for Free photorealistic Mockups online! All free mockups consist Smart Object for easy edit. Free for download. www.free-mockup.com 여기도 1번과 같이 무료 목업을 찾으려고 하면 자주 들어가는 사이트이다. 무료 목업들로만 이루어져 있고 정리가 제품에 맞게 잘 되어있으니 잘 활용하면 좋은 곳이다. 6. https://mockuuups.studio/collection Collection mockuuups.studio 이 사이트는 전자기기 목업들로만 이루어져 있다. 아이폰 , 애플 워치 , 아이패드, 삼성폰, 아이맥 등등 전자제품 목업들로만 이루어져 있는데 UI/UX 디자인이나 브랜딩 디자인할 때 활용하면 아주 좋은 사이트이다. 이렇게 개인적으로 제일 많이 활용하는 무료 목업 사이트 여섯 개를 정리해보았다. 물론 이 사이트들 말고도 좋은 사이트들도 많고 여기서도 마음에 들지 못하면 다른 사이트들도 둘러보면서 필요하다면 구매하면서까지 활용하고 있다. 나머지는 내가 자주는 아니지만 알고 있고 가끔 사용하는 사이트들을 정리해본다.
Premium & Free Assets for Designers Premium and free quality design resources & assets for designers like mockups, templates, resumes, fonts, icons infographics & Ui kits. www.graphicpear.com 무료도 몇 개 있지만 대부분 유료다. 하지만 퀄리티가 굉장히 높다.
Download Stock Photos, Fonts & Templates with Envato Elements Browse through thousands of stock photos, fonts and web templates. With unlimited downloads of all of our items, your project will be perfect in no time. elements.envato.com 목업 이외에도 방대한 정보들이 있는 사이트. 망원경 아이콘에 들어가서 graphic templates에 들어가면 목업들이 있다. 너무 많다 보니 헷갈리고 어지러워서 잘 들어가질 않는다.. ㅎ
Mockup World | The best free Mockups from the Web Tons of free and legal, fully layered, easily customizable photo realistic PSDs: Ready to use in your projects, app showcases and presentations! www.mockupworld.co 여기도 나름 무료도 정리도 잘되어있다. 정말 좋지만 나만의 순위에서는 약간 벗어났다..
Smartmockups - Free product mockup generator Create stunning products screenshots without Photoshop smartmockups.com 여기는 목업들로만 이루어져 있는 사이트이지만 퀄리티 있는 대부분의 목업들은 모두 유료라 잘 사용하지 않는다.
PSD Repo - Free Quality PSDs Available For Download Free PSD & Adobe Xd templates designed by talented creatives who choose to share their work with the rest of the community. psdrepo.com 역시 목업들로만 이루어져 있는 사이트지만 목업들이 정리가 잘 안되어있어 아쉽다. 페이지 하나하나 넘어가면서 찾아봐야 된다는 단점뿐이다.
Mockup Templates Archives - GraphicsFuel www.graphicsfuel.com 여기도 사이트가 좀 방대하다. 너무 많은 정보들이 있어서 어지러운 편이다.
Psd, premium icons & free web design resources for designers — latest freebies by PixelBuddha. No results found for the keyword! pixelbuddha.net 여기도 방대한 사이트! freebies목록에 mockup패널에 들어가면 찾아볼 수가 있다. 퀄리티 있는 목업들도 많은 편. 다만 내 메일을 치고 내 메일로 들어가서 다운을 받아야 하는 귀차니즘이 발생한다.
Mockups – Free Design Resources Handpicked free mockups to make your presentations stand out. Ranging from print, apparel, packaging, screen, logo, and more. freedesignresources.net 많은 목업들이 있지만 모든 목업이 단 한 군데에만 있어 종류별로 정리가 되어있지 않아 아쉬운 사이트다. 이렇게 내가 알고 있는 모든 목업 사이트들을 정리해봤다. 내가 생각하기에 굉장히 편안하고 좋은 사이트들만 구체적으로 적어놨지만 링크 주소만 올려놓은 사이트들도 대부분 좋고 괜찮으니 한 번씩 들어가서 확인해보길 바란다 . 목업을 찾기 시작하려는 분들이 조금이나마 도움이 되었으면 좋겠다. 오늘도 우연히 들러주셔서 감사합니다. [25의 정보] '남에게 어떻게 보이느냐'에만 집착하는 삶이야말로 '나'이외에는 관심이 없는 자기중심적인 생활양식이다. -'미움받을 용기'책 중에서 |
키링 목업 PSD - kiling mog-eob PSD
저작권 © 2024 moicapnhap Inc.
