Tài nguyên, hướng dẫn và ví dụ về trang web dựa trên pixel

Thiết kế giao diện web sử dụng tác phẩm nghệ thuật theo phong cách pixel tương đối mù mờ so với xu hướng hiện đại. Bạn thực sự cần phải tìm hiểu một số trang web trên Internet để tìm một số ví dụ hay; nó khó nhưng không phải là không thể.

Trong bài viết này tôi đã thu thập tổng hợp tất cả mọi thứ bạn cần cho thiết kế trang web dựa trên pixel. Có hàng tá hướng dẫn lành mạnh cho người mới bắt đầu và các chuyên gia. Tôi cũng đã bao gồm một số công cụ và tài nguyên hữu ích mà bạn có thể chơi xung quanh để khám phá chủ đề hơn nữa. Nếu bạn hoàn toàn thích thú với đồ họa trò chơi video hoặc tác phẩm nghệ thuật pixel isometric thì bạn sẽ thích bộ sưu tập này.

Tài nguyên

Đây là một số tài nguyên phát triển độc đáo cho các tập lệnh web và đồ họa kỹ thuật số. Khi bạn đi sâu vào việc tạo bố cục trang web pixel, bạn sẽ không luôn cảm thấy cần phải theo dõi mọi thứ. Bộ sưu tập các tài nguyên dựa trên web này rất có thể sẽ xuất hiện nhiều lần.

Gia vị

Tôi đã quen với việc làm việc với mã nguồn mở. Đó là lý do tại sao việc tìm kiếm một plugin jQuery như Spritely luôn là một tình huống thú vị. Bạn có thể đưa tập lệnh này vào trang web của mình để tạo hình động và hình nền cuộn nhanh.

Toàn bộ plugin được cung cấp bởi JavaScript và HTML / CSS; không có Flash hoặc bất kỳ ngôn ngữ phụ trợ nào được yêu cầu. Trang tài liệu đơn giản nhưng đủ để bạn bắt đầu. Các nhà phát triển có rất nhiều bản demo mẫu mà bạn cũng có thể tải xuống.

Phiên bản phát hành ổn định hiện tại là 0.6.1 được cập nhật vừa phải. Các hiệu ứng hoạt hình tương thích với Opera, Chrome, Safari, Firefox và Internet Explorer 6+. Ngoài ra, bất kỳ trình duyệt điện thoại thông minh nào chạy trên Android hoặc iOS sẽ hiển thị hoàn hảo.

FatPixels

Đây là một kịch bản sprite mã nguồn mở mạnh mẽ được phát triển bởi Matías Martínez. FatPixels chỉ yêu cầu thư viện jQuery chạy đúng. Mặc dù tôi sẽ nói rằng Spritely là một thư viện hoạt hình phức tạp hơn, FatPixels có một vị trí thích hợp trong thị trường dành cho các nhà phát triển web.

Bạn có thể dễ dàng xây dựng các họa tiết hoạt hình mà không cần tạo hình ảnh .gif. Trên thực tế, bạn sẽ có thể xuất tất cả các hình ảnh dưới dạng .jpg và tạo một hàng các họa tiết cho một hiệu ứng hoạt hình dài. Trang chủ FatPixels có một bản demo tuyệt vời cùng với khối mã jQuery được sử dụng để xây dựng nó. Nếu bạn đang tìm kiếm thứ gì đó nhẹ nhàng để làm động các họa tiết của bạn thì FatPixels là cách để đi.

SmartSprites

Khi sử dụng từ "sprite", có một vài nghĩa khác nhau. Các nhân vật trong trò chơi video hoặc các họa tiết hoạt hình thường là những hình ảnh nhỏ hơn được hiển thị với rất ít pixel. Tuy nhiên, trong CSS, thuật ngữ sprite dùng để chỉ một hình ảnh hoạt động như một biểu tượng cho trang web của bạn.

Lý do bạn nên sử dụng một bảng sprite thay vì các hình ảnh riêng lẻ là để cắt giảm tài nguyên máy chủ. Nhanh hơn nhiều để tải xuống một hình ảnh lớn hơn chứa tất cả các biểu tượng của bạn thay vì nhiều hình ảnh nhỏ hơn nhưng riêng biệt. Nhưng đặt tất cả các biểu tượng này lại với nhau trong Photoshop có thể là một rắc rối thực sự; thậm chí không nhất thiết là khó khăn, chỉ lặp đi lặp lại và tốn thời gian.

Rất may, Trình tạo CSS SmartSprites là một tài nguyên tuyệt vời cho tình huống này. Bạn có thể nhanh chóng tạo một bảng hoàn hảo pixel với tất cả các hình ảnh của bạn ở định dạng GIF hoặc PNG. Ngoài ra, bạn có thể nhanh chóng xác định những gì của bạn vị trí nền tọa độ x / y phải dành cho từng biểu tượng riêng lẻ.

