bernadet
Member
منبع
http://www.swedesignz.com/photoshop/Stylish_Content_Box
یک داکیومنت جدید با ابعاد 400 * 400 پیکسل درست نموده یک لایه جدید بسازید و با استفاده از ابزار
Polygonal Lasso Tool
سعی کنید شکل زیر را بکشید .
به پنل
Chanels
بروید و دکمه
Save selection as channel
در پایین پلا چنلز را بزنید و در پنل چنلز روی
Alpha 1
کلیک نموده و
Ctrl + D
را بزنید که از انتخاب خارج شوید . و مسیر زیر ار بروید
Filter>Blur>Gaussian Blur
و این فیلتر را با شعاع 4 پیکسل اعمال کنید و
Ctrl + L
را بزنید و در موردش تنظیمات زیر را مبذول دارید .
و در پایین پنل چنلز روی دکمه
Load channel as selection
کلیک کنید و به پنل لایه ها بر گردید و در آنجا بر روی
Layer1
کلیک کنید و روی شکلتان در محیط کار رایت کلیک کنید و گزینه
Fill
را انتخاب کنید و رنگ زیر را انخاب کنید .
#003313
حالا در حالیکه جعبه متن را در حال انتخاب دارید یک لایه جدید درست کنید و اطرافش یک خط رسم کنید .
Edit>Stroke
Width to 1px
color black
Location Center
روی پلت لایه ها روی
Layer1
کلیک کنید و از
Layer > layer style
تنظیمات ذیل را اعمال کنید .
به این شکل می رسید.
یک لایه جدید بسازید و در پلت لایه ها ، لایه جدید را به زیر لایه
Layer1
بکشید و با استفاده از ابزار
Polygonal Lasso Tool
شکل زیر را رسم کنید .
و این انتخاب را با همان رنگ جعبه متن پر کنید . در این تمرین رنگ
#003313
به کار رفته . حالا مرحله ای که بین دو خط ستاره ای قرار دارد را تکرار کنید . به این شکل می رسید .
یک لایه جدید درست کنید و در پلت لایه ها آن را به بالای لایه
Layer 1
بکشید و ابزار
Pencil
را از نوار ابزار بردارید . و رنگ فورگراند را سیاه کنید و در قسمت بالای جعبه متن در حالیکه شیفت را نگه داشته اید یک خط افقی رسم کنید و این لایه را دوپلیکیت کنید ..
Ctrl + j
و یک پیکسل به پایین بیاورید ( ابزار حرکت را از نوار ابزار بردارید با فلش رو به پایین روی کیبورد یک پیکسل به پایین بکشید ) و در پلت لایه ها روی این لایه جدید کنترل کلیک کنید که خط انتخاب شود و رنگ فورگراند را یک رنگ خاکستری کنید و
Alt + backspace
را بزنید که خط دوم کم رنگ تر شود .
برای قسمت پایین جعبه متن هم به همین صورت گفته شده خط بکشید . یعنی یک لایه جدید درست کنید و با ابزار
Pencil
یک خط سیاه افقی بکشید و لایه را دوپلیکیت کنید و یک پیکسل پایین بکشید و رنگ خط دوم را خاکستری کیند . و متن مورد نظر را در جعبه متن بنویسید .
جعبه متن دوم
منبع
http://www.swedesignz.com/photoshop/Tidy_Content_Box
در این درس هم یک جعبه متن ساده و زیبا برای وب می سازیم به این شکل
و این هم نمونه خالی آن
وارد پنل چنلز شوید و با ابزار
Marquee tool
ابزار انتخاب مستطیلی یک کادر به اندازه جعبه متن انتخاب کنید و آن را به رنگ مورد نظر در آورید
و
Filter > Blur > Gaussian
فیلتر بالا را با شعاعی بین 4 الی 7 پیکسل اعمال کنید
و
image > adjust > levels
و مطابق شکل فلش ها را به وسط بکشید یا تنظیمات را مطابق شکل زیر اعمال کنید .
در پنل چنلز بر روی چنل کنترل کلیک کنید که جعبه متن انتخاب شوید به پلت لایه ها بروید و یک لایه جدید درست کنید و با رنگ دلخواه قسمت انتخاب شده را پر کنید . به این صورت که رنگ فورگراند را به
#CECECE
برگردانید و کلیدهای
Alt + backspace
را بزنید .
و در پلت لایه ها بر روی لایه جعبه رایت کلیک کنید و گزینه
blending options
را انتخاب کنید و تنظیمات زیر را اعمال کنید .
و متن مورد نظر را در کادر بنویسید .
_______________--
منبع
http://www.toxiclab.org/tutorial.asp?ID=27
یک داکیومنت جدید با ابعاد 300 * 300 و رنگ زمینه 484848 ایجاد کنید .
با استفاده از ابزار
Rounded Rectangle Tool
و میزان شعاع ده پیکسل یک مستطیل لبه گرد بکشید .
در پلت لایه ها روی لایه شکل دبل کلیک کنید و وارد
layer style
شوید و تنظیمات زیر را اعمال کنید .
Inner shadow
Outer glow
Inner glow
Bevel and emboss
Color overaly
Stroke
تا به اینجا به این شکل باید رسیده باشید .
حالا این کادر را باید به صورت اچ تی ام ال ذخیره کنیم که بتواینم در صفحات وب از آن استفاده کنیم . برای این کار از ابزار
Slice tool.
استفاده می کنیم و دور کادر را با این ابزار می کشیم و بعد
File > save for web
می کنیم و کداچ تی ام ال زیر را به دست می آوریم .
<table border="0" cellpadding="0" cellspacing="0" width="261">
<tr>
<td width="261">
<img border="0" src="images/top.gif" width="261" height="13"></td>
</tr>
<tr>
<td style="Background: url('images/middle.gif') repeat-y; padding: 7px" width="261">
Your content
</td>
</tr>
<tr>
<td width="261">
<img border="0" src="images/bottom.gif" width="261" height="13"></td>
</tr>
</table>
http://www.swedesignz.com/photoshop/Stylish_Content_Box
یک داکیومنت جدید با ابعاد 400 * 400 پیکسل درست نموده یک لایه جدید بسازید و با استفاده از ابزار
Polygonal Lasso Tool
سعی کنید شکل زیر را بکشید .
به پنل
Chanels
بروید و دکمه
Save selection as channel
در پایین پلا چنلز را بزنید و در پنل چنلز روی
Alpha 1
کلیک نموده و
Ctrl + D
را بزنید که از انتخاب خارج شوید . و مسیر زیر ار بروید
Filter>Blur>Gaussian Blur
و این فیلتر را با شعاع 4 پیکسل اعمال کنید و
Ctrl + L
را بزنید و در موردش تنظیمات زیر را مبذول دارید .
و در پایین پنل چنلز روی دکمه
Load channel as selection
کلیک کنید و به پنل لایه ها بر گردید و در آنجا بر روی
Layer1
کلیک کنید و روی شکلتان در محیط کار رایت کلیک کنید و گزینه
Fill
را انتخاب کنید و رنگ زیر را انخاب کنید .
#003313
حالا در حالیکه جعبه متن را در حال انتخاب دارید یک لایه جدید درست کنید و اطرافش یک خط رسم کنید .
Edit>Stroke
Width to 1px
color black
Location Center
روی پلت لایه ها روی
Layer1
کلیک کنید و از
Layer > layer style
تنظیمات ذیل را اعمال کنید .
به این شکل می رسید.
یک لایه جدید بسازید و در پلت لایه ها ، لایه جدید را به زیر لایه
Layer1
بکشید و با استفاده از ابزار
Polygonal Lasso Tool
شکل زیر را رسم کنید .
و این انتخاب را با همان رنگ جعبه متن پر کنید . در این تمرین رنگ
#003313
به کار رفته . حالا مرحله ای که بین دو خط ستاره ای قرار دارد را تکرار کنید . به این شکل می رسید .
یک لایه جدید درست کنید و در پلت لایه ها آن را به بالای لایه
Layer 1
بکشید و ابزار
Pencil
را از نوار ابزار بردارید . و رنگ فورگراند را سیاه کنید و در قسمت بالای جعبه متن در حالیکه شیفت را نگه داشته اید یک خط افقی رسم کنید و این لایه را دوپلیکیت کنید ..
Ctrl + j
و یک پیکسل به پایین بیاورید ( ابزار حرکت را از نوار ابزار بردارید با فلش رو به پایین روی کیبورد یک پیکسل به پایین بکشید ) و در پلت لایه ها روی این لایه جدید کنترل کلیک کنید که خط انتخاب شود و رنگ فورگراند را یک رنگ خاکستری کنید و
Alt + backspace
را بزنید که خط دوم کم رنگ تر شود .
برای قسمت پایین جعبه متن هم به همین صورت گفته شده خط بکشید . یعنی یک لایه جدید درست کنید و با ابزار
Pencil
یک خط سیاه افقی بکشید و لایه را دوپلیکیت کنید و یک پیکسل پایین بکشید و رنگ خط دوم را خاکستری کیند . و متن مورد نظر را در جعبه متن بنویسید .
جعبه متن دوم
منبع
http://www.swedesignz.com/photoshop/Tidy_Content_Box
در این درس هم یک جعبه متن ساده و زیبا برای وب می سازیم به این شکل
و این هم نمونه خالی آن
وارد پنل چنلز شوید و با ابزار
Marquee tool
ابزار انتخاب مستطیلی یک کادر به اندازه جعبه متن انتخاب کنید و آن را به رنگ مورد نظر در آورید
و
Filter > Blur > Gaussian
فیلتر بالا را با شعاعی بین 4 الی 7 پیکسل اعمال کنید
و
image > adjust > levels
و مطابق شکل فلش ها را به وسط بکشید یا تنظیمات را مطابق شکل زیر اعمال کنید .
در پنل چنلز بر روی چنل کنترل کلیک کنید که جعبه متن انتخاب شوید به پلت لایه ها بروید و یک لایه جدید درست کنید و با رنگ دلخواه قسمت انتخاب شده را پر کنید . به این صورت که رنگ فورگراند را به
#CECECE
برگردانید و کلیدهای
Alt + backspace
را بزنید .
و در پلت لایه ها بر روی لایه جعبه رایت کلیک کنید و گزینه
blending options
را انتخاب کنید و تنظیمات زیر را اعمال کنید .
و متن مورد نظر را در کادر بنویسید .
_______________--
منبع
http://www.toxiclab.org/tutorial.asp?ID=27
یک داکیومنت جدید با ابعاد 300 * 300 و رنگ زمینه 484848 ایجاد کنید .
با استفاده از ابزار
Rounded Rectangle Tool
و میزان شعاع ده پیکسل یک مستطیل لبه گرد بکشید .
در پلت لایه ها روی لایه شکل دبل کلیک کنید و وارد
layer style
شوید و تنظیمات زیر را اعمال کنید .
Inner shadow
Outer glow
Inner glow
Bevel and emboss
Color overaly
Stroke
تا به اینجا به این شکل باید رسیده باشید .
حالا این کادر را باید به صورت اچ تی ام ال ذخیره کنیم که بتواینم در صفحات وب از آن استفاده کنیم . برای این کار از ابزار
Slice tool.
استفاده می کنیم و دور کادر را با این ابزار می کشیم و بعد
File > save for web
می کنیم و کداچ تی ام ال زیر را به دست می آوریم .
<table border="0" cellpadding="0" cellspacing="0" width="261">
<tr>
<td width="261">
<img border="0" src="images/top.gif" width="261" height="13"></td>
</tr>
<tr>
<td style="Background: url('images/middle.gif') repeat-y; padding: 7px" width="261">
Your content
</td>
</tr>
<tr>
<td width="261">
<img border="0" src="images/bottom.gif" width="261" height="13"></td>
</tr>
</table>
آخرین ویرایش:
