Làm chủ Pen Tool chỉ với vài phút

Học cách làm chủ Pen Tool với hình chú chim cánh cụt dễ thương.

Trong Photoshop Pen Tool với khả năng hỗ trợ hình ảnh vector và sự linh hoạt trong ứng dụng của mình, Pen Tool là công cụ không thể thiếu với người thiết kế đồ họa chuyên nghiệp. Đối với những người nghiệp dư công cụ này cũng tỏ ra hữu ích, khi cho phép thực hiện các thao tác như chọn vùng hay cắt ghép vật thể có hình thù đặc biệt.

Trong bài hướng dẫn này chúng ta sẽ học cách sử dụng công cụ quan trọng này bằng cách vẽ lại hình một chú chim cánh cụt xinh xắn.

Đây là hình mà chúng ta sẽ tạo ra:

Cách làm:

Bước 1:

Tải hình mẫu từ đây: http://www.sxc.hu/photo/1104824

Chúng ta sẽ dùng hình mẫu này để vẽ theo và luyện tập cách dùng Pen Tool.

Mở hình đã tải trong Photoshop: vào menu File -> Open. Tiếp theo, vào menu Image -> Image Size và giảm kích thước xuống 1800 x 2546 pixel.

Trên cửa sổ Layers, kéo thả Background Layer xuống biểu tượng New Layer để sao chép layer này. 

Tiếp theo, hãy kéo và thả Background Layer xuống biểu tượng Delete để xóa nó.

Bấm vào layer Background Layer và giảm giá trị Opacity xuống 50% để có thể nhìn rõ các đường nét chúng ta sẽ tạo ra trong các bước tiếp theo.

Bước 2:

Bấm vào biểu tượng New Layer để tạo ra layer mới. Bấm hai lần vào layer vừa tạo và đổi tên thành ‘Body’. 

Trên thanh công cụ, hãy chọn Pen Tool (phím tắt P), rồi điều chỉnh cài đặt như hình dưới đây.

Bước 3:

Chúng ta sẽ bắt đầu vẽ đường bao quanh phần thân của chú chim cánh cụt.

Trước hết, hãy bấm một lần vào đỉnh đầu; một hình vuông nhỏ sẽ hiện lên. Hình vuông này được gọi là “điểm neo” (anchor point). Đó là điểm khởi đầu cho đường Path.

Đối với các vùng to hơn, bạn có thể dùng các đường Path to hơn thay vì tạo ra nhiều điểm neo, để đường Path bao quanh được mượt hơn. Nhưng bạn có thể thử cả hai cách để xem cách nào tỏ ra phù hợp với nhu cầu của bạn nhất.

Khi bạn di chuyển đến các vùng nhỏ và có nhiều chi tiết hơn như chân, bạn cần dùng nhiều điểm neo và các đường Path ngắn hơn.

Bước 4:

Khi đã có điểm Anchor đầu tiên (tạo ra ở trên), hãy bấm vào điểm nối giữa đầu và cánh và giữ chuột.

Bây giờ, vẫn giữ chuột, hãy kéo con trỏ xuống. Bạn sẽ thấy rằng đường Path sẽ bị cong theo. Giữ chuột và kéo con trỏ, rồi thả khi đường Path chạy sát quanh đầu con chim.

Nếu như lần đầu làm đường Path chưa được chính xác, bạn có thể sửa chữa bằng ba cách.

Cách thứ nhất là xóa bỏ điểm neo mới nhất được tạo ra bằng cách nhấn phím Delete. Khi đó, điểm neo cuối cùng được tạo sẽ bị xóa. Sau khi xóa, bạn cần bấm vào điểm neo gần nhất điểm neo bị xóa để tiếp tục đường Path; nếu không làm như vậy, một đường Path nhánh con mới sẽ được tạo ra.