Squidfingers BG mẫu

Thiết kế một bộ ảnh nền lặp lại tốt là rất khó. Có thể mất vài ngày trước khi bạn có thể tạo ra hình ảnh liền mạch. Nhưng rất may có tài nguyên trực tuyến để tải xuống nền gạch miễn phí.

Bộ sưu tập mẫu Squidfingers là một trong những tài nguyên như vậy. Nó cung cấp hơn 150 mẫu kiểu pixel khác nhau mà bạn có thể tải xuống và sử dụng cho các dự án của mình. Các phong cách rất năng động và đầy màu sắc, và đối với nhiều loại như vậy, đó là một nguồn tài nguyên tuyệt vời để giữ cho tiện dụng. Các liên kết tải xuống có định dạng .zip giúp chúng nhỏ hơn và dễ dàng chuyển giữa các máy tính.

Tài nguyên nhà văn

Tôi không thể nói đủ những điều tuyệt vời về The Spriters Resource. Đây là một trang web nơi bạn có thể tìm kiếm thông qua tất cả các hệ thống chơi trò chơi khác nhau cho các trang sprite. Chúng có thể bao gồm bản đồ, tòa nhà, màn hình menu, họa tiết nhân vật, biểu tượng và khá nhiều thứ!

Họ đã trực tuyến từ năm 2001 và danh mục các trò chơi video đã phát triển rất mạnh. Có cả một cộng đồng đằng sau TSR với các nhà thiết kế đồ họa có thể xé toạc các trò chơi khác nhau này. Nếu bạn quan tâm đến bất kỳ hình thức thiết kế trò chơi video hoặc người hâm mộ trực tuyến nào, bạn sẽ phải xem bộ sưu tập tuyệt vời này.

Thậm chí thú vị hơn là một số trang web chị em đã sinh ra TSR. Người hâm mộ chơi game cũng đã giúp trích xuất kết cấu cơ sở và kết xuất mô hình nhân vật. Nhìn chung, đó là một cộng đồng thực sự tuyệt vời rất ủng hộ làm việc với các họa sĩ trong tác phẩm nghệ thuật kỹ thuật số.

400 pixel

Đây là một ứng dụng web thực sự tuyệt vời không cung cấp một giá trị thiết yếu, nhưng nó chắc chắn gọn gàng. 400 Pixels cho phép bạn tạo một tài liệu pixel trực tuyến và lưu trữ hình ảnh trong lưới của họ. Trang web được thiết kế theo kiểu tương tự trang chủ triệu đô với mỗi hình ảnh chiếm một khối vuông trong hình ảnh tổng thể.

Bạn có thể chơi xung quanh trong giao diện web của họ tạo ra một số tác phẩm nghệ thuật thực sự ngớ ngẩn. Đây không phải là thứ bạn sẽ chọn ngay lập tức, nhưng thật vui khi chơi cùng khi bạn hiểu rõ về nó. Và đó là một công cụ tuyệt vời mà bạn có thể làm việc với bất kỳ máy tính nào có truy cập Internet.

Đầu ra chính

Trong một mạch tương tự như 400 Pixels, bạn có thể sử dụng Đầu ra chính như một studio trực tuyến cá nhân cho tác phẩm nghệ thuật pixel. Nó vẫn đang trong giai đoạn phát triển ban đầu, nhưng tất cả các chức năng người dùng cốt lõi đã có sẵn. Bạn có thể đăng ký tài khoản miễn phí và bắt đầu tạo pixel art ngay lập tức.

Mỗi hình ảnh được lưu trữ cục bộ trên máy chủ của họ mà bạn có thể liên kết nóng trên các trang web và diễn đàn. Nhiều hình ảnh được mở cho công chúng và bạn có thể kiểm tra chúng bằng cách nhấp qua các tác giả hoặc thẻ khác nhau. Ngoài ra còn có một hộp tìm kiếm, nhưng tôi cảm thấy chất lượng kết quả tìm kiếm không phải lúc nào cũng tuyệt vời.

Đầu ra chính có vẻ như là một công cụ cộng đồng khác rất thú vị để biết, nhưng có lẽ không thể cung cấp nhiều giá trị giáo dục cho các nghệ sĩ pixel.

Hướng dẫn

