Mở và làm ảnh động với các phiên bản từ Photoshop CS3 trở lên

Như các bạn đã biết, từ phiên bản CS3 (10.0) trở lên Photoshop và ImageReady đã được tích hợp lại làm một vì thế việc thực hiện thao tác tạo Animation cho ảnh đều được thực hiện tại giao diện của Photoshop. Trước đây khi muốn mở file ảnh động để edit trên Photoshop ta dễ dàng mở nó trên ImageReady, tuy nhiên từ CS3 ta không thể mở trực tiếp bằng Photoshop mà cần phải có sự hổ trợ của Apple QuickTime.

Cách mở ảnh động với định dạng .gif trong Photoshop CS3, CS4, CS5

Vì mình sử dụng Photoshop CS3 nên tutorial sẽ chỉ có ảnh minh họa của CS3, các phiên bản về sau này thực hiện tương tự.

Trước hết các bạn cần cài đặt phần mềm Quick Time Player, 1 phần mềm media của Apple, phiên bản 7.1 trở lên. Chi tiết download tại đây.

Sau khi hoàn tất cài đặt, các bạn mở Photoshop

Bước 1: File > Export > Video Frames to Layers

Bước 2: Sau đó sẽ có 1 bảng được hiện ra như thế này:

Look in: tìm đường dẫn tới Folder chứa file ảnh động
File name: các bạn gõ ký tự *.* (đây là ký tự để hiện theo chế độ All file)

Sau khi xong các bạn Load file ảnh vào

Bước 3: Các bạn chọn From Beginning to End để mở toàn bộ Frame của file ảnh:

Bước 4: Windows > Animation để mở bảng Animation

Kick vào đây để hiện chế độ Frame:

Giao diện Animation sẽ như này:

[caption id="" align="aligncenter" width="251" caption="Vì ở ảnh này chỉ có 1 frame nên ta chỉ thấy có 1 frame, nếu như ảnh có nhiều frame nó cũng sẽ xuất hiện nhìêu frame"][/caption]

Cách làm ảnh động

(Thật ra trước đây khi web còn hoạt động trên WeLovePhotoshop.Com đã có 1 bài tutorial hướng dẫn khá chi tiết về cách làm ảnh động, có kèm theo cả video rất dễ hiểu, bạn có thể vào tham khảo ở đây)

Còn sau đây mình sẽ thao tác lại bài tutorial và lấy chính logo của Việt Designer để làm

Chắc hẳn các bạn còn nhớ cách làm Animation bằng hình vẽ trên giấy. Ở mỗi trang giấy chúng ta sẽ vẽ một hành động rồi lật giở từng trang thật nhanh (tầm 5 - 24 hình/giây) và lúc đó chúng ra sẽ thấy hình vẽ như đang chuyển động

Làm ảnh động trong Photoshop cũng tương tự như vậy, mỗi Frame như một trang giấy và chúng ta sẽ có 1 dãy các Frame để tạo thành 1 ảnh động hoàn chỉnh.

Mỗi 1 Layer tương đương 1 Frame vì thế Layer nào hiện (ko tắt con mắt) thì sẽ có trong Frame mà bạn đang chọn.

Ở box Layer mình có 8 Layers --> sẽ có 8 Frames. 

Bước 5: Kick vào đây để nhân đôi Frame (nhưng trước khi nhân đôi layer bạn có thể set trước thời gian cho từng frame, ở đây mình chọn là 0,1s, tuy nhiên bạn có thể chỉnh sửa thời gian sau khi nhân đôi frame sao cho thích hợp với chuyển động của animation)

Tại Frame 2, tắt con mắt Layer 1, bật con mắt của Layer 2 

Cứ thế chúng ta lặp lại với các Layer và Frame còn lại...

Tại bảng trong hình là 3 cách thiết lập số lần lặp lại của animation
Forever: mãi mãi

Once: 1 lần

Other: tùy chỉnh số lần lặp lại

Và đây là kết quả :D

Để có thể save ảnh động ta vào File > Save for Web & Devices (Ctrl + Alt + Shift + S)

Color Table: bảng màu hiển thị những màu có trong ảnh

Color: 256 đây là số lượng màu sẽ được hiển thị trong ảnh, càng nhiều màu chất lượng càng cao và ảnh càng nặng

Đây mới chỉ là cách cơ bản nhất của làm ảnh động, còn nhiều cái phức tạp hơn, chỉ cần các bạn làm tốt khâu thiết kế và lên ý tưởng thì ko có gì là ko thể.

Cách làm Logo theo phong cách American Idol (có hiệu ứng động lóe sáng)

Hôm nay tình cờ, mình thấy một người bạn có một cái logo rất hay, nó mang phong cách của cuộc thi American Idol mà hiện nay đã có phiên bản Vietnam Idol rồi và cuộc thi này rất nổi tiếng, hẵn là ai cũng biết, thế nên khi nhìn vào logo của cuộc thi thì ta có thể dễ dàng nhận ra ngay. Tò mò và muốn làm thử một cái tương tự, mình đã hỏi xin font chữ để làm logo đó, nhưng mình không ngờ là ở trên máy mình đã có sẵn font đó rồi, nó có tên là VfFree21, thế là mình thử bắt tay vào làm ngay.