Cách thứ hai, là chỉnh sửa góc độ cong của đường Path thông qua công cụ Convert Point. Khi tạo ra đường Path, bạn sẽ thấy có hai đường thẳng giao nhau ở điểm neo thứ hai. Các đừong này được gọi là đường định vị/định hướng. Các đường này sẽ điều khiển góc độ và độ dài của đường cong.

Để sử dụng Convert Point Tool, hãy giữ phím Alt (PenTool vẫn được chọn trên thanh công cụ). Tiếp theo, hãy di chuyển con trỏ lên gần điểm đầu tiên đường thẳng ở phía trên. Bạn sẽ thấy biểu tượng con trỏ thay đổi (Con trỏ chỉ thay đổi khi bạn di nó đến gần điểm neo hoặc đầu của đường định vị). Hãy bấm và giữ con trỏ trên đầu đường định vị trên. Giữ chuột và di chuyển con trỏ để chỉnh sửa đường cong.

Cách thứ ba để chỉnh sửa đường Path là giữ phím Ctrl rồi bấm và giữ chuột  để thay đổi các điểm neo/đường Path. Bạn có thể dùng cách này để di chuyển điểm neo/đường Path hoặc thay đổi kích thước của đường Path.

Nếu cần, hãy vẽ thử một vài đường để làm quen với các thao tác trên.

Bước 5:

Bạn có thể thấy rằng đường định vị dưới của đường Path đầu tiên là khá dài. Nếu để nguyên độ dài như vậy, bạn sẽ không thể vẽ đường cong nhỏ xung quanh phần cánh của con chim, do đường định vị dài chỉ có thể tạo ra các đường cong lớn (và ngược lại, đối với các đường cong nhỏ, độ dài của đường định vị cần phải ngắn hơn).

Để thu nhỏ đường định vị, hãy giữ phím Alt, bấm giữ chuột rồi kéo đầu của đường định vị dưới lên trên, và đặt nó theo chiều của cánh chim, ở vị trí khá gần điểm neo thứ hai.

Hãy tiếp tục thao tác giống như nêu trên để tạo ra các đường cong lớn nhỏ sao cho tạo ra đường Path bao quanh thân con chim như hình dưới đây:

Khi thao tác, hãy nhớ các nguyên tắc:

- Giữ chuột và kéo con trỏ để tạo đường cong

- Đường định vị dài sẽ tạo ra đường cong lớn, đường định vị ngắn sẽ tạo ra đường cong nhỏ hơn.

- Bấm vào điểm neo gần nhất khi bạn xóa điểm neo

- Dùng công cụ Convert Point để điều chỉnh độ dài của đường định vị

- Phóng to các vùng chi tiết nhỏ để tạo ra các đường thẳng và đường cong chính xác hơn

Bước 6:

Khi vẽ xong đường bao quanh cánh phải của chú chim, hãy bấm vào điểm neo đầu tiên để đóng và hoàn tất đường Path. Hình của bạn sẽ trông giống như thế này:

Tiếp theo, hãy bấm vào biểu tượng ô màu ở dưới thanh công cụ để đổi màu chính thành màu đen.

Bấm chuột phải (Pen Tool vẫn được chọn trên thanh công cụ) và chọn Fill Path. Tiếp theo, chỉnh cài đặt như hình dưới đây.

Nhấn phím Delete để xóa bỏ đường Path của Pen Tool sẽ chạy quanh thân con chim.

Hình của bạn sẽ trông như hình dưới đây:

Bước 7:

Trên cửa sổ Layers, bấm vào biểu tượng mắt bên cạnh layer Body để ẩn layer này đi.

Tạo ra layer mới (phía trên của layer ‘Body’) và đặt tên cho layer này là 'Stomach'. Hãy dùng Pen Tool để vẽ đường xung quanh phần màu trắng trên thân chú chim.

Khi đã vẽ xong và đóng đường Path, hãy đổi màu chính thành trắng, bấm chuột phải và chọn Fill Path. Nhấn phím Delete để xóa bỏ đường của Pen Tool.

Hình của bạn khi vẽ xong phần thân màu trắng:

Bước 8:

Tạo ra layer mới và đặt tên cho layer này là ‘Left Eye’. Ẩn tất cả các layer khác (bấm vào biểu tượng mắt) trừ layer có hình mẫu.

Để vẽ lại mắt, bạn có thể dùng Ellipse Tool hoặc vẽ đường xung quanh bằng Pen Tool. Sau đó, hãy tô màu toàn bộ với màu đen bằng lệnh Fill Path tương tự như ở trên.

Sau khi xong mắt bên trái, hãy sao chép Layer này (nhấn Ctrl+J) rồi dùng công cụ Move (giữ phím Ctrl rồi dùng chuột di chuyển vật thể) để tạo ra mắt bên phải. Đổi tên cho layer này là ‘Right Eye’.

Bước 9:

Tạo ra layer mới và đặt tên cho nó là ‘Beak’. Tiếp tục ẩn các layer còn lại rồi vẽ đường xung quanh mỏ chim bằng Pen Tool. Đổi giá trị màu thành #fbdf26. Tô màu với lệnh Fill Path rồi nhấn phím Delete để xóa đường Path.

Bước 10:

Xóa layer hình mẫu và bấm vào biểu tượng mắt bên cạnh các Layer khác để hiển thị tất cả. Tạo ra layer mới, kéo nó xuống dưới cùng cửa sổ Layers và tô màu trắng toàn bộ (dùng Paint Bucket trên thanh công cụ).

Hình chim cánh cụt sau khi đã hoàn tất:

Hy vọng bài viết này sẽ có hữu ích cho cho các bạn đang theo học đồ họa với Photoshop. Chúc các bạn thành công!

Read More

Xử lý ASP.NET PostBacks với URL Rewrting

Một điều mà mọi người thường mắc phải khi lập trình web với ASP.NET và Url-Rewriting đó là việc phải xử lý tình huống postback. Giả sử bạn đã rewrite url của bạn thành http://lichsu.vn/1/Thoi-trang.html, nhưng khi bạn postback lại server thì lúc đó url trên địa chỉ trình duyệt lại gọi về http://lichsu.vn/Categories.aspx?id=1.

Cách xử lý cũng rất đơn giản, trong hàm Page_Load của trang bạn thêm vào như sau:

if (!Page.IsPostBack)

{

form1.Action = Request.RawUrl;

}

Tóm lại đơn giản là bạn chỉ cần thêm một vài dòng code như trên là có thể không bị lỗi khi postback nữa.Chúc các bạn vui vẻ (to be continued).

Sử dụng CollectionPager khi rewrite url và một số lỗi phát sinh khi đưa web lên server

Nếu trong Project của bạn có sử dụng thư viện CollectionPager.dll để phân trang và cũng sử dụng rewrite url, nếu để mặc định, khi bạn nhấn vào số trang sẽ bị lỗi. Trong trường hợp này bạn khắc phục bằng cách set thuộc tính của CollectionPager PagingMode=”PostBack”, và trong trang Codebehind khi gọi hàm dùng để phân trang dữ liệu phải đưa ra ngoài khối if(!Page.IsPostBack) – nếu trang đó có sử dụng.

Một số lỗi phát sinh khi upload web lên server:

-          Lỗi 404 không tìm thấy trang đó trên server, có thể do IIS server của nhà cung cấp hosting chưa cấu hình để bạn có thể rewrite url. Bạn nên liên lạc với bộ phận kỹ thuật của nhà cung cấp yêu cầu cấu hình cho bạn.

-          Một lỗi nữa, là bạn rename phần mở rộng của file thành .html nên IIS sẽ hiểu website của bạn là web tĩnh và có thể sinh lỗi. Cách khắc phục bạn có thể chỉ rewrite url và vẫn giữ nguyên phần mở rộng là .aspx, hoặc cũng phải liên lạc với hỗ trợ kỹ thuật của bên cung cấp hosting giúp bạn cấu hình IIS để chạy .html.

Kết luận:

Trên đây là một số bài viết liên quan đến rewrite url trong asp.net và một số lỗi thường gặp, tôi hy vọng qua bài viết này các bạn sẽ có một cái nhìn tổng thể hơn về vấn đề rewrite url.

Read More

Viết mã PHP kết nối vào một CSDL MySQL

Trong bài viết này sẽ chỉ cho bạn thấy cách thức kết nối vào một cơ sở dữ liệu MySQL bằng cách sử dụng PHP.
Kết nối vào một Database
Hàm mysql_connect được sử dụng để kết nối vào một cơ sở dữ liệu MySQL. Hàm này nhận các tham số là host, username, và password và trả lại một giá trị chứng thực kết nối MySQL. Ví dụ sau đây kết nối đến một cơ sở dữ liệu bằng cách dùng biến $host, và $un và $pw được đưa vào từ một Form để kết nối tới cơ sở dữ liệu.
$link = mysql_connect($host, $un, $pw);Tất cả các tham số đối với hàm này là tùy chọn. Các giá trị sau đây được giả định dùng cho các tham số bị thiếu.
Các giá trị tham số mặc định Tham số Giá trị
Host
'localhost:3306'
Username
Tên của người sử dụng nắm được quyền sử dụng tiến trình máy chủ
Password
Không có
Ví dụ sau đây cho thấy cách thức liên kết đến localhost mà không cần cung cấp username hay password.
$link = mysql_connect("localhost");hoặc $link = mysql_connect("localhost", "root","localhost")
Nếu cuộc kết nối này không thành công, thì hàm này trả lại giá trị false. Bạn nên sử dụng giá trị trả lại để xem cuộc kết nối của bạn có thành công hay không.
if (!$link = mysql_connect($host))
exit("Unable to connect to $host");Lựa chọn một cơ sở dữ liệu
MySQL Server là một hệ quản trị cơ sở dữ liệu và do đó nó chứa nhiều cơ sở dữ liệu. Trên thực tế thì khi làm việc chúng ta thường phải xác định một cơ sở dữ liệu nào đó để làm việc. Hàm mysql_select_db được sử dụng để lựa chọn một cơ sở dữ liệu. Hàm này lấy các tham số là tên của cơ sở dữ liệu và giá trị chứng thực kết nối. Giá trị chứng thực kết nối là tùy chọn và nếu nó bị bỏ đi thì hàm này sẽ cố gắng sử dụng giá trị chứng thực kết nối của đường kết nối được mở gần nhất trước đó. Nếu không tồn tại bất cứ một đường nối nào cho nó, thì hàm này sẽ thiết lập một đường nối như thể hàm mysql_connect đã được gọi mà không có tham số. Ví dụ sau đây lựa chọn cơ sở dữ liệu, tìm kiếm bằng cách sử dụng giá trị biến $link đã được trả lại từ hàm mysql_connect.
mysql_select_db("search", $link);Nếu hàm này thất bại, nó sẽ trả lại false. Bạn có thể sử dụng giá trị này để xem hàm đó có thực hiện thành công hay không.
if (!mysql_select_db("search", $link))
exit("Unable to select the database");Thực hiện các câu truy vấn
Hàm mysql_query nhận một câu truy vấn hoạt động trên cơ sở dữ liệu và chuỗi kết nối như là các tham số. Chuỗi kết nối là tuỳ chọn và nếu bị bỏ đi thì cái được sử dụng là đường kết nối mở cuối cùng. Bạn có thể khồng dùng dấu chấm phẩy trong chuỗi truy vấn. Ví dụ sau định nghĩa chuỗi truy vấn SQL, và thực thi một câu truy vấn trên cơ sở dữ liệu đã được chọn.
$query = "SELECT Page, Directory FROM search";
$result = mysql_query($query, $link);Nếu câu truy vấn không thành công, thì hàm sẽ trả lại false. Bạn có thể sử dụng giá trị này để xác định xem liệu hàm đó có thực hiện được hay không.
$query = "SELECT Page, Directory FROM search";
if (!$result = mysql_query($query, $link))
exit("Illegal query");Nhặt ra các bản ghi từ một câu truy vấn
Hàm mysql_fetch_array có thể được sử dụng lấy ra một hàng từ kết quả để đưa vào một mảng. Hàm này nhận các tham số là tập bản ghi có được như là kết quả của câu truy vấn, và một kiểu trả lại. Kiểu trả lại là tuỳ chọn và được tổng kết trong bảng sau.
Kiểu mảng
Kiểu trả lại
Ý nghĩa
MYSQL_ASSOC
Trả lại một mảng kết hợp.
MYSQL_NUM
Trả lại một mảng số.
MYSQL_BOTH
Trả lại một mảng kết hợp, mảng đó cũng được đánh chỉ mục bằng các con số. Đây là giá trị mặc định.
Ví dụ sau đây lấy ra một hàng từ một tập kết quả, và đặt nó vào trong một mảng kết hợp có tên là $row.
$row = mysql_fetch_array($result, MYSQL_ASSOC);Nếu không lấy ra được hàng nào thì hàm này trả lại false. Bạn có thể dùng hàm này trong một vòng lặp để lặp lại thao tác trên tất cả các bản ghi nằm trong tập kết quả.
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
// Thao tác với hàng ở đây
}Nếu bạn sử dụng một mảng kết hợp thì bạn có thể tiếp cận từng phần tử được bằng cách sử dụng tên gọi của cột như thấy ở ví dụ sau.
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
print $row["Directory"] . "\t" . $row["Page"] . "<br>\n";
}Đóng tập kết quả và đường kết nối
Khi bạn làm việc xong với tập kết quả và đường kết nối rồi thì bạn nên đóng chúng lại. Hàm mysql_free_result được sử dụng để đóng tập kết quả, và hàm mysql_close được sử dụng để đóng đường kết nối.
// Giải phóng tập kết quả
mysql_free_result($result);
// Đóng kết nối
mysql_close($link);Tổng hợp các quy trình
Ví dụ này đây liệt kê các giá trị của cột Directory và Page từ tất cả các bản ghi từ cơ sở dữ liệu search. 