Bây giờ bạn đã có tài nguyên, hãy xem các hướng dẫn được cung cấp bởi nhiều trung tâm giáo dục và các bài đăng blog hữu ích nằm rải rác trên Internet. Tôi đã tập hợp một bộ nhỏ thực sự tiện dụng hướng dẫn nghệ thuật pixel cho người mới bắt đầu và nhà thiết kế trung gian. Nhiều trong số các hướng dẫn này tập trung vào Adobe Photoshop, nhưng bạn có thể làm theo cùng với gần như bất kỳ trình chỉnh sửa hình ảnh nâng cao nào.

Hướng dẫn về Pixel Sprite của Derek yu

Rõ ràng có hàng chục hàng trăm hướng dẫn pixel-sprite trên Google nhưng hướng dẫn cụ thể này trên trang web của Derek Yu trải qua nhiều bước khác nhau trong việc hướng dẫn cách bạn tạo các họa tiết pixel. Phần lớn quá trình đã được sắp xếp hợp lý và giải thích theo cách cho phép người mới bắt đầu nhanh chóng nhảy vào hành động.

Người hâm mộ trò chơi video sẽ yêu thích hướng dẫn này vì bạn có được cái nhìn hậu trường trong việc tạo ra các đồ họa cụ thể này. Tôi thích tìm một bố cục trang web với tác phẩm nghệ thuật pixel trò chơi video rải rác trong thiết kế. Nó mang đến một cảm giác hoài cổ độc đáo và đó là thứ bạn không tìm thấy ở mọi nơi. Bất cứ ai đang tìm cách tạo các pixel pixel của riêng họ vì bất kỳ lý do gì đều có thể bắt đầu trên loạt bài hướng dẫn 10 bước của Derek.

Cấu hình Photoshop cho Pixel Art của Brandon Treb

Dưới đây là một hướng dẫn hoàn hảo khác hướng đến người mới bắt đầu trong lĩnh vực ảnh nghệ thuật pixel. Bài viết trên blog được viết bởi Brandon Treb, một nhà thiết kế và phát triển di động tuyệt vời. Bạn có thể tìm thấy tất cả các loại thông tin hữu ích trong hướng dẫn chi tiết này về nghệ thuật Photoshop dựa trên pixel.

Bạn phải biết cách thiết lập tùy chọn trong Photoshop để ảnh nghệ thuật pixel của bạn sẽ không xuất hiện lúng túng hoặc mất chất lượng khi bạn xuất. Bạn có thể ngạc nhiên khi biết nhiều tùy chỉnh được yêu cầu để thực sự có được chất lượng hình ảnh đẹp.

Vẽ Pixels thủ công của Russell Tate

Dưới đây là một hướng dẫn tuyệt vời đầy đủ các kỹ thuật cho nghệ thuật pixel vẽ tay trong Photoshop. Bộ sưu tập các kỹ thuật nghệ thuật pixel này chỉ đơn giản là đáng kinh ngạc. Bất cứ ai lướt qua nội dung rất có thể sẽ tìm thấy thứ mà họ chưa từng biết trước đây.

Có giải thích chi tiết về việc tạo kết cấu trên cỏ và vỏ cây; cũng về cách sao chép ảnh nghệ thuật pixel mà bạn đã vẽ và biến nó thành một thiết kế biểu tượng. Tất cả bắt nguồn từ thực tiễn và độ chính xác trong mọi lĩnh vực. Những người thực sự đam mê sẽ gắn bó và trong vòng vài tháng sẽ tìm thấy một kỹ thuật vững chắc cho ý tưởng theo phong cách pixel của họ.

Phát triển danh mục trò chơi CSS / JS của Daniel Sternlicht

Đây là một hướng dẫn từ Tạp chí Smashing về cách mã hóa danh mục đầu tư trò chơi bằng CSS / JS, sử dụng nhiều họa tiết từ loạt trò chơi Pokemon. Tác giả là Daniel Sternlicht, người cũng tình cờ điều hành danh mục đầu tư cá nhân của mình trên bố cục dựa trên trò chơi này.

Trang web này hoạt động như một thế giới RPG, nơi bạn điều khiển một nhân vật bằng bàn phím. Bạn có thể nhập các tòa nhà khác nhau để hiển thị thông tin như chi tiết liên hệ và mục nhập danh mục đầu tư.

Tôi thực sự thích hướng dẫn này và đó là một cách thú vị để kết hợp ảnh nghệ thuật pixel với phát triển trang web. Ngay cả khi bạn không biết nhiều về JavaScript thì đây vẫn là một bài viết siêu thú vị. Tôi đã trải qua một số mã và phải dành những lời khen tuyệt vời cho Dan cho một hướng dẫn sáng tạo như vậy. Bất kỳ tín đồ Pokemon nào chắc chắn sẽ phải lòng những ý tưởng của anh ấy.

Hướng dẫn về pixel Isometric của Matriax

Trang web nhỏ gas13.ru này có một số hướng dẫn pixel lập dị và chuyên nghiệp nhất mà tôi từng thấy. Trong hướng dẫn nhóm đẳng cự, bạn được giới thiệu để tạo các khối sáng bóng và kết cấu nước. Ngoài ra, bạn sẽ tìm thấy tài nguyên cho tất cả các tuts pixel isometric khác trong thanh bên.

Có rất nhiều điều để tìm hiểu: bạn có thể thiết kế mặt tiền cửa hàng, pixel sprite hoặc thậm chí kết cấu chi tiết cho các trò chơi video và hình nền trang web. Tôi không chắc liệu tác giả này có còn tích cực xuất bản nội dung hay không, nhưng các bài viết hiện có là quá đủ cho người mới bắt đầu tìm hiểu những điều cơ bản.

Studio Purloux Pixel Hướng dẫn của Kevin Chaloux

Bây giờ tôi đang liệt kê tất cả các hướng dẫn pixel tốt nhất, tôi chắc chắn sẽ bao gồm quyền này ngay từ đầu. Toàn bộ hướng dẫn về tác phẩm nghệ thuật pixel này là một bài viết tiếp theo tuyệt vời cho người mới. Bạn sẽ được giới thiệu ngay từ đầu đến phần mềm nguồn mở như GIMP hoặc Paint.NET.

Bạn sẽ tìm hiểu cách xuất hình ảnh và nhiều khía cạnh của thiết kế pixel như phối màu và khử răng cưa. Có rất nhiều kỹ thuật khác nhau để làm theo. Bạn nên chọn một số ý tưởng thiết kế bằng cách xem các trò chơi video 8 bit và 16 bit retro.

Tác giả Kevin Chaloux ghi nhận hướng dẫn sprite pixel của Derek Yu (được liệt kê trước đó) và đề cập rằng đây là nguồn cảm hứng khi anh mới bắt đầu.

Tạo một Favicon tốt hơn bởi Kayla Knight

Các nhà thiết kế web thường quên rằng hình ảnh favicon (biểu tượng yêu thích) là một phần rất lớn trong bất kỳ sơ đồ thương hiệu nào. Tất cả các trang web phổ biến nhất có thể được công nhận bởi favicon 16 × 16 của họ. Khi bạn đang làm việc với một khung vẽ hạn chế như vậy, bạn buộc phải đối phó với các tác phẩm nghệ thuật và minh họa dày đặc pixel. Hướng dẫn favicon này từ OXP thực hiện công việc tuyệt vời khi kết hợp cả hai ý tưởng.

Từ tut này, bạn có thể hiểu tại sao pixel art lại có lợi như vậy khi tạo favicon. Ngoài ra còn có các công cụ và kỹ thuật vững chắc để xuất tệp .ico. Cũng bao gồm một phần giới thiệu nhỏ về các favicon phổ biến trên khắp Web.

Đây là một tài nguyên khác mà tôi cảm thấy có thể có lợi cho tất cả các nhà thiết kế web. Đó là trao quyền để giáo dục bản thân về việc tạo một favicon và làm việc với các giới hạn pixel nghiêm ngặt.

Phòng trưng bày

Tôi muốn kết thúc bài viết với một bộ sưu tập đẹp về thiết kế trang web theo kiểu pixel. Tôi đã bao gồm 40 ví dụ về các bố cục khác nhau với nhiều tầm nhìn nghệ thuật đa dạng. Xu hướng của tác phẩm nghệ thuật pixel chỉ mới bắt đầu xuất hiện trở lại trong các trang web chính thống. Tôi hy vọng chương trình giới thiệu khác biệt này về các trang web pixel có thể mang đến nguồn cảm hứng cho các nhà phát triển web trên toàn thế giới.

Trung tâm trái đất

PixelJam

Tiếp thị tương tác Red Rokk

Blog điện tử

Pixel Tamago

pixelHugger

Đồ họa Pixel Deviant

Chu trình Canvas HTML5 8 bit

Daniel Sternlicht

Đội quân quỷ

Ứng dụng BlockHead Pix

madPXL

supertott 2.0

ClassicGaming

Hướng dẫn bộ công cụ RPG

Người tạo thành phố

Final Fantasy XIII-2

Nghệ thuật Pixel KawaiiHannah

Hộp cát

Ông Vương

Pixel Freak

Nghệ thuật pixel Nasc

Paxjah

FoolsTown

Giày cao gót

LOVEPIXEL

Henk Nieborg

Kính viễn vọng

iamnotadoll

SweetPIX

Megapont

Đô thị nhỏ

Hayo van Reek

Studio Pixeltemple

Vormgeving lão luyện

Bảo tàng pixel

QuickHoney

Polpo.net

spiv.cz

4 bột thật