محمود عفيفى
13-02-2010, 08:21 PM
http://i27.tinypic.com/2my5xz.jpg
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
(( درس عمل قائمه زرقاء ))
نفتح صفحة عمل بمقاس 540×440
نجعل اللون الأمامى 343435
والخلفى 222222
نختار اادة التدرج اللونى ثم نوع التدرج Radial
http://img684.imageshack.us/img684/2512/96636119.png
نسحب من أعلى الى أسفل
http://img638.imageshack.us/img638/6359/13022010070133.png
ندرج طبقه جديده
بإستخدام rounded rectangle بهذه الإعدادات
http://img64.imageshack.us/img64/1197/64679798.png
أنقر على طبقة العمل لإدارج المسار
وبيمين الماوس اختر Make Selection ثم OK
لعمل التحديد
أجعل اللون الأمامى 007ccb
والخلفى 004877
نختار أدة التدرج اللونى ثم نوع التدرج Radial كما فعلنا سابقا
نسحب من أعلى اليسار الى أسفل اليمين داخل التحديد هكذا
http://img94.imageshack.us/img94/3117/19786141.png
نضغط (Ctrl + D) لإلغاء التحديد يصبح الشكل هكذا
http://img535.imageshack.us/img535/2803/13892593.png
نحرك الصندوق للوسط :-
نعمل (Ctrl + A) لتحديد كامل صفحة العمل
أو من Select نختار Select All
نختار أداة التحريك Move Tool او بالضغط على حرف V
بالوقوف على طبقة الصندوق نقوم بالأتى
http://img704.imageshack.us/img704/4056/13022010064115.png
أصبح الشكل كالتالى
http://img28.imageshack.us/img28/1017/16426904.png
أجعل اللون الأمامى أبيض FFFFFF
أو نضغط D للرجوع الى الألوان الأفتراضيه
ثم نضغط X لعكس الألوان (الأمامى أبيض والخلفى أسود)
الأن نضيف Belnding Options لطبقة الصندوق
Drop Shadow
http://img196.imageshack.us/img196/498/13022010054940.png
Gradient Overlay
http://img196.imageshack.us/img196/6590/13022010055839.png
للحصول على التدرج اللونى السابق تابع الصوره المتحركه
http://img683.imageshack.us/img683/1120/13135411.gif
نضيف عنوان موقعنا (الخط المستخدم Bassam Ostorah)
نحرك العنوان الى وسط الصندوق بتحريكه الى اعلى او اسفل الى المكان المناسب
ثم تحديد طبقة العنوان ب Ctrl ثم أختيار أداة التحريك وعمل التالى
http://img199.imageshack.us/img199/2589/13022010064825.png
ليصبح هكذا
http://img28.imageshack.us/img28/6879/13022010060442.png
الأن نضيف عدة فواصل
ندرج طبقة جديده
بإستخدام أداة rectangular marquee tool
http://img526.imageshack.us/img526/2665/13022010060847.png
نعمل تكبير بالضغط على حرف Z ثم الضغط على صفحة العمل عدة مرات حتى نرى التحديد
نملا التحديد باللون الأبيض
نعدل خيارات الدمج (blend mode) الى Overlay
والشفافيه (Opacity) الى 20%
http://img69.imageshack.us/img69/7240/13022010061524.png
نحرك الفاصل الى وسط الصندوق بنفس الشكل السابق
http://img191.imageshack.us/img191/4119/13022010061634.png
نضاعف طبقة الفاصل بالضغط على (Ctrl + J)
ونحركها لأسفل 30 بيكسل
إما:-
1- الوقوف على طبقة الفاصل وأختيار أداة التحريك ثم الضغط بمفتاح التحريك لأسفل من لوحة المفاتيح 30 مره :abc_145:
أو
2- الضغط على مفتاح Shift ثم نضغط على مفتاح التحريك لأسفل 3 مرات
بمعنى ان الضغط على مفتاح التحريك لأسفل يحرك 1 بيكسل
أما Shift مع المفتاح تحرك 10 بيكسلات
نكرر العمل عدة مرات يصبح الشكل هكذا
http://img651.imageshack.us/img651/7/13022010062550.png
الان نضيف اللينكات ونفصلها بـ 30 بيكسل
الخط المستخدم MCS FREEDOM
http://img35.imageshack.us/img35/12/13022010062811.png
الان نعمل تأثير hover على العمل ليصبح الشكل جميلا
ندرج طبقة جديدة ونسميها hover
بإستخدام أداة rectangular marquee tool
نعمل تحديد بأبعاد 260 × 30 حول أى لينك وليكن الثانى
نملا التحديد باللون الأبيض ffffff
http://img59.imageshack.us/img59/5472/13022010091134.png
نعدل خيارات الدمج (blend mode) الى Soft Light
والشافيه (Opacity) الى 20%
الشكل النهائى بعد إخفاء الخلفيه
http://img51.imageshack.us/img51/7209/boxcoeeeeeeeeeepy.png
تحميل ملف الـ PSD مع (http://www.multiupload.com/W3P5ANI2OV)الخطوط المستخدمه (http://www.multiupload.com/W3P5ANI2OV)
* بعد التركيب بالفرونت بيدج كما فى شرح أخى الدمشقى (http://www.abc4web.net/vb/showthread.php?t=5958)
* أو شرح أخى أبو همام بلغة CSS (http://www.abc4web.net/vb/showthread.php?t=6486)
معاينة التطبيق
من هنا (http://docma7moud.0fees.net/vb/Blue-Box/index.htm)
أخير لا نُجيز إستخدامه فيما حرم الله :abc_088:
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
(( درس عمل قائمه زرقاء ))
نفتح صفحة عمل بمقاس 540×440
نجعل اللون الأمامى 343435
والخلفى 222222
نختار اادة التدرج اللونى ثم نوع التدرج Radial
http://img684.imageshack.us/img684/2512/96636119.png
نسحب من أعلى الى أسفل
http://img638.imageshack.us/img638/6359/13022010070133.png
ندرج طبقه جديده
بإستخدام rounded rectangle بهذه الإعدادات
http://img64.imageshack.us/img64/1197/64679798.png
أنقر على طبقة العمل لإدارج المسار
وبيمين الماوس اختر Make Selection ثم OK
لعمل التحديد
أجعل اللون الأمامى 007ccb
والخلفى 004877
نختار أدة التدرج اللونى ثم نوع التدرج Radial كما فعلنا سابقا
نسحب من أعلى اليسار الى أسفل اليمين داخل التحديد هكذا
http://img94.imageshack.us/img94/3117/19786141.png
نضغط (Ctrl + D) لإلغاء التحديد يصبح الشكل هكذا
http://img535.imageshack.us/img535/2803/13892593.png
نحرك الصندوق للوسط :-
نعمل (Ctrl + A) لتحديد كامل صفحة العمل
أو من Select نختار Select All
نختار أداة التحريك Move Tool او بالضغط على حرف V
بالوقوف على طبقة الصندوق نقوم بالأتى
http://img704.imageshack.us/img704/4056/13022010064115.png
أصبح الشكل كالتالى
http://img28.imageshack.us/img28/1017/16426904.png
أجعل اللون الأمامى أبيض FFFFFF
أو نضغط D للرجوع الى الألوان الأفتراضيه
ثم نضغط X لعكس الألوان (الأمامى أبيض والخلفى أسود)
الأن نضيف Belnding Options لطبقة الصندوق
Drop Shadow
http://img196.imageshack.us/img196/498/13022010054940.png
Gradient Overlay
http://img196.imageshack.us/img196/6590/13022010055839.png
للحصول على التدرج اللونى السابق تابع الصوره المتحركه
http://img683.imageshack.us/img683/1120/13135411.gif
نضيف عنوان موقعنا (الخط المستخدم Bassam Ostorah)
نحرك العنوان الى وسط الصندوق بتحريكه الى اعلى او اسفل الى المكان المناسب
ثم تحديد طبقة العنوان ب Ctrl ثم أختيار أداة التحريك وعمل التالى
http://img199.imageshack.us/img199/2589/13022010064825.png
ليصبح هكذا
http://img28.imageshack.us/img28/6879/13022010060442.png
الأن نضيف عدة فواصل
ندرج طبقة جديده
بإستخدام أداة rectangular marquee tool
http://img526.imageshack.us/img526/2665/13022010060847.png
نعمل تكبير بالضغط على حرف Z ثم الضغط على صفحة العمل عدة مرات حتى نرى التحديد
نملا التحديد باللون الأبيض
نعدل خيارات الدمج (blend mode) الى Overlay
والشفافيه (Opacity) الى 20%
http://img69.imageshack.us/img69/7240/13022010061524.png
نحرك الفاصل الى وسط الصندوق بنفس الشكل السابق
http://img191.imageshack.us/img191/4119/13022010061634.png
نضاعف طبقة الفاصل بالضغط على (Ctrl + J)
ونحركها لأسفل 30 بيكسل
إما:-
1- الوقوف على طبقة الفاصل وأختيار أداة التحريك ثم الضغط بمفتاح التحريك لأسفل من لوحة المفاتيح 30 مره :abc_145:
أو
2- الضغط على مفتاح Shift ثم نضغط على مفتاح التحريك لأسفل 3 مرات
بمعنى ان الضغط على مفتاح التحريك لأسفل يحرك 1 بيكسل
أما Shift مع المفتاح تحرك 10 بيكسلات
نكرر العمل عدة مرات يصبح الشكل هكذا
http://img651.imageshack.us/img651/7/13022010062550.png
الان نضيف اللينكات ونفصلها بـ 30 بيكسل
الخط المستخدم MCS FREEDOM
http://img35.imageshack.us/img35/12/13022010062811.png
الان نعمل تأثير hover على العمل ليصبح الشكل جميلا
ندرج طبقة جديدة ونسميها hover
بإستخدام أداة rectangular marquee tool
نعمل تحديد بأبعاد 260 × 30 حول أى لينك وليكن الثانى
نملا التحديد باللون الأبيض ffffff
http://img59.imageshack.us/img59/5472/13022010091134.png
نعدل خيارات الدمج (blend mode) الى Soft Light
والشافيه (Opacity) الى 20%
الشكل النهائى بعد إخفاء الخلفيه
http://img51.imageshack.us/img51/7209/boxcoeeeeeeeeeepy.png
تحميل ملف الـ PSD مع (http://www.multiupload.com/W3P5ANI2OV)الخطوط المستخدمه (http://www.multiupload.com/W3P5ANI2OV)
* بعد التركيب بالفرونت بيدج كما فى شرح أخى الدمشقى (http://www.abc4web.net/vb/showthread.php?t=5958)
* أو شرح أخى أبو همام بلغة CSS (http://www.abc4web.net/vb/showthread.php?t=6486)
معاينة التطبيق
من هنا (http://docma7moud.0fees.net/vb/Blue-Box/index.htm)
أخير لا نُجيز إستخدامه فيما حرم الله :abc_088: