Category Archives: Thiết kế phẳng

Bạn nên làm gì trên shutterstock

Link to refer:

http://submit.shutterstock.com/?ref=2433512

Khi giới thiệu về Shutterstock trên blog, rất nhiều người đã hỏi mình là nên vẽ về những chủ đề gì?

Thực ra, bạn phải hiểu là thế giới là nơi rất rộng lớn. Thứ bạn vẽ sẽ phục vụ được cho một số đối tượng nào đó. Bạn không nên giới hạn mình vào bất cứ thứ gì cụ thể, bạn thích thì bạn vẽ. Có những người thích vẽ nhà cửa, lại có người thích vẽ nhân vật. Thế sao bạn phải làm theo người khác mà không tự mình suy nghĩ ra chủ đề của bản thân?

* Nếu bạn vẫn muốn một chủ đề hợp lý thì đây nên là chủ đề của bạn:

– Mình làm game nên những thiết kế thuộc về game mình rất cần và những lập trình game đơn lẻ (indie) như mình cũng sẽ như thế.

I. Tiêu đề game:

1. Tiêu đề:

a. Tạo một tiêu đề ví dụ:

– Tiêu đề của game cần phải nổi bật giữa hình nền trên menu. Ngoài ra nó còn có thể được sử dụng để quảng cáo, ghi lại dấu ấn dành cho game. Bạn có thể tách nó ra riêng lẻ để lập trình viên tiện sử dụng.

– Những tiêu đề hay dòng chữ cách điệu rất dễ được những người thiết kế lấy về để làm game và các tác phẩm khác. Đây là thứ dễ làm nhưng khó khăn về mặt ý tưởng.

stock-vector-a-red-background-with-stripes-star-and-green-text-for-christmas-219818977

b. Tạo sẵn bảng chữ cái:

– Ngoài ra bạn có thể liệt kê 24 chữ cái tiếng Anh với phong cách riêng thì lập trình viên có thể sử dụng một cách dễ dàng.

stock-vector-original-golden-alphabet-set-of-luxury-metallic-letters-for-your-text-designs-or-logos-vector-font-134505191

Tip: Nên có thêm ghi chú về font sử dụng trong hình để lập trình viên biết mà sử dụng lại vì hình vector trên Shutterstock bắt buộc phải outline nên rất khó để làm lại nếu không biết font.

2. Phông nền mở đầu:

Đây là hình nền mở đầu vào trong game, thông thường sẽ bao gồm cả tiêu đề game.

stock-vector-interface-game-design-resource-bar-and-resource-icon-for-game-vector-illustration-part-193725569

Tip: Không tô màu theo kiểu trên mặt vì lập trình viên sẽ tốn rất nhiều thời gian để tạo lại nền.

II. Những thông báo về game:

1. Những loại thông báo thường:

Những thông báo sau luôn có trong game cho dù đó là game gì:

– Game over

– Start

– High score

stock-vector-set-of-blue-green-round-buttons-menu-elements-for-web-or-game-design-217376134

2. Cách dạng thông báo khác nhau:

Các hình dạng khác nhau để có thể làm game

stock-vector-set-of-green-glossy-buttons-beautiful-sparkling-elements-for-web-or-game-design-217373191

III. Những ý tưởng game:

– Bản thân người làm game có thể đưa ra những game theo ý kiến của mình như thế này?

Minh hoạ

– Ý tưởng của bạn được đưa ra chỉ trong hình ảnh

stock-vector-sweet-elements-for-making-your-own-cake-vector-cake-constructor-207357349

IV. Những vật dụng trong game (Item):

– Những vật dụng hỗ trơ trong game là không thể thiếu, vậy bạn hãy cung cấp cho các lập trình viên những món đồ đó để làm game hay hơn đi:

stock-vector-game-resources-icons-149103440

 

=> Việc liệt kê đầy đủ các biểu tượng trên nền đen đem lại cơ hội bán hàng cực cao dành cho người bán như chúng ta. Đây là một trong những bộ vector về game bán rất chạy và gần như ai cũng muốn mua ngay khi nhìn vào.

 

V. Những nhân vật trong game:

Nhân vật chính là xương sống của game, những nhân vật dễ thương vui nhộn có thể được bán rất nhiều.

stock-vector-cute-simple-characters-and-elements-for-game-on-the-blue-game-board-216890770

Những nhân vật này, các lập trình viên nhìn vào là muốn mua ngay.

Tập trung vào các chủ đề khác nhau sẽ đem lại các lợi ích cao hơn

1. Các loài cá:

– Cá và đại dương là một trong các chủ đề rất tốt dành cho các lập trình viên. Đơn giản vì với những game thuộc về biển, các lập trình viên có thêm chiều dọc để làm game. Việc một nhân vật đi theo chiều dọc của game không hề cần thêm một thứ gì hỗ trợ khác với trên bờ, khi nhân vật đi lên thì chắc chắn phải đi xuống.

Đây là một trong những bộ hình yêu thích của mình

stock-vector-cute-cartoon-sea-creatures-all-in-different-layers-for-easy-editing-32547703

=> Những động vật biển trong hình thật sự thân thiện phù hợp với mọi lứa tuổi và hợp với nhau.

2. Các loại thú:

Ngoài biển, thì môi trường rừng cũng là một trong những môi trường dễ làm game. Bất cứ người nào cũng có thể biết được những loại thú.

stock-vector-vector-illustration-of-animals-set-cartoon-201895072

3. Các loại chim:

Những con chim thế này:

stock-vector-set-of-cartoon-funny-birds-215515183

4. Nhân vật dễ thương:

Các nhân vật dễ thương thường được sử dụng trong các game dành cho mọi lứa tuổi.stock-vector-little-cute-cartoon-fluffy-monster-in-different-colors-207977251

5. Các đồ vật:

– Các đồ vật hằng ngày cũng là một trong những nguyên liệu rất tốt của những nhà thiết kế game. Những game tìm đồ vật hay làm liên quan đến đời sống hằng ngày làm cho game được chơi nhiều hơn và cần ít hướng dẫn cũng như người chơi sẽ dễ dàng nhận ra cách chơi hơn.

stock-vector-cartoon-collection-of-normal-tool-in-home-color-219857065

VI. Những hình nền trong game:

– Những phông nền phía sau (background) làm cho game đẹp hơn rất nhiều

VII. Những nút thuộc về game:

1. Những nút cơ bản của game:

Những nút cơ bản mà game nào cũng có:

stock-vector-big-set-of-cartoon-wooden-vector-buttons-for-game-ui-214972030

2. Các nút đặc biệt:

VIII. Những thành phần đặc biệt chỉ game mới có:

1. Thanh tính thời gian (Progress bar)

Tip: Những hình ảnh được sử dụng trong game thường đơn giản nên dễ vẽ. Tuy nhiên, những nhà thiết kế như các bạn cần phải tách ra từng layer khác nhau để tô màu , đừng tạo shape từ Illustrator vì mình không sử dụng được thể loại đó. Mình cần tách nền và vật dụng ra khỏi nhau thì mới lập trình được.

– Những item và các nhân vật trong game cần có ít nhất 6 để bảo đảm việc mở rộng game. Bạn vẽ cho mình 2 cái rồi sau đó game hay thì mình làm tiếp thế nào?

– Hãy tạo thành 1 bộ với đầy đủ các đối tượng như trên thì khi mua mình sẽ mua toàn bộ nó 1 lúc. Thiếu những thứ như trên làm game sẽ rất khó khăn mà muốn kiếm cái khác để hợp cũng rất khó. Vì vậy, một khi đã hướng tới game, mình cần tất cả những thứ trên. Hãy tạo thành 1 bộ và với mỗi phong cách các bạn sẽ có được nhiều tấm cùng lúc.

stock-vector-game-resource-bar-set-149103266

Advertisements

Khái niệm chung về Sprite Kit

Sprite Kit là engine riêng của Apple viết dành cho việc làm game 2D trong hệ sinh thái Apple (bao gồm IOS cả Ipad lẫn Iphone và tren môi trường Mac OS). Sprite Kit hiện nay sử dụng engine vật lý Chipmunk2D tuy nhiên đó là việc chạy ngầm. 

 

Sử dụng Sprite Kit có rất nhiều điểm lợi:

– Không chỉ có thể đơn giản hoá việc viết game 2D trên IOS mà còn có thể sử dụng engine vật lý làm game trở nên hấp dẫn hơn nhiều.

– Không bị giới hạn ở IOS mà còn có thể phát triển game cho máy tính của Apple trên Mac OS.

– Nói là giới hạn trên hệ sinh thái của Apple nhưng với các plugin hiện nay bạn hoàn toàn có thể port qua Android.

– Nhận được sự hỗ trợ mạnh mẽ của Apple từ việc nâng cấp đến sửa lỗi và quan trọng nhất là nó hoàn toàn tương thích với thư viện và môi trường của IOS và Mac OS.

– Miễn phí hoàn toàn.

– Không cần phải cài thêm bất cứ thứ gì để phát triển trên Xcode và đưa game lên Appstore cực dễ.

 

Trong Xcode chỉ cần New Project và chọn Sprite Kit là có thể bắt đầu chương trình:

 

Screen Shot 2014-09-01 at 10.39.22 PM

Tiny Sea – Wonderful Undersea World

Tiny Sea – Wonderful Undersea World

New world is opened for you. You can feed your fish and do a lot of things for fun here.

Your tiny sea will become more and more beautiful with your hand.

It is the tiny world of sea with colourful fish and great environment.

* More than 8 decorates for your tiny sea

From coral to seaweed or sea star

* Beautiful fish

* Easy to feed your fish

* See your fish swing

Touch to the screen to drop the fish food.

Game Center is enable for see what you have with all the world.

DON’T LET YOUR FISH HUNGRY. Come and make the tiny world with us!

Link to download: View in App Store

Starting Menu screen 

 

Shopping to make your tiny sea more beautiful 

 
Beautiful Sea
 

 

 

Vài bộ sưu tầm về hoa

Link để xem profile: http://shutterstock.com/g/Huyleader

Lần trước là các sinh vật biển thì kì này là những bộ sưu tầm về hoa:

stock-vector-collection-for-flower-203165782

Link to Shutterstock

Đây là bộ được vẽ đầu tiên, dĩ nhiên có các hình riêng lẽ với cách vẽ của từng hoa.

stock-vector-collection-for-flower-203165779

Link to shutterstock

Bộ hoa có màu nhạt hơn và dịu hơn dành cho những loại game khác

stock-vector-collection-for-flower-203165788

Link to Shutterstock

Link để xem profile: http://shutterstock.com/g/Huyleader

Shutterstock programming

Làm game không chỉ code song một game là phát hành được. Game chạy được tốt không lỗi có thể giữ chân người chơi khi họ đã say mê nhưng để người chơi down được game về phải kể đến phần đồ hoạ hay nói chính xác hơi là hình ảnh trong game. Đồ hoạ đẹp bắt mắt thì người chơi mới down về để thưởng thức tiếp đến phần gameplay.

Shutterstock là nơi mình chọn để lấy hình ảnh chính cho game vì có nhiều chương trình và giá rẻ hơn những chỗ khác. Mặc dù không phải là thiết kế chính thức dành cho game nhưng bản thân người lập trình viên cũng cần phải biết một số kĩ thuật để chỉnh sửa hình ảnh cho phù hợp với game. Bạn không thể lúc nào cũng chờ thiết kế làm, có những công việc như phóng to thu nhỏ hình ảnh hay bạn chỉ cần 1 phần của bức ảnh, lúc đó bạn sẽ thấy tự mình làm sẽ nhanh hơn biết chừng nào.

Tuy nhiên, nói tự làm nhưng những công việc chính thiết kế thì thiết kế viên trong nhóm làm chứ không phải là lập trình viên, bạn chỉ cần biết vừa đủ để làm cho công việc trở nên nhanh chóng gọn lẹ hơn chứ không cần phải thay thế vị trí của thiết kế sư.

Hãy điểm qua một vài sản phẩm của mình trên Shutterstock nhé: 

http://submit.shutterstock.com/?ref=2433512

=> Link to register with me.

http://www.shutterstock.com/g/Huyleader?rid=2433512

=> My portfolio

http://www.shutterstock.com/?rid=2433512

=> Shutterstock homepage


Submit Images and Footage to Shutterstock and make money with me!!


My latest images for sale at Shutterstock:

//
//


My most popular images for sale at Shutterstock:

//
//

Sprite Kit – Sự hỗ trợ mới đến từ Apple

Trước tiên chúng ta hãy xem qua những điểm lợi và hại của Sprite trước khi bắt đầu:

* Ưu điểm:
– Đây là một thư viện được xây dựng ngay trong IOS nên không cần phải tải thêm bất kì một thư viện số (Extra Libray) hay một mã nguồn nào bên ngoài nữa. Ngoài ra, nó được viết và phát triển bởi chính Apple nên chúng ta có thể biết được rằng nó sẽ được Apple hỗ trợ và cập nhật thường xuyên sớm nhất có thể.
– Có sẵn các công cụ để cắt và thể hiện hiệu ứng ngay trong Xcode (particle)
– Giúp bạn lập trình và quản lý game một cách dễ dàng do cấu trúc của Sprite Kit được thiết kế để làm chuyện đó. Hỗ trợ các dạng video và hiệu ứng hình ảnh đơn giản nhưng chắc chắn sẽ được cải thiện trong tương lai

* Nhược điểm:
– Một khi sử dụng Sprite Kit nghĩa là cuộc sống của bạn sẽ gắn liền với hệ sinh thái của Apple. Nếu bạn muốn đưa game của bạn lên các hệ điều hành khác như Android thì nó gần như là viết lại từ đầu.
– Sprite Kit đang ở thời kì đầu của nó, việc nó thành công hay thất bại là thứ hoàn toàn không chắc chắn. Thêm vào đó, Sprite Kit chưa hỗ trợ cho bạn tham gia vào việc tuỳ chỉnh các mã OpenGL nên đối với những lập trình viên có thâm niên cao thường không thích thú lắm.
– Những thứ bạn đã viết được trên các engine khác như Corona, Cocos2D không phù hợp với Sprite Kit điều đó có nghĩa là bạn đang bắt đầu từ vạch xuất phát cùng với tất cả mọi người.

* Những lựa chọn của bạn:

Có 4 lựa chọn cho mọi người (Những lựa chọn khác thường không được phổ biến hay phải trả tiền nên không được liệt kê ở đây:

+ Sprite Kit

+ Cocos2D- Iphone

+ Cocos2D-X

+ Unity

* Câu hỏi đặt ra là bạn chọn cái gì để phát triển game cho chính bạn đây?

– Câu trả lời phụ thuộc vào mục đích mà bạn đang hướng tới và vị trí của bạn trong ngành lập trình này.

+ Hãy chọn Sprite Kit nếu:

– Bạn hoàn toàn là một người mới

– Bạn tập trung hoàn toàn vào IOS và chưa có ý định làm việc với các hệ điều hành khác như Android và BlackBerry OS

– Bạn muốn thử một thứ gì đó mới mẻ và có tương lai rộng mở

+ Hãy chọn Cocos2D hay những lựa chọn khác

– Bạn muốn can thiệp vào mã nguồn của OpenGL

– Bạn đã có một thư viện hay một tích luỹ khá lớn của các hệ này (Cocos2D)

– Bạn muốn làm việc với một công cụ đã hoàn chỉnh và có nhiều ví dụ trước đó

+ Hãy chọn Cocos2D-X hay Unity:

– Bạn muốn viết game của mình trên nhiều nền tảng như Android

– Bạn muốn quản lý mọi thứ trong game của mình.

 

=> Tôi đã chọn Sprite Kit rồi nên những bài hướng dẫn từ đây về sau chỉ tập trung vào Sprite Kit..

Cocos2D cũng đã từng làm nhưng việc cài đặt khá là rối rắm nếu bạn muốn có những tính năng mới nhất của IOS như ARC hay đơn giản là giao diện phẳng của IOS 7.

Thiết kế phẳng trong lập trình IOS

Như các bạn đã biết, IOS 7 đã được chính thức áp dụng thiết kế phẳng (Flat Design )

Tuy nhiên IOS 7 chưa xuất hiện chính thức và nếu chúng ta muốn lập trình với Flat Desgin thì buộc iDeveide phải được cài IOS 7 khá là bất tiện.

Đây là phần bắt chước giao diện thiết kế phẳng dành cho Button. Các bạn cứ sử dụng thoải mái 🙂

 

LKFlatDesign

 

 

Source đang update!! Thông cảm 😀