[PHOTOSHOP] Hướng dẫn tạo hình nền chữ huyền ảo

Chẳng biết nó là thể loại gì nhưng thấy đẹp nên post chia sẻ với mọi người.
DEMO:

Thật awesome!!!   :)
Nào hãy cùng bắt tay vào thực hiện, bài này rất đơn giản, chỉ với vài thao tác cơ bản mà thôi!

B1: Mở PTS, tạo 1 hình mới

Ở đây mình để Full HD.

B2: Tạo nền.

Tô đen bức ảnh.
Ấn Ctrl + J để nhân đôi layer gốc, dùng công cụ Gradient Tool (hoặc Brush) để vẽ một nửa hình tròn màu trắng, có độ rộng, độ tỏa vừa phải trên layer vừa nhân đôi.
Dùng Filter > Noise > Add Noise để thêm noise cho layer này.

Hạ Opacity hoặc Fill xuống cho vừa mắt.
Mục đích của việc này là tạo ra một cái nền không quá đơn điệu, tạo cảm giác như có 1 bóng đèn đang chiếu vào   :v

B3: Thêm chữ nền

Dùng Text Tool để viết chữ, viết một đoạn sau đấy copy & paste sao cho phủ 1 khoảng rộng hơn bức hình. Nên để phông chữ nhỏ, dễ nhìn, màu chữ trắng.

Xong rồi thì ấn Ctrl + T rồi quay cả đám chữ đấy đi 1 góc khoảng 30 độ, tùy bạn.

Hạ Opacity xuống khoảng 3-5% sẽ được như này

B4: Tạo 1 kí hiệu hoặc text trung tâm của bức ảnh

Phần nền như thế coi như đã tạm, giờ ta chuyển sang thiết kế một ký hiệu hoặc viết 1 chữ làm trung tâm của bức ảnh.

Ở đây mình tạo 1 document mới, dùng Path Tool để vẽ ra 1 chữ 'N' cách điệu như này   :v

Sau đó kéo layer chữ N trắng về file vừa nãy đang làm ở trên, chỉnh position và bóp hình đi 1 chút sẽ được như này

Lưu ý nếu bạn viết Text trực tiếp lên đây thì phải Raterize layer đó (click chuột phải vào layer text rồi chọn rasterize layer)

B5: Sao chép layer nền phần ký hiệu trung tâm

Như ở bức ảnh hoàn thành thì phần chữ 'N' không còn là màu trằng đơn điệu như bức ảnh trên nữa mà nó được tạo nên từ các dòng text nền phía dưới. Thực chất của việc này là chọn ra 1 phần layer chữ nền vừa bao trọn phần ký hiệu kia, sau đó sao chép phần chọn đấy ra 1 layer khác, tăng opacity lên là được. Chú ý phần chữ nền ta đang để opacity khoảng 5% nên nó mới mờ như thế, nếu ta tăng lên 100% thì nó lại trắng bình thường!

Trước hết phải Rasterize Layer chữ nền.

Ctrl + click vào biểu tượng layer ký hiệu, sẽ có 1 cùng select được bao quanh ký hiệu.

Ấn sang layer text nền rồi ấn Ctrl + J để sao chép sang 1 layer khác.

Tăng opacity layer đó lên 100%, và tắt layer ký hiệu kia đi

Được như này

Nếu vẫn còn vùng selection thì ấn Ctrl + D để bỏ đi

B6: Thêm một vài chi tiết khác

Bạn có thể dùng các công cụ như Shape, Text Tool, Brush... để thêm một vài chi tiết khác cho đỡ đơn điệu.

Có thể thêm 1 vài Len Flare cho sinh động, cái này mình rất thích   :)

B7: Giảm bớt phần viền để làm nổi bật phần trung tâm

Bức hình đã cơ bản hoàn thiện bạn có thể lưu ngay bức ảnh coi như hoàn chỉnh. Hoặc có thể thêm 1 vài layer nhỏ để làm nổi bật phần trung tâm nên. Có thể dùng brush để bôi đen những phần góc hoặc làm như sau:

Tạo 1 layer mới ở trên cùng, bôi đen hoàn toàn, hạ opacity xuống khoảng 50% để có thể nhìn thấy các layer phía dưới

Dùng Lasso Tool để chọn 1 cùng chọn ở trung tâm bức ảnh, bao quanh phần ký hiệu hoặc một số chỗ khác muốn làm nổi bật. Xóa vùng chọn đó đi

Để Feather lớn để không làm quá lộ đường cắt

Cuối cùng, có thể giảm tiếp hoặc tăng opacity lên. Dùng Gaussian Blur (radius khoảng 50 - 60) để làm mờ đường cắt, có sự tương đối giữa phần trung tâm và phần viền

Vậy là đã hoàn tất bức hình, chúc bạn thành công!

Read More

[Show] WindowForm - Duyệt phim - phần mềm quản lý thông tin phim

Mình xin giới thiệu tới các bạn sản phẩm mới hoàn thành: Phần mềm Duyệt Phim - phần mềm quản lý các thư viện phim, lấy thông tin phim từ IMDb.

Hầu hết các phim chất lượng cao (Bluray, DVD) có tên tuổi hiện nay đều có trên IMDb, và đây là 1 kênh có tiếng về đánh giá chất lượng phim.

Chức năng chính:

- Duyệt các phim trong thư mục, đưa chúng vào các thư viện. Phần mềm chỉ quét các file *.mkv, *.mp4, *.avi định dạng thường thấy với các phim chất lượng cao và mỗi thư mục con chỉ quét 1 phim.

- Cập nhật thư viện: Khi thư mục trên ổ cứng có thay đổi về phim (thêm bớt 1 số phim) => Thêm những phim mới được đưa vào thư mục, xóa những phim đã bị loại bỏ khỏi thư mục, những phim khác không bị thay đổi.
- Hiển thị trang tìm kiếm IMDb, cho người dùng chọn trang thông tin và dùng RegularExpressions để get các thông tin về lưu vào SQLite. Riêng phần hình ảnh dùng WebClient để download thông tin về rồi lưu vào SQLite dạng byte[].
- Phần Poster có ContextMenuStrip để: Chọn hình ảnh, lưu hình ảnh, xóa hình.

- Và các chức năng phụ khác.

Hướng dẫn sử dụng:

- Sau khi down phần mềm về các bạn chạy bình thường. Không nên để trong ổ cài win. Phần mềm sẽ sinh ra file Database - là nơi lưu CSDL, không được xóa nó và các file kèm theo.
- Lần đầu sử dụng chương trình chọn Library chọn Add => đặt tên và đặt đường dẫn cho thư viện.

Lưu ý về cách bố trí thư mục trên ổ cứng:
Phần mềm sẽ duyệt các thư mục con trong thư mục đã chọn. Với mỗi thư mục con chỉ chọn ra 1 file mkv/mp4/avi và tên của thư mục con sẽ là tên của phim phục vụ cho tìm kiếm sau này (còn tên file thì không quan trọng). Trong các thư mục con lại duyệt đệ quy tới các thư mục con nữa... (tên thư mục con có thể bắt đầu bằng '#')
=> Vì vậy cấu trúc thư mục nên như sau: Thư mục chính "Films", có các thư mục con: "Clash", "#Bad boys", "Trilogy - Transformer" -> { "Transformer 1", "Transformer 2", "Transformer 3" }... Trong thư mục con nên để duy nhất 1 file phim và các file phụ đề.

- Tìm và get thông tin từ IMDb: Chọn 1 phim click vào "Cập nhật thông tin từ IMDb", trang tìm kiếm hiện ra, bạn click vào link phim phù hợp, đợi một lúc hiện ra "Lấy từ trang này".

=> DOWNLOAD (MF) <=

(Download về, giải nén, sử dụng ngay. Gồm 2 phiên bản: một là phiên bản thường với giao diện mặc định của Window, một phiên bản sử dụng giao diện của DevExpress 13.1 - yêu cầu máy phải cài sẵn Dev)

Read More

[Web] Chuẩn hóa, rút gọn CSS & JavaScript

Trong thiết kế web hẳn nhiều lúc bạn viết ra được những file CSS, JS rất dài nhưng bạn không chắc rằng nó đã đúng chuẩn chưa, hợp SEO chưa hoặc bạn muốn rút gọn nó để giảm kích thước file???

Rất đơn giản, sau đây tôi sẽ hướng dẫn các bạn cách chuẩn hóa, rút gọn CSS và JavaScipt của mình.

I. Chuẩn hóa

- Với CSS thì chắc hẳn bạn cũng đã biết mỗi trình duyệt có 1 cách thức xử lý CSS khác nhau, do đó đôi khi bạn phải viết nhiều lần code CSS chỉ với 1 mục đích nào đó, để có thể tương tác với các các browser tốt nhất. Đơn giản nhất là các hiệu ứng như animation, transform, border-radius... đặc biệt là các thuộc tính của CSS3 thì với mỗi loại trình duyệt phải có 1 loại code tương ứng. 

-webkit-, -o-, -moz-... là các tiếp đầu ngữ gắn với thuộc tính CSS để đáp ứng các trình duyệt. Chẳng hạn như với Chrome thì nó sử dụng tiếp đầu ngữ -webkit-: -webkit-transform, -webkit-gradient... Với IE thì là -moz-, với Opera thì là -o-...

Chẳng phải nhớ hết và code hết chúng vì đã có công cụ giúp ta làm điều này. Tức là bạn chỉ cần code 1 version và sử dụng công cụ để nó tự động thêm các version khác. Công cụ tại trang web này.

- Với JavaScript bạn có thể có nhiều công cụ để kiểm tra độ chính xác của code như kiểm tra lỗi cú pháp... 

Bạn có thể sử dụng trang web này. JSLint là công cụ rất hữu ích và chính xác.

II. Rút gọn

Với 1 trang web lớn thì kích thước các file CSS, JS có thể là rất lớn và bạn lo ngại nó sẽ làm giảm tốc độ tải trang, gây phiền phức cho người xem. Hoặc bạn mất nhiều công sức để có thể nghĩ ra những dòng code thâm hiểm và không muốn ai soi mói. Đơn giản là việc rút gọn code sẽ làm điều này.

Việc rút gọn code sẽ loại bỏ những dòng comment trong file, những dầu xuống dòng thừa thãi hay những dấu cách chẳng có tác dụng gì, tối ưu các tên biến, cách thức tổ chức code để nhằm rút gọn tối đa nội dung của file gốc mà không làm mất đi những chức năng vốn có của nó. Việc làm code trở thành "một dòng duy nhất" cũng có 1 tác dụng là hạn chế sự soi mói của các coder gà mờ (mình chỉ nói là hạn chế và với các coder newbie thôi nhá). Nhưng tóm lại tác dụng lớn nhất của nó là làm giảm kích thước file, thậm chí có thể làm tăng tốc độ đọc file của trình duyệt.

Với CSS

Thì những việc mà rút gọn có thể làm như: chuyển "0px" thành "0", xóa comment, xóa các dấu Enter, dấu cách thừa (chẳng hạn border: 1px solid; => border:1px solid;) => file với 1 dòng duy nhất, gộp các thuộc tính cùng loại với nhau...

Các bạn có thể sử dụng các công cụ online: http://cssminifier.com/ hoặc http://gpbmike.github.io/refresh-sf/.

Như vậy sau khi chuẩn hóa ở trên + rút gọn là bạn có thể có được 1 file CSS tối ưu.

Đôi khi bạn muốn biến đổi ngược file đã rút gọn lúc trên, tức là biến nó về dạng thông thường, có xuồng dòng, tab đúng chuẩn... thì bạn có thể vào đây.

Với JavaScript

Việc rút gọn nội dung JavaScript có thể thực hiện: xóa các dấu Enter, cách không cần thiết, rút gọn các biến cục bộ (thành a, b, c, d...), rút gọn các hàm...

Các công cụ online tại http://jscompress.com/ hoặc http://gpbmike.github.io/refresh-sf/

Tương tự như với CSS bạn cũng có thể chuẩn hóa code JavaScript với công cụ này.

Read More