Social Icons

Thứ Ba, 19 tháng 1, 2016

Thiết kế giao diện menu của shop cafe từ Scratch với Photoshop và InDesign - Phần 1



Hi tất cả mọi người, lần này tôi sẽ hướng dẫn cho bạn về việc tạo ra một thực đơn sẵn sàng để in tập sách cho một cửa hàng cà phê tưởng tượng có tên là "Violet Coffee." Trong hướng dẫn này bạn sẽ học cách mockup  sẵn sàng để in nền và một vài đối tượng bổ sung, trong đó sẽ được đưa vào sau này trong Adobe InDesign để hoàn thành mảng này. Bạn sẵn sàng chưa?

Các công việc trong loạt bài hướng dẫn này là sự chuẩn bị tuyệt vời cho việc tạo ra loại công việc này cho khách hàng. Bạn cũng có thể cân nhắc việc đưa tài năng đồ họa của bạn để làm việc bằng cách thêm thiết kế độc đáo mẫu thực đơn thức ăn  uniquely designed food menu template của riêng bạn . Và nếu bạn đang dự án của khách hàng có thời hạn chặt chẽ hoặc ngân sách hạn hẹp, có rất nhiều mẫu thực đơn thức ăn food menu templates để lựa chọn.

Trước khi Bắt đầu

Hướng dẫn này nhằm mục đích là một hướng dẫn cho những người bắt đầu từ thiết kế in ấn, trong này chúng tôi sẽ bao gồm một số đối tượng quan trọng như: thiết lập tài liệu, kích thước, bố trí và tỷ suất lợi nhuận, làm việc với màu sắc, thêm chữ và thậm chí in ấn các đoạn.

Tôi sẽ chia nó thành hai phần, một phần đầu tiên này là về việc tạo ra nền tảng cho các tờ đơn và thêm một vài đồ họa bổ sung sử dụng Adobe Photoshop, mà sẽ được thêm vào sau này vào InDesign để hoàn thành sản phẩm. Phần thứ hai là về việc thêm các yếu tố văn bản trong Adobe InDesign, mock-up một sẵn sàng để in tài liệu  cuốn sách nhỏ .
Chúng tôi sẽ làm việc trong một kịch bản tưởng tượng nơi mà một khách hàng "X" cung cấp cho chúng tôi một vài hình ảnh và tài liệu Word với văn bản các cửa hàng cà phê và công việc của chúng tôi là để làm cho nó trông thật đẹp để in ấn.

Hãy nhớ rằng, bút và giấy đầu tiên! Dự thảo những gì bạn muốn đạt được và làm thế nào bạn muốn làm cho nó. Dưới đây có một dự thảo nhanh chóng mà tôi đã làm, đó sẽ là điểm khởi đầu của thiết kế. Sẽ có hai trang, mặt trước và sau.

Trên trang trước, chúng tôi sẽ có bìa và bố trí lại bố cục, và trên trang trở lại chúng tôi sẽ có văn bản menu thực tế. Việc thiết kế sẽ được gấp lại như một tập sách. Chúng tôi sẽ sử dụng màu tím và màu đen cho nền và văn bản chủ yếu là màu trắng. Kích thước giấy có thể thay đổi, tôi đang nghĩ việc làm  mỗi trang sẽ là một kích thước Letter thực tế. Nó phổ biến để in các menu trên quy mô lớn, nhưng phụ thuộc vào bạn. Một khi bạn có ý tưởng về những gì bạn muốn đạt được, đó là thời gian để di chuyển về phía trước.


Bước 1
Chúng tôi sẽ tạo ra một tài liệu Photoshop duy nhất để giả lập các hình nền, tạo ra những hình ảnh với tên công ty và thêm tách cà phê.

Hãy bắt đầu cuộc phiêu lưu này, bạn mở Photoshop và sau đó vào File> New. Trước hết bạn cần phải quyết định kích thước của giấy bạn muốn sử dụng, điều này có thể thay đổi tùy thuộc vào yêu cầu của khách hàng. Lần này chúng ta sẽ bắt đầu với chỉnh kích cỡ chữ chuẩn 8,5 x 11 inch. Nó rất quan trọng để thiết lập độ phân giải ở thời điểm này,  Độ phân giải tối thiểu mà các công trình (trong kinh nghiệm của tôi) là 300 pixels / inch. Và lần này tôi sẽ bắt đầu làm việc trực tiếp với CMYK Color Mode.