CODE

mysqlexample.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"            "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>    <title>Ví dụ MySQL</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p> <?php if (!$link = mysql_connect("localhost"))    exit("Unable to make a connection to the database"); if (!mysql_select_db("search", $link))    exit("Unable to select the database"); // Định nghĩa một câu truy vấn SQL Select $query = "SELECT Page, Directory FROM search"; if (!$result = mysql_query($query, $link))    exit("Illegal query"); // Hiện thị các kết quả của câu truy vấn trong một bảng print "<table border=\"0\" cellpadding=\"5\" cellspacing=\"0\">\n"; print "<tr><td><b>Directory</b></td><td><b>Page</b></td></tr>"; while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {    print "<tr><td>";    print $row["Directory"];    print "</td><td>";    print $row["Page"];    print "</td></tr>\n"; } print "</table>\n"; // Giải phóng Tập kết quả mysql_free_result($result); // Đóng kết nối mysql_close($link); ?> </body> </html>

hoclaptrinh - November 26, 2003 01:18 PM (GMT)

Các bạn check bài này nhé. Tôi có định dạng HTML trong hợp lý hơn

DarkHawk - November 29, 2003 02:42 PM (GMT)

Bác có thể làm chi tiết hơn không. Chẳng hạn như hướng dẫn thêm cho độc giả cài đặt MySQL, tạo CSDL để test. Và nên có source hoàn chỉnh để họ gõ vào. Click một cái thì nó hiện ra đàng hoàng. Thế ngừoi ta mới thích

hoclaptrinh - November 30, 2003 09:42 AM (GMT)

