{"id":639,"date":"2019-06-30T16:14:45","date_gmt":"2019-06-30T09:14:45","guid":{"rendered":"https:\/\/webvocuc.com\/blog\/?p=639"},"modified":"2021-09-15T16:13:23","modified_gmt":"2021-09-15T09:13:23","slug":"10-cong-cu-tao-mockup-website-phan-1","status":"publish","type":"post","link":"https:\/\/webvocuc.com\/blog\/10-cong-cu-tao-mockup-website-phan-1.html","title":{"rendered":"10 c\u00f4ng c\u1ee5 t\u1ea1o mockup website ph\u1ea7n 1"},"content":{"rendered":"

Mockup website<\/strong><\/a>\u00a0s\u1ebd gi\u00fap cho b\u1ea3n thi\u1ebft k\u1ebf c\u1ee7a b\u1ea1n tr\u1edf n\u00ean chuy\u00ean nghi\u1ec7p h\u01a1n. V\u00e0 c\u00f3 th\u1ec3 gi\u00fap cho ng\u01b0\u1eddi xem (kh\u00e1ch h\u00e0ng) c\u00f3 th\u1ec3 t\u01b0\u1edfng t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c s\u1ea3n ph\u1ea9m c\u1ee7a m\u00ecnh s\u1ebd nh\u01b0 th\u1ebf n\u00e0o n\u1ebfu n\u00f3 ch\u1ea1y th\u1ef1c s\u1ef1.\u00a0Mockup l\u00e0 nh\u1eefng t\u1eadp tin h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n v\u1edbi m\u1ee5c \u0111\u00edch l\u00e0 gi\u00fap cho c\u00e1c designer c\u00f3 th\u1ec3. M\u00f4 ph\u1ecfng m\u1eabu c\u00e1c m\u1eabu thi\u1ebft k\u1ebf c\u1ee7a m\u00ecnh khi ch\u1ea1y tr\u00ean m\u00e1y t\u00ednh th\u1eadt, \u0111i\u1ec7n tho\u1ea1i th\u1eadt ho\u1eb7c b\u1ea5t k\u1ef3 c\u00e1i g\u00ec \u0111\u00f3 th\u1eadt.<\/p>\n

\"10<\/p>\n

1. Mockup website Adobe Photoshop<\/a>.<\/h2>\n

H\u00e3y b\u1eaft \u0111\u1ea7u t\u1ea1o ra mockup website<\/a> trong l\u0129nh v\u1ef1c thi\u1ebft k\u1ebf h\u00ecnh \u1ea3nh t\u0129nh cho web \u2013 Photoshop. Ph\u1ea7n m\u1ec1m n\u00e0y \u0111\u00e3 \u0111i \u0111\u01b0\u1ee3c m\u1ed9t ch\u1eb7ng \u0111\u01b0\u1eddng d\u00e0i t\u1eeb th\u1eddi kh\u1eafc n\u00f3 l\u00e0m ng\u01b0\u1eddi m\u1eabu th\u1eddi trang tr\u00f4ng g\u1ea7y h\u01a1n.<\/p>\n

Photoshop l\u00e0 ph\u1ea7n m\u1ec1m \u0111\u01b0\u1ee3c nh\u00e0 thi\u1ebft k\u1ebf l\u1ee5a ch\u1ecdn \u0111\u1ec3 t\u1ea1o ra mockup.<\/p>\n

Photoshop v\u1edbi h\u1ec7 th\u1ed1ng l\u01b0\u1edbi, Smart Objects v\u00e0 h\u00ecnh \u1ea3nh vector s\u1ebd cho ph\u00e9p b\u1ea1n th\u1ef1c hi\u1ec7n d\u1ec5 d\u00e0ng h\u01a1n. Trong vi\u1ec7c t\u1ea1o ra mockup website. Ph\u1ea7n m\u1ec1m Photoshop c\u00f3 \u0111\u01b0\u1ee3c l\u01b0\u1ee3ng l\u1edbn ng\u01b0\u1eddi d\u00f9ng y\u00eau th\u00edch nh\u1edd c\u00f3 nhi\u1ec1u l\u1ef1a ch\u1ecdn. Ch\u1ee9c n\u0103ng phong ph\u00fa v\u00e0 t\u00f9y ch\u1ec9nh n\u1ed9i dung nhanh ch\u00f3ng. Nhi\u1ec1u ng\u01b0\u1eddi \u01b0a d\u00f9ng \u1ea3nh pixel v\u1eabn th\u00edch t\u1ea1o m\u1ed9t mockup b\u1eb1ng Photoshop h\u01a1n. So v\u1edbi c\u00e1c ph\u1ea7n m\u1ec1m t\u1ea1o mockup kh\u00e1c.<\/p>\n

2. Mockup website Pixelmator<\/a>.<\/h2>\n

\u0110\u00e2y l\u00e0 m\u1ed9t \u1ee9ng d\u1ee5ng c\u1ee7a Mac s\u1ebd cho ph\u00e9p b\u1ea1n t\u1ea1o ra c\u00e1c h\u00ecnh \u1ea3nh vector c\u0169ng nh\u01b0 ch\u1ec9nh s\u1eeda ch\u00fang m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng v\u00e0 hi\u1ec7u qu\u1ea3. C\u00f3 kh\u00e1 nhi\u1ec1u hi\u1ec7u \u1ee9ng \u1edf \u1ee9ng d\u1ee5ng gi\u00fap b\u1ea1n ch\u1ec9nh s\u1eeda h\u00ecnh \u1ea3nh tuy\u1ec7t \u0111\u1eb9p. V\u00e0 \u0111\u01b0\u01a1ng nhi\u00ean b\u1ea1n s\u1ebd ki\u1ec3m so\u00e1t c\u00e1c ti\u1ebfn tr\u00ecnh c\u1ee7a m\u00ecnh kh\u00e1 ti\u1ec7n l\u1ee3i.<\/p>\n

Pixelmator l\u00e0 m\u1ed9t \u0111\u1ed1i th\u1ee7 \u0111\u1ee9ng sau Photoshop \u0111\u01b0\u1ee3c c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf l\u1ef1a ch\u1ecdn \u0111\u1ec3 t\u1ea1o ra mockup.<\/p>\n

V\u1edbi kho\u1ea3ng th\u1eddi gian ng\u1eafn, Pixelmator l\u00e0 c\u00f4ng c\u1ee5 d\u1ec5 d\u00e0ng h\u01a1n cho nh\u1eefng h\u00ecnh \u1ea3nh \u0111\u01a1n gi\u1ea3n. Tuy nhi\u00ean n\u00f3 kh\u00f4ng th\u1ec3 x\u1eed l\u00fd nh\u1eefng ph\u1ee9c t\u1ea1p nh\u01b0 Adobe Photoshop<\/p>\n

3. Mockup website Sketch<\/a>.<\/h2>\n

Sketch s\u1ebd l\u00e0 m\u1ed9t \u1ee9ng d\u1ee5ng \u0111\u01b0\u1ee3c d\u1ef1ng l\u00ean cho nh\u00e0 thi\u1ebft k\u1ebf theo h\u01b0\u1edbng hi\u1ec7n \u0111\u1ea1i. Gi\u00fap b\u1ea1n ki\u1ec3m so\u00e1t linh ho\u1ea1t v\u00e0 t\u1ed1c \u0111\u1ed9 m\u00e0 b\u1ea1n mu\u1ed1n \u0111\u1ea1t \u0111\u01b0\u1ee3c. \u0110\u00e2y l\u00e0 \u1ee9ng d\u1ee5ng c\u0169ng d\u00e0nh cho Mac nh\u01b0ng Sketch c\u00f3 nhi\u1ec1u l\u1ee3i th\u1ebf trong qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i thi\u1ebft k\u1ebf \u0111\u1ec3 ph\u00e1t tri\u1ec3n. N\u00f3 t\u00edch h\u1ee3p CSS logic t\u1eeb \u0111\u1ea7u v\u00e0 t\u00ednh n\u0103ng t\u1ef1 \u0111\u1ed9ng Slicing \u0111\u1ec3 t\u1ea1o ra nh\u1eefng s\u1ea3n ph\u1ea9m c\u00f3 \u0111\u1ecbnh d\u1ea1ng kh\u00e1c nhau khi xu\u1ea5t File.<\/p>\n

Sketch \u0111\u01b0\u1ee3c t\u1ea1o ra d\u00e0nh ri\u00eang cho k\u0129 thu\u1eadt s\u1ed1 ch\u1ee9 kh\u00f4ng h\u1eb3n ch\u1ec9 l\u00e0 ch\u1ec9nh s\u1eeda h\u00ecnh \u1ea3nh.<\/p>\n

V\u1edbi kh\u1ea3 n\u0103ng t\u00f9y bi\u1ebfn m\u1ea1nh, s\u1ef1 th\u00e2n thi\u1ec7n v\u1edbi code v\u00e0 m\u1ed9t giao di\u1ec7n \u0111\u01a1n gi\u1ea3n v\u00e0 b\u1eaft m\u1eaft. Sketch c\u00f3 th\u1ec3 \u0111\u01b0a b\u1ea1n t\u1edbi b\u1ea3n mockup cu\u1ed1i c\u00f9ng. V\u00e0 l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 chuy\u00ean nghi\u1ec7p \u0111\u01b0\u1ee3c \u01b0a chu\u1ed9ng nh\u1ea5t d\u00e0nh cho UX UI Designer hi\u1ec7n nay.<\/p>\n

10 c\u00f4ng c\u1ee5 t\u1ea1o mockup website ph\u1ea7n 2<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Mockup website\u00a0s\u1ebd gi\u00fap cho b\u1ea3n thi\u1ebft k\u1ebf c\u1ee7a b\u1ea1n tr\u1edf n\u00ean chuy\u00ean nghi\u1ec7p h\u01a1n. V\u00e0 c\u00f3 th\u1ec3 gi\u00fap cho ng\u01b0\u1eddi xem (kh\u00e1ch h\u00e0ng) c\u00f3 th\u1ec3 t\u01b0\u1edfng t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c s\u1ea3n ph\u1ea9m c\u1ee7a m\u00ecnh s\u1ebd nh\u01b0 th\u1ebf n\u00e0o n\u1ebfu n\u00f3 ch\u1ea1y th\u1ef1c s\u1ef1.\u00a0Mockup l\u00e0 nh\u1eefng t\u1eadp tin h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n v\u1edbi m\u1ee5c \u0111\u00edch l\u00e0 […]<\/p>\n","protected":false},"author":2,"featured_media":641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[56],"class_list":["post-639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-online-marketing","tag-mockup-website"],"jetpack_featured_media_url":"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/10\/10-cong-cu-tao-mockup-website-phan-1-02_mxdmxf.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/comments?post=639"}],"version-history":[{"count":3,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/639\/revisions"}],"predecessor-version":[{"id":4412,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/639\/revisions\/4412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media\/641"}],"wp:attachment":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media?parent=639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/categories?post=639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/tags?post=639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}