Bìa và bìa sau của cuốn sách sẽ là một tờ duy nhất của bài báo đó sẽ được gấp lại sau khi in. Để làm cho nền nhìn đẹp và chất lỏng , chúng tôi sẽ thiết kế nó trong một tài liệu duy nhất, có nghĩa là lặp lại trong các chiều rộng tài liệu để chuyển đổi nó thành một "Double Letter" mảnh giấy.

Nhân đôi kích thước chiều rộng của giấy Letter đến 17 inch (8,5 x 2). Khi bạn kiểm tra lại tất cả mọi thứ được thiết lập đúng, nhấn OK.


Bước 2
Chúng ta cần phải tăng diện tích thiết kế một chút với một Bleed. Các Ruler (Command + R) và thêm bốn Guides (bấm trên các quy tắc và kéo) xung quanh biên giới tài liệu, sau đó vào Image> Canvas Size và tăng tài liệu kích thước 1/8 inch ở phía trên, dưới, trái và phải. Cách nhanh nhất để làm điều này là để thêm 1/4 inch (1/8 x 2) có nghĩa là 0,25 inch với độ rộng phông và chiều cao như trong hình dưới đây. Đảm bảo các điểm neo được đặt tại trung tâm và nhấn OK, bạn nên có canvas của bạn tăng 1/8 inch trên tất cả các đường viền.

Cuối cùng, thêm một Hướng dẫn chính xác đến trung tâm ngang để phân chia tài liệu thành hai cột. Sử dụng các quy tắc để vẽ hai hướng dẫn hơn 1/8 inch để bên trái và bên phải của hướng dẫn, để tạo ra một cái gì đó giống như một khu vực đỏ ở giữa.



Bước 3
Hãy bắt đầu với những thiết kế đồ họa thực tế. Trước hết chúng ta sẽ tạo một layer Gradient Fill, vào Layer> New Fill Layer> Gradient và thiết lập các giá trị sau với các màu gradient: Violet (C: 80, M: 100, Y: 30, và K: 25), và Black (C: 70, M: 70, Y: 70, và K: 95) mà là một phiên bản phổ biến của màu đen và hoạt động thực sự tốt.  Hãy chắc chắn để thiết lập các góc 90 độ.


Bước 4
Bây giờ thêm một số hiệu ứng cho đến nền. Tạo một layer mới phía trên nền gradient, thiết lập màu Front to: C: 80 M: 70 Y: 60 K: 80 và màu nền là màu trắng. Bây giờ vào Filter> Render> Clouds. Thay đổi chế độ hòa trộn các lớp mây của Overlay.

Sau đó, vào Filter> Blur> Motion Blur, thiết lập Angle 90 độ và khoảng cách đến 999 px. Cuối cùng điều chỉnh Levels (Command + L) như thể hiện ở dưới cùng của hình ảnh dưới đây để hoàn thành hiệu quả.


Bước 5
Sử dụng công cụ Pen, vẽ một hình dạng tương tự với một hiển thị trong hình dưới đây. Điền vào các đường dẫn với màu sắc này: C: 10, M: 15, Y: 0, và K: 0. Để giữ cho các lớp tổ chức Tôi đang sử dụng lớp Groups, đầu tiên tạo ra một thư mục có tên "Curves Right" và đặt tất cả những đường cong của các bên phải của phông có.

Sau khi vẽ đường cong, vào Layer> Layer Mask> Hide All và điền nó với một Horizontal Gradient (Trắng Đen) làm cho có thể nhìn thấy chỉ là một phần của phía bên trái của đường cong. Cuối cùng đổi Opacity đường cong lớp đến 25% và thiết lập Blending Mode sang Color Dodge.

Bước 6
Duplicate Curve như nhiều lần như bạn muốn (giữ phím Alt và kéo) và sử dụng các công cụ chuyển đổi để làm sai lệch từng đường cong nhân đôi để có được một cái gì đó giống như hình ảnh dưới đây. Bạn có thể thêm bao nhiêu đường cong như bạn muốn. Hãy thử thay đổi giá trị Opacityt để có được một hiệu ứng đẹp.

Sau đó chọn nhóm "Curves Right" và kéo nó về phía bên phải của khung hình. Sau đó lặp lại toàn bộ nhóm (bạn có thể giữ phím Alt và kéo) và vào Edit> Transform> Flip Horizontal để phản ánh các đường cong, sau đó chọn Tập đoàn mới mà bạn có thể đặt tên "Curves Left" và kéo nó về phía bên trái của canvas.