Đồng ý!
Vậy là tôi còn làm thêm 2 việc. Hướng dẫn cài MySQL, cách sử dụng MySQL để tạo cơ sở dữ liệu để test. Việc thứ 2 là cung cấp mã nguồn trọn vẹn để thử nghiệm với PHP.
Vậy thì thế này: Thanh viết một bài hướng dẫn cài MySQL đi, có hình ảnh minh họa nhỏ thôi. Ta lấy ngay cơ sở dữ liệu mặc định là mysql với tài khoản root/localhost để connect.
Tôi sẽ cung cấp mã nguồn. Thông báo cho độc giả biết: ai cần mã nguồn đầy đủ xin liên hệ tòa soạn: baohoclaptrinh@oci.com.vn để được cung cấp. Ke ke!

DarkHawk - November 30, 2003 12:54 PM (GMT)

Duyệt ngay
cài My SQL thì dễ thôi mà. keke

Read More

Lấy tên category hiện tại trong wordpress template

Chúng ta thường liệt kê các bài viết trong một category, trong thiết kế trang category template của wordpress. Ở phần đầu bạn sẽ cho hiển thị tên danh mục để cho người dùng biết các bài viết chứa trong danh mục hay tag nào.

Một số wordpress theme mẫu như twentytwelve, twentythirteen, twentyfourteen có đoạn hiển thị thông tin category/tag trong template category.php và tag.php bạn có thể tham khảo và sao chép code tại file đó.

Lấy dữ liệu category hiện tại

Category hiện tại được xác định thông qua tham số URL, để lấy giá trị của một tham số có trên URL, tuy nhiên nếu bạn thiết lập permalink dạng viết lại đường dẫn thì những tham số này bị ẩn đi sẽ không hiển thị ra tham số. Nhưng bạn cũng có thể lấy nó bằng cách sử dụng hàmget_query_var(), nếu đang ở trang category bạn có thể lấy category ID hiện tại thông qua tham số cat

1 2	$category=get_category(get_query_var('cat')); print_r($category);

Hàm get_category trả về đối tượng chứa thông tin của category.

1

stdClass Object ( [term_id] => 6 [name] => Metu [slug] => metu [term_group] => 0 [term_taxonomy_id] => 6 [taxonomy] => category [description] => hfghhfhfghffghfghfh [parent] => 0 [count] => 0 [filter] => raw [cat_ID] => 6 [category_count] => 0 [category_description] => hfghhfhfghffghfghfh [cat_name] => Metu [category_nicename] => metu [category_parent] => 0 )

Ngoài ra, bạn có thể sử dụng hàm get_queried_object(), hàm này trả về mọi thông tin tham số có trên URL. Bạn không biết tên các tham số ở trên URL, hãy sử dụng hàm này thay vì sử dụng nhiều lần hàm get_query_var cho nhiều tham số.

1 2	$obj=get_queried_object(); var_dump($obj->category_description);

Giá trị của hàm phụ thuộc vào từng template mà trả về khác nhau.

• nếu là single post thì trả về dữ liệu post.
• nếu là page, thì trả về dữ liệu page.
• nếu là category archive, thì trả về dữ liệu category.
• nếu là author archive, thì trả về dữ liệu của author.

Hàm get_queried_object tiền thân là hàm thành viên của đối tượng WP_Query. Bạn cũng có thể lấy dữ liệu tham số được tạo bởi đối tượng lớp WP_Query.

1	$wp_query->get_queried_object();

Tag Template

Ngoài cách sử dụng hàm trên, trong tag template tag.php còn có hàm riêng giúp bạn lấy tên tag.

1	echo single_tag_title( '', false );

Cú pháp: single_tag_title( $prefix, $display );

Lấy Mô tả của tag hiện tại.

1 2 3

<?php if ( tag_description() ) : // Show an optional tag description ?>                 <div class="archive-meta"><?php echo tag_description(); ?></div> <?php endif; ?>

Read More