Menu Điều Hướng

Tạo iOS 7 Photos Icon bằng Photoshop

Trước đây mình đã giới thiệu cho các bạn bài viết Tạo biểu tượng (icons) theo phong cách IOS7 với CSS3, hôm nay mình sẽ cùng với các bạn tiếp tục thiết kế biểu tượng phong cách IOS7 , nhưng lần này là làm bằng Photoshop. Qua bài viết này, các bạn có thể tự tay thiết kế cho riêng mình nhiều bộ icon khác nhau.

Đây là thành quả mà chúng ta sẽ có được khi hoàn thành bài viết này :

ios-7-photos-icon-in-photoshop-14

Bước 1 : Tạo một file mới với kích thước vào khoảng 1024 x 1024 pixels.

ios-7-photos-icon-in-photoshop-01

Bước 2 : Chọn công cụ Pain Bucket Tool (G) và chọn màu #a9d8ea , rồi đổ màu vào làm background.

ios-7-photos-icon-in-photoshop-02jpg

Bước 3 : Tạo một layer mới, rồi chọn công cụ Rounded Rectangle Tool (U) với tùy chỉnh radius là 220 pixels. Ở chỗ này, tùy thuộc vào kích thước chúng ta vẽ , mà các bạn ấn định giá trị radius cho phù hợp. Khi vẽ, các bạn nên nhấn giữ nút Shift để canh đều hình như sau :

ios-7-photos-icon-in-photoshop-03

Bước 4 : Bây giờ chúng ta sẽ vẽ các cánh hoa với các màu sắc khác nhau.Để các cánh hoa tập trung đúng vị trí giữa, chúng ta sẽ bật “guides” và canh giữa hình. Để bật , các bạn có thể nhấn Ctrl + R, lúc này các bạn sẽ thấy hình ảnh thước đo, rồi sau đó dùng chuột kéo từ ” hình thước ” để định vị guide.

ios-7-photos-icon-in-photoshop-04

Bước 5 : Chọn công cụ Rounded Rectangle Tool rồi chọn màu  #faa733, tạo thêm một layer mới, rồi từ layer này, các bạn vẽ một hình như sau :

ios-7-photos-icon-in-photoshop-05

Nhớ đặt hình này nằm phía bên trên điểm giữa khoảng 30 pixel.

Bước 6 : Tại layer mới vừa vẽ hình xong, các bạn nhấn Ctrl + J để nhân bản layer này. Sau đó tại layer mới vừa được nhân bản, các bạn nhấn tiếp Ctrl + T . Lúc này các bạn sẽ có kết quả thế này :

ios-7-photos-icon-in-photoshop-06

Bước 7 : Bây giờ các bạn dùng chuột và kéo hình nghiêng một góc khoảng 45 độ, sau đó nhấp vào layer chứa hình này và đổi sang màu #f26967. Sao cho có kết quả như sau :

ios-7-photos-icon-in-photoshop-07

Bước 8 : Làm lại tương tự từ bước 6 -> bước 7 , nhưng nhớ đổi màu cho hình kế tiếp là #d486ad.

ios-7-photos-icon-in-photoshop-08

Và màu cho hình kế tiếp  #a38ec3.

ios-7-photos-icon-in-photoshop-09

Màu kế tiếp #79abdb.

ios-7-photos-icon-in-photoshop-10

Tiếp tục với màu #6cc198.

ios-7-photos-icon-in-photoshop-11

Màu #b3d557.

ios-7-photos-icon-in-photoshop-12

cuối cùng là màu #f8e32b.

ios-7-photos-icon-in-photoshop-13

Bước 9 : Tại mỗi layer chứa hình, các bạn thay đổi chế độ Blend Mode sang Multiply để có được kết quả cuối cùng như sau :

ios-7-photos-icon-in-photoshop-14

Rất đơn giản và dễ thực hiện phải không các bạn. Nếu có gì chưa hiểu, thì đừng ngần ngại để lại lời nhắn dưới dạng comments nhé.

Chúc các bạn thành công !


design icon ios7

Tin Tức Liên Quan

Tạo icon RSS bóng bẩy
Tạo icon RSS bóng bẩy

Trong bài viết này chúng ta sẽ tạo một biểu tượng rss đầy màu sắc và cực kỳ bóng bẩy cho blog của bạn

Tạo chữ màu bạc tỏa sáng bằng photoshop
Tạo chữ màu bạc tỏa sáng bằng photoshop

Trong bài viết này bạn sẽ có thể tự tay làm một hiệu ứng chữ đẹp mắt cho website hay blog của bạn, với chữ màu bạc tỏa sáng cực kỳ đẹp mắt.

Tạo chữ phát sáng nhiều màu sắc
Tạo chữ phát sáng nhiều màu sắc

Với hướng dẫn này mình sẽ chỉ các bạn tạo hiệu ứng chữ phát sáng với nhiều màu sắc lấp lánh như hình dưới, chỉ với 5 bước đơn giản thui, nào bắt đầu bạn nhé

Mẹo ghép ảnh cực cool bằng Photoshop
Mẹo ghép ảnh cực cool bằng Photoshop

Bài hướng dẫn giúp bạn có được những bức ảnh ghép ấn tượng với thao tác đơn giản

Tự tay làm danh thiếp cực pro bằng Photoshop
Tự tay làm danh thiếp cực pro bằng Photoshop

Thủ thuật này sẽ giúp bạn thiết kế danh thiếp có giao diện chuyên nghiệp, hiện đại mà không cần phải có quá nhiều kiến thức về đồ họa mà chỉ bằng Photoshop và vài bước thao tác đơn giản

Tạo button đơn giản cho web bằng Photoshop
Tạo button đơn giản cho web bằng Photoshop

Trong bài viết này chúng ta sẽ tự tay làm một button đơn giản cho website hay blog của bạn chỉ với vài bước đơn giản

Mẹo tạo chữ kim loại 3D
Mẹo tạo chữ kim loại 3D

Chỉ với vài bước đơn giản mình sẽ giúp các bạn tạo logo chữ kim loại hiệu ứng 3D cho website của mình, rất chi là dễ dàng lun, cùng thực hiện theo nhé

Tạo Abstract Wormhole Background
Tạo Abstract Wormhole Background

Hôm nay, mình sẽ chỉ các bạn cách sử dụng brush và điều chỉnh các lớp trong photoshop cs5, bạn có thể bạo ra một hình nền trừu tượng

Hiệu ứng chữ băng
Hiệu ứng chữ băng

Hôm nay, hy vọng rằng những hướng dẫn sau đây sẽ truyền cảm hứng cho bạn để tạo thêm một số hiệu ứng ice cho thiết kế của bạn

Tư vấn thiết kế website giá rẻ

Chat FB
Tư vấn thiết kế website giá rẻ
Chat Zalo

Điện Thoại