Bước 7
Tạo một layer mới phía trên "đường cong". Sử dụng công cụ Ellipse Tool (U) để vẽ một màu hồng (C: 5 M: 55 Y: 0 K: 0) vòng tròn (giữ phím Shift để làm cho nó hoàn hảo). Sau đó vào Filter> Blur> Gaussian Blur, bạn sẽ được yêu cầu để Rasterize Shape, làm điều đó; thiết lập Radius 50px và nhấn OK. Tiếp theo, thay đổi Blending Mode của hình tròn và Opacity 25%, sau đó đặt nó ở đâu đó trên bất kỳ của các đường cong.

Nhân đôi layer này nhiều lần như bạn muốn, thay đổi giá trị Opacity và thay đổi kích thước mỗi bản sao một chút. Hãy thử để có được một cái gì đó giống như đáy của hình ảnh dưới đây. Khi bạn thực hiện xong, tất cả các lớp vào một thư mục có tên giống như "Light Spheres."

Bước 8
Đối với bước này, bạn sẽ cần phải mở một tập Stars Brushes. Trong một layer mới tô trắng (C: 0, M: 0, Y: 0, và K: 0) ngôi sao trong những nơi ngẫu nhiên, sau đó thêm một Outer Glow Layer Style bằng cách sử dụng chế độ Screen Blend, với một thước của 70px và điều này màu: C: 15, M: 55, Y: 0, K: 0. Cuối cùng đặt "Stars" layer Opacity đến 70%.


Bước 9
Các bước sau đây là cách thêm logo, tất nhiên điều này không thể được đặt tên logo, kể từ khi một logo thực sự là một thiết kế đồ họa mảnh phức tạp hơn, vì vậy tôi sẽ gọi nó là chỉ "tên công ty." Sử dụng một số hướng dẫn để phân chia các phần còn lại của các tài liệu trong hai, cả hai theo chiều dọc và ngang. Sau đó sử dụng Type Tool (T) để gõ từ "VIOLET" trong tất cả các mũ và trong trắng. Tôi đang sử dụng các font Avant Garde, nhưng cảm thấy tự do sử dụng bất kỳ thay thế (Futura, Century Gothic, vv). Sử dụng các giá trị ký tự hiển thị dưới đây. Sau đó chọn chữ "O" và thay đổi màu sắc của nó: C: 10, M: 85, Y: 0, và K: 0.

Cuối cùng, như một tác dụng bổ sung, thêm vào các văn bản lớp một Gradient Overlay Layer Style (Gray White) và thiết lập chế độ hòa trộn là Linear Burn, Opacity đến 75%, và Angle là 90 độ.

Bước 10
Bây giờ chúng ta sẽ thêm một  hiệu ứng cho layer text,  lặp lại điều này trong các lớp văn bản, đảo ngược nó (một cách nhanh chóng làm nó đang tạo ra một layer trống bên dưới nó, rồi chọn cả hai layer copy và layer trống và nhấn Command + E để merge chúng) và sau đó vào Edit> Transform> Flip Vertical. Đặt bản sao ngay dưới văn bản. Cuối cùng, thêm một Layer Mask> Hide all để sao chép và điền nó với Gradient Tool (Black White).

Bước 11
Tạo một layer mới phía trên "Violet" layer text và sử dụng các thiết lập Stars Brush để vẽ một vài ngôi sao màu trắng trên đó. Thay đổi Opacity của layer xuống 85%.

Bước 12
Hãy gõ từ "Coffee" ở góc dưới bên phải của chữ "Violet". Đối với từ này, bạn có thể sử dụng bất kỳ kiểu chữ script (Tôi đang sử dụng Edwardian Script). Bây giờ, thêm một Gradient Overlay Layer Style bằng cách sử dụng những màu sắc này: C: 10, M: 85, Y: 0, K: 0 và C: 15, M: 55, Y: 5, K: 0. Cuối cùng, tất cả các layer liên quan đến tên công ty trong một Group Layers tên "Logo".

Lớp Comps

Bước 13
Bây giờ chúng ta sẽ thiết lập hai Layer Comps để có hai phiên bản khác nhau của thiết kế trong hai tập tin riêng biệt bằng cách sử dụng một Script tự động.

Đầu tiên hiển thị các bảng Layer Comps, hãy vào Windows> Layer Comps. Đảm bảo thư mục "Logo"  có thể nhìn thấy và vào Layer Comps panel nhấp chuột vào biểu tượng New nhỏ ở phía dưới, đổi tên layer mới để "Cover." Sau đó, ẩn các "Logo" thư mục, và tạo ra một Layer Comp mới đặt tên là "Inner" lần này. Bạn có thể chuyển đổi các khả năng hiển thị của layer Comp để kiểm tra lại tất cả mọi thứ là OK.

Bước 14

Vào File> Scripts> Layer Comps để các tập tin. Trong hộp thoại, thiết lập File Type như PSD, trình duyệt mà bạn muốn để lưu trữ các tập tin mới, đặt tên cho tập tin kết quả với một số tiền tố mô tả như "Violet," và để lại tất cả các thiết lập khác theo mặc định. Khi bạn nhấn vào Run, Photoshop sẽ tự động tạo một file mới cho mỗi Layer Comp. Tên của tài liệu mới sẽ bao gồm tên của Layer Comp.


Bước 15
Mở  hình ảnh tách cà phê trong Photoshop, double-click vào layer "Background" để có thể chỉnh sửa nó. Sau đó sử dụng công cụ Pen trong chế độ Paths, vẽ xung quanh hình bóng của cốc, khi bạn hoàn thành các bản vẽ dẫn, nhấp vào Loại trừ khu vực đường dẫn chồng chéo trong thanh Options và vẽ một đường dẫn bên trong handler của cốc. Một khi bạn đã có những con đường được vẽ, vào Layer> Vector Mask> Path hiện tại để chuyển đổi các đường dẫn đến một lớp mặt nạ vector chiết tách từ nền tảng của nó.

Bước 16
Bạn có thể kéo và thả các ly cà phê từ tài liệu ban đầu của nó vào tài liệu làm việc của chúng tôi. Một khi bạn đặt nó vào thiết kế, rasterize layer nếu bạn muốn quá, Option (bên phải) bấm vào Layer và chọn Rasterize Layer; đặt tên cho layer "Coffee Cup."

Sau đó, sử dụng các kỹ thuật tương tự như ở bước 10, thêm một hiệu ứng cho  cốc, Brush màu đen (B) vẽ một chút so với lớp mặt nạ để làm mềm các góc cạnh sắc thái, như được hiển thị.

Bước 17
Như một ít chi tiết bổ sung chúng tôi sẽ bổ sung thêm một bóng tối để cốc. Sử dụng công cụ Ellipse Tool để vẽ một hình elip màu đen phong phú giữa "cốc cà phê" và "tách cà phê copy" layer. Sau đó vào Filter> Blur> Gaussian Blur, thiết lập Radius là 35 và nhấn OK.

Bước 18
Để giữ cho môi trường xung quanh tím thêm một Photo Filter Adjustment Layer ở trên chén, đảm bảo sự lựa chọn Clipping Mask trên Adjustments Panel được lựa chọn và thiết lập màu này để C: 40, M: 80, Y: 0, K: 0 và mật độ đến 25 %. Bây giờ đặt tất cả các lớp liên quan đến cốc cà phê vào một lớp Nhóm có tên là "Coffee Cup."

Bước 19
Bây giờ chúng ta sẽ thêm một chút khói vào cốc cà phê. Mở hình ảnh Khói từ các nguồn và double-click vào layer "Background" để chỉnh sửa nó. Nhấn Ctrl + I để đảo ngược màu sắc của hình ảnh. Trên cửa sổ điều chỉnh Hue / Saturation (Ctrl + U) thiết lập các giá trị Hue đến -92 để làm cho màu tím khói hơn.

Hãy giải nén khói từ nền tảng của nó. Trong Channels Panel (Window> Channels) lặp lại trong các kênh Red, nhấn Ctrl + A và Ctrl + C để lưu các bản sao vào clipboard, sau đó xóa các kênh đôi, click vào kênh RGB lần nữa để lại những hình ảnh với màu sắc mặc định của nó .

Trong Layers Panel chọn layer khói và vào Layer> Layer Mask> Hide All, trên thu nhỏ Layer Mask, luôn luôn trên Layers Panel, Alt-click vào các mặt nạ để hiển thị nó, sau đó Paste vào clipboard trên Layer Mask có thể nhìn thấy. Sau đó bấm vào thu nhỏ lớp thực tế để xem nó trông như thế.

Bước 20
Kéo layer khói đến tài liệu chính của chúng ta. Sau đó quay nó và đặt tên cho nó là "khói". Đặt nó ngay trên tách cà phê. Thêm một Layer Mask cho layer này và điền nó với một màu trắng to Black gradient để che giấu dưới cùng của cột khói. Sử dụng một bàn chải mềm màu đen để tô lên layer mask để ẩn phía trên cùng của cột khói.

Cuối cùng, nhân đôi "Smoke" layer, đặt các bản sao ở phía trên layer gốc và vào Filter> Blur> Gaussian Blur, sau đó thiết lập bán kính lên đến 35%. Điều này sẽ thêm một ánh sáng đẹp để các lớp khói.

Bước 21
Bây giờ, để tăng tác động trực quan của cốc cà phê, thêm một số đèn chiếu sáng và ngôi sao, giống như chúng ta đã làm nền ở các bước 7 và 8. Cuối cùng, tất cả các layer liên quan đến ly cà phê, bao gồm cả khói, đèn và các ngôi sao, vào một lớp Nhóm mới có tên "Coffee."


Bước 22
Sửa đổi, chúng ta có hai nhóm lớp quan trọng cho bước này: ". Logo" "Coffee" . Hãy bắt đầu với "Logo" nhóm, nhân đôi nó (kéo nhóm giao cho nút New ở dưới cùng của Layers Panel), chọn "Logo copy" nhóm và nhấn Ctrl + E để quay nó. Làm chính xác cùng với các "Coffee" Group.

Bước 23
Chọn layer "Logo copy" , sau đó Option (bên phải) - Click vào nó và chọn Duplicate Layer, trên hộp thoại popup, viết tên cho nó và chọn Destination of New. Điều này sẽ tạo ra một bản sao của layer logo trong một tài liệu với cùng một chiều rộng và chiều cao như ban đầu. Sử dụng công cụ Crop để cắt giảm tất cả các không gian trống trên các bản sao, sau đó lưu tài liệu với một số tên mô tả như: ". Logo.psd" Lặp lại quá trình này với các bản sao "Coffee" layer.

Bước 24
Vào thời điểm này bạn cần phải có những yếu tố quan trọng sau đây để sử dụng chúng vào các phần tiếp theo của bài viết này: hai tập tin PSD với các hình nền, một cho các trang bìa và một cho các trang nội bộ. Một tập tin PSD bao gồm các Logo có nền trong suốt, và một tài liệu bao gồm cả cốc cà phê với nền trong suốt là tốt.

Bây giờ chúng ta đã sẵn sàng để tạo ra một tài liệu in trong InDesign và thêm các thông tin được cung cấp bởi khách hàng.

Lời kết

Tại thời điểm này, chúng tôi có một nền tảng tìm kiếm tốt cho thực đơn của chúng tôi. Bây giờ nhảy tới Phần 2 của hướng dẫn này trên trên Vectortuts + nơi chúng ta sẽ tìm hiểu thêm về thiết kế in ấn.






1 nhận xét:

  1. ĐẠI PHÁT GROUP - THIẾT KẾ THI CÔNG NỘI NGOẠI THẤT
    Khi bạn có nhu cầu thiết kế quán cafe hoặc thiết kế quán trà sữa Hãy liên hệ với Đại Phát Group để được hướng dẫn và tư vấn.

    Hiện nay có rất nhiều khách hàng muốn mở rộng kinh doanh, nhưng điều mà quý khách nên chú ý chính là việc Làm bảng hiệu sao cho đẹp và hợp thời. Bởi yếu tố bảng hiệu quảng cáo chính là điểm nhấn cho địa điểm kinh doanh của mình. Hiện nay có rất nhiều công ty làm biển quảng cáo nhưng để lựa chọn được công ty làm bảng hiệu thủ đức cũng như các quận huyện khác uy tin và chất lượng thì cũng rất khó. Bởi lẻ nó liên quan tới chế độ bảo hành và chất lượng công trình sau này rất nhiều.

    Có rất nhiều mẫu bảng hiệu quảng cáo mà quý khách có thể tham khảo như Làm bảng hiệu Mica hoặc Làm bảng hiệu gỗ cũng rất được ưa chuộng. Chính vì vậy việc làm bảng hiệu hộp đèn cũng rất quan trọng. Hãy chú ý thật kỹ nhé, chi phí bỏ ra phù hợp và chất lượng hiệu quả cũng phải tương ứng.

    Tiếp theo để tạo được không gian riêng cho quán của mình, quý khách có thể làm
    Vách ngăn bằng sắt kính với chi phí rẻ mà lại đẹp. Tất cả những lĩnh vực trên Đại Phát Group luôn tự hào sẽ mang lại sự hài lòng nhất cho khách hàng của mình.

    Trả lờiXóa

 

Sample text

Sample Text

Vui vẻ yêu đời, nhiệt tình hòa đồng

Sample Text

 
Blogger Templates