منتدى استراحات زايد

منتدى استراحات زايد (http://vb.ma7room.com/index.php)
-   منتدى أخبار المواقع والمنتديات العربية والأجنبية (http://vb.ma7room.com/forumdisplay.php?f=183)
-   -   الدرس الأول دورة تصميم واجهة موقع غير متمددة (http://vb.ma7room.com/showthread.php?t=502284)

محروم.كوم 09-04-2010 03:40 PM

الدرس الأول دورة تصميم واجهة موقع غير متمددة
 
بسم الله نبدأ دورتنـا اليوم بالدرس الأول
وهو تصميم الهيـــدر للموقع



ملحوظة : أنــا سأستخدم برنامج فوتوشوب cs3







- ملــف جديــد
نفتح برنامج الفوتوشــوب ، ونقوم بعمل ملف جديد وذلك من قائمة File ثم NEW أو الضغط على Ctrl + N من لوحة المفاتيح ، ونسمى العمل واجهة موقع
، وستكون المقايس لملف العمل بإذن الله هى : ( العرض ) 800 بيكسل ، ( الطول ) 600 بيكسل / ثم نضغط على زر موافــق

http://www.rawabetvb.net/upload/f6113648f11.png






- تجهيــز الإعــدادات
*إظهار الشبكة
نقوم بإظهــار الشبكة فى الفوتوشـوب وذلك بالذهاب إلى قائمة View ثم نذهب إلى show ستظهر لنـا قائمة منسدلة صغيرة نختــار منهــا Grid
، أو عن طريق الضغط على Ctrl + ' من لوحة المفاتيح

http://www.rawabetvb.net/upload/3465d102101.png

*مجلد الهيــدر
- نقوم بعمل مجلد جديد فى نافذة الطبقات ، عن طريق الضغط على أيقونة أسفل نافذة الطبقات تشبه المجلد ، والصور تبين ذلك وسيكون اسمه Group1 فنقوم بالضغط على الاسم مرتين بالزر الأيسر للماوس ونقوم بكتابة اسمه الجديد وليكن " الهيـدر"

ملحوظة : لإظهار ناذة الطبقات ( الشفائف ) عن طريق الضغط على زر F7 من لوحة المفاتيح

http://img693.imageshack.us/img693/773/862d8b00da1.jpg
- بــداية العمــل
نختار أداة الأشكال لرسم المستطيل عن طريق الضغط على U من لوحة المفاتيح
أو إختيارها من قائمة الأدوات ، ثم نقوم برسم المستطيل بطول 12 مربع صغير من الشبكة وبعرض ملف العمل كله ويكون باللون الأســود واللون الآن غير مهم لأننا سنغيره لاحقاً ، والصور تبين ذلك

http://img710.imageshack.us/img710/8879/4bf75fb5341.jpg
- لمسة فنية

يمكنك فى هذه الخطوة إخفاء الشبكة فى الفوتوشوب ، سنضيف على المستطيل الآن لمسة فنية رائعة بأداة البن تول Pen Tool ، نختار أداة القلم والتى تسمى البن تول عن طريق الضغط على زر P من لوحة التحكم ، ستجد بجوارها مثلث صغير فى الأسفل من ناحية اليمين قم بالضغط المستمر عليه مدة قصيرة حوالى ثانية أو ثانيتن بالكثير إلى أن يظهر لك قائمة منسدلة صغيرة بها أدوات من نفس النوع نختار منها أداة القلم الذى بجواره علامة زائد+ صغيره فى الأعلى واسمها Add Anchor Point Tool نذهب إلى المستطيل ونحاول التغير فيه إلى أن نصل إلى هذا الشكل

ملحوظة :إذا لم تستطع عمل هذا الشكل فيمكنك تحميل ملف العمل لهذا الشكل بالضغط هنـــا
http://img689.imageshack.us/img689/4210/28129085.jpg

- اســم الموقــع
سنقوم بكتـابة اسم الموقع وهو " المشاغب" أو الموقــع الخاص بك ، وذلك عن طريق إختيــار أداة الكتابة عن طريق الضغط على حرف T من لوحة المفاتيح ونذهب إلى المستطيل ونكتب اسم الموقــع بأى خــط ولكن يكون حجمه كبير 60pt مثلاً وفى أى جانب سواء فى اليمين أو اليسار أو الوسط حسب ذوق كل شخص ، ثم نأتى لكتــابة شعــار الموقع ، حيث أن لكل موقــع شعــار مثل " لخدمــات الويب العربى والمصصمين " ، نختار أداة الكتابة
ونختار حجم الخط 20pt مثلاً ونكتب الشعار أسفل اسم الموقع ليكون كما بالشكل

http://img28.imageshack.us/img28/3962/58682209.jpg
- مضاعفة المستطيل
نقوم بمضاعفة المستطيل عن طريق الذهاب إلى قائمة Layer ثم نختار Duplicate Layer أى مضاعفة الطبقة فستظهر لنا نافذة صغيرة نضغط موافق ، فنجد أنه تم نسخ المستطيل ، نقوم بوضع المستطيل الجديد فوق القديم فى نافذة الطبقات ، نغيير لـون المستطيل الجديد إلى الأحمر الغامق وكود اللون #
9c0000 ، ثم نذهب إلى قائمة Edit ونختـار Free Transform ونقوم بتغيير طول المستطيل الجديد بشده إلى الأسفل بقدر صغير
http://img255.imageshack.us/img255/3154/39911905.jpg

الــزخرفــة
نقوم بعمل شفيفة ( طبقة ) جديدة
، وذلك بالذهاب إلى قائمة Layer ثم نذهب إلى New ستظهر لنـا قائمة منسدلة صغيرة نختــار منهــا Layer ، أو عن طريق الضغط على Ctrl + Shift + N من لوحة المفاتيح ، ستظهر لنا نافذة باسم مستطيلة New layer نكتب فيها اسم الطبقة "الزخرفة" ثم نضغط موافق ok ، نقوم بوضعها فى المجلد " الهيـدر"و هو المجلد الذى أنشأناه من قليل

http://img691.imageshack.us/img691/6760/83732874.jpg
- فرش الزخرفــة
فى هذه الخطوة يمكنك أن تفعل ما تشاء فى الهيدر مثل الرسم عليه أو المزيــد
نذهب إلى طبقة المستطيل نضغط عليها بالزر الأيمن للفأرة ستظهر لنــا قائمة نختار منهــا Rasterize Type ، ثم بعد ذلك نذهب إلى قائمة Select ومنها نختار هذا الإختيار Load Selection فتظهر لنــا نافذة صغيرة نضغط على موافق فيتم تحديد المستطيل
قد تسألوا لمــاذا قمت بعمل خطوة تحديد المستطيل ؟
حتى إذا استخدمنــا الفرشاة وقمنا بالرسم بفرشاة كبيرة لا نضطر إلى مسح الزوائد وضبط حجم الفرشاة مع المستطيل ، وهذه الخطوة تسهل علينا حيث نقوم برسم ما نريد دون خوف

نذهب بعد ذلك إلى طبقة " الزخرفة" ، نختــار أداة الفرشــاة غن طريق الضغط على زر B فى لوحة المفاتيــح ، ثم نقوم بإلغاء التحديد عن طريق الضغط على Ctrl + D من لوحة المفاتيح
أنا استخدمت فرش معينة للزخرفة وهى القلوب ، الزخــرفة ( الدوائر الصغيرة ) ، وقد وضعت فى الدرس السابق ملحقات الدورة وستجد الفرش التى استخدمتها فى التصميم
http://img688.imageshack.us/img688/4829/82549360.jpg

وأذكــر : أنــه يمكنكم أن تصممــوا فى الهيــدر ما يعجبكم حسب أذواقكم لأنه غير مبنى على قاعدة معينة وتختلف الهيدرات من سحب ذوق كل شخص وإبداعه
ولكن لا تتعدى طوله وهو 12 مربع صغير من الشبكة


تحياتي الدرس الثاني غدا




الساعة الآن 09:29 AM

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By Almuhajir


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227