[caption id="" align="aligncenter" width="300"] Đây chính là Logo của người bạn khiến mình tò mò[/caption]

Sau 30 phút ngồi làm thử thì cuối cùng mình cũng làm được, nom cũng giống được cỡ 90% rồi :D

[caption id="" align="aligncenter" width="402"] Đây là thành quả đầu tiên của mình[/caption]

[caption id="" align="aligncenter" width="402"] Còn đây mình nhái theo đúng logo gốc luôn, nó giống 90% với logo gốc[/caption]

[caption id="" align="aligncenter" width="402"] Còn đây chính là logo gốc của American Idol, mời bạn so sánh[/caption]

Thế là mình mang lên khoe ngay trên Fanpage của mình là I Love [Photoshop] và hỏi xem có ai muốn mình làm một tutorial về logo này không? Và đa số là hưởng ứng khá nhiệt tình nên bây giờ mình sẽ bắt đầu bài tutorial này ngay nhé :D

Nguyên liệu duy nhất đó chính là font chữ cho dạng Logo này, nếu như trên máy bạn chưa có font chữ này thì download tại đây nhé. Sau khi có font rồi thì paste nó vào Control Panel -> Fonts để sử dụng, và chúng ta bắt đầu mở Photoshop ra thực hành nhé.

Bước 1: tạo file new kích thước 600 x 375 px, và để ở dạng Transparent (nền trong suốt). Sở dĩ set nó ở dạng Transparent là vì thông thường Logo người sẽ để nền trong suốt thay vì nền màu.

Bước 2: dùng Eliptical Marquee Tool để vẽ khung tròn cho Logo.

Đầu tiên ta vẽ 1 hình elip như thế này và tô nó màu #215A8F

Tương ta vẽ thêm 3 vòng elip nữa lồng vào trong hình elip lớn với thứ tự màu sẽ là: #00AAF0 > #22579C > #1E2E69, ta sẽ được như hình dưới.

Như vậy cơ bản là ta đã có nền của Logo rồi đấy.

Bước 3: tạo text cho Logo, ở đây mình sẽ dùng chữ VietDesigner.net Photoshop thay vì American Idol.

Thực ra nếu mình để text như thế sẽ không đẹp vì nó không hợp với Logo dạng này, tuy nhiên vì lí do bảo vệ bản quyền nên mình dùng tên của Website để thực hành, còn nếu như bạn làm thì hãy đặt một cái tên khác phù hợp hơn hoặc là dùng luôn cái tên American Idol để thực hành cho dễ so sánh.

Okay, đầu tiên mình sẽ tạo một cái text với font chữ VfFree21 và type dòng VietDesigner.net trước, và đặt nó hơi xéo theo kiểu lên dốc một tí. Sau đó mình tạo thêm một cái text nữa và type là Photoshop, cái này mình giữ nguyên không cho nó xéo như text kia.

Ta sẽ có kết quả như sau:

Bước 4: ta sẽ làm đậm dòng text này lên vì font mặc định thì kiểu font này nó hơi mỏng, nên khi chỉnh blending option sẽ không giống với Logo chính thức, đã nhái là phải nhái cho giống :D

Đầu tiên ta chuyển file text thành file dạng layer, click chuột phải vào layer text, chọn Rasterize Type cho cả 2 cái text luôn nhé.

Khi nó đã thành dạng layer rồi ta có thể chỉnh Stroke cho nó được. Vào Edit -> Stroke và chọn là 2 pixel và màu trắng.

Sau khi chỉnh stroke cho cả 2 layer VietDesigner.net và Photoshop thì nó sẽ đậm lên như thế này đây:

Bước 5: chỉnh Blending Option cho Text hay còn gọi là Layer Style, ở khung Layer bạn sẽ thấy có kí hiệu fx, click vào để chỉnh Blending Option. Ta chọn 3 thông số: Inner Glow, Color Overlay và Stroke; các bạn chỉnh theo 3 thông số dưới đây nhé.

Sau khi chỉnh Blending Option cho layer VietDesigner.net, ta có kết quả sau:

Các bạn có thể chỉnh tương tự như thế cho layer còn lại là Photoshop hoặc có thể copy Layer Style mới vừa làm rồi paste sang đây cho nhanh, ta sẽ được thế này:

Bước 6: thêm dòng chữ TM cho Logo, thật ra có thể bước qua bước này nhưng do đã copy thì copy cho hết luôn vậy :D

Mình dùng font Arial, size 12 để type chữ TM và đặt nó ở bên cạnh chữ P của Photoshop, kết quả cuối cùng trông như thế này đây:

Đây là video clip hướng dẫn trực tiếp cách làm logo, mình chia ra 2 video, một phần là cách làm logo và một phần là cách làm ảnh động lóe sáng. Do mic của mình cùi quá nên nói không được rõ và bị rè, thế nên các bạn chịu khó nghe và bật lớn volume một tí nhé :D

Enjoy ♥

(Part 1 - Hướng dẫn làm logo)

 (Part 2 - Ảnh động lóe sáng)

Nếu thấy bài viết có ích thì đừng lười ấn nút Like hay +1 để ủng hộ cho những bài tutorial lần sau nhé ♥

Cách tạo cơn mưa bằng Photoshop

Sau khi viết xong bài tutorial Cách tạo ảnh động bằng Photoshop, bây giờ mình tiếp tục share một tutorial cách tạo mưa bằng Photoshop, cái này sẽ giúp cho đề thi Contest XII [Thời tiết] lần này. Bài viết này hướng dẫn bạn cách thêm cơn mưa vào ảnh chụp, thực hiện bằng một vài kỹ thuật cũ và nổi tiếng, khi đặt lại với nhau sẽ tạo nên hiệu ứng thuyết phục.

 

Bước 1: Muốn bức ảnh trông u ám hơn, bạn dùng Gradient đen trắng tạo thành một lớp trên layer ảnh (có thể nhìn thấy Fill Adjustment trên thanh layer).

Tiếp tục giảm Opacity 65%.

Bước 2: Chuyển sang công đoạn quan trọng, bạn khởi tạo layer mới (phím tắt Ctrl + Shift + N) tạo thành một lớp Fill (Edit > Fill… và chọn 50% Grey).

Bước 3: Thiết lập một lớp rất nhiễu tại Filter Noise (Filter > Noise > Add Noise và chọn Amount 400 %), tích vào Gaussian và Monochromatic.

Bước 4: Tiếp tục làm mờ layer Noiser đó bằng Gaussian Blur (Filter > Blur > Gaussian Blur).

Bước 5: Bạn cần điều chỉnh những thông số trên lớp này (Image > Adjustments > Levels…) hoặc phím tắt Ctrl + L và làm theo hướng dẫn.

Bây giờ bạn sẽ được hình ảnh như bên dưới.

Bước 6: Muốn hạt mưa hoàn thiện hơn, bạn dùng Filter Blur (Filter > Blur > Motion Blur) và nhớ sắp xếp hướng mưa rơi thật hợp lý vào nhé!

Lựa chọn chế độ hòa trộn Screen cho layer trên.

Bạn có thể làm mưa nhiều hơn bằng cách nhân đôi layer này và di chuyển chúng đến vị trí khác.

Bước 7: Tạo một layer mới (Ctrl + Shift + N), thiết lập Filter Clouds (Filter > Render > Clouds) và chọn Soft Light.

Nếu cẩn thận hơn thì bạn hãy tút thêm những hạt mưa to bằng cách trên nhưng thay đổi chút thông số đi chút nhé.

 

Tiếp theo đây, chúng tớ sẽ hướng dẫn bạn sáng tạo hiệu ứng mưa chuyển động trong ảnh.

Bước 1: Đầu tiên, bạn hãy mở tấm hình gốc dưới đây lên nào.

Thao khảo thêm tut làm ảnh động tại đây.

Bước 2: Tạo một layer mới (Ctrl + Shift + N), đổ màu đen (#000000). Sau đó vào Filter >Noise > Add Noise… và chỉnh thông số Amount còn 60 như hình sau.

 

Bước 3: Tiếp đến, bạn tìm đến phần Filter > Blur > Motion Blur… và chỉnh thông số như hình mẫu bên dưới.

Bước 4: Lần lượt tạo thêm 3 layer nữa, lặp lại bước 1 với thông số Amount tăng lên +1 (61, 62, 63) và vẫn giữ nguyên thông số mặc định tại bước 3.

Chuyển chế độ hòa trộn của 4 layer này thành chế độ Screen và giảm Fill xuống còn 60%.

Bước 5: Bấm tổ hợp phím Ctrl + Shift + M (Photoshop CS2) hoặc vào Window > Animation (Photshop CS3) để chuyển sang Image Ready. Riêng Photoshop CS5 đã tích hợp sẵn vào Window > Animation và nhân thêm layer nữa.

Bước 6: Nhấp chuột chọn layer thứ 1 (phía dưới bảng Frames) và click vào con mắt phía bên bảng Layers.

Bước 7: Lần lượt nhấp chọn layer thứ 2 và làm tương tự cho đến layer cuối cùng.

Bước 8: Nhấp chọn tất cả 4 layer rồi click chuột trái để mặc định thời gian chuyển đổi giữa 2 layer.

Bước 9: Nhấn tổ hợp phím Alt + Shift + Ctrl + S (Save for Web…) để lưu hình lại, định dạng file *.gif và chọn chế độ Forever tại phần Looping Option.

 

Còn bây giờ chính là kết quả đấy teen ạ.

 

Source: Freevnn

 

Còn đây là 2 video clip tham khảo cách làm mưa và cách làm ảnh động:

 

Sau đây là một vài ví dụ về những cơn mưa lãng mạn ♥
Đây là những ảnh động làm tự hiệu ứng trên, nếu bạn ko thấy nó động do load lâu thì nhấp trực tiếp vào nó để thấy hình động nha :D