تصميم قائمة أنيقة

[المصمم]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

درس تصميم قائمة أنيقة

هذا درس مترجم.. يمكنك مشاهدة الدرس الأصلي من هنا (http://www.psfreak.com/stylish-dark-navigation-box)

الخطوة (1)

- أنشىء ملف عمل جديد وابدأ في عمل خلفية من تدرج لوني دائري بلون أمامي #b3a773 ولون خلفي #877948 – اختر آداة التدرج واسحب من المركز إلى الخارج.

http://www.im-school.com/imwp/wp-content/uploads/11.jpg
الخطوة (2)

سنقوم الآن بعمل الجزء العلوي من القائمة بآداة rounded rectangle بقطر 10 pixels وأبعاد 220 * 50 pixels..
تأكد من أن Paths هي المفعلة
http://www.im-school.com/imwp/wp-content/uploads/Untitled-1.png


يمكنك التحكم في الحجم عن طريق متابعة info panel أثناء الرسم ثم اضغط بيمين الفأرة بعد الرسم واختر Make Selection

http://www.im-school.com/imwp/wp-content/uploads/2.jpg


وبآداة التدرج اللوني مجددًا – بتدرج خطي هذه المرة – ولون أمامي #202020 وخلفي #2f2f2f اضغط على الجزء الأيسر من المستطيل واسحب لليمين ثم تخلص من الـ selection بالضغط على Ctrl+D.

http://www.im-school.com/imwp/wp-content/uploads/3.jpg
الخطوة (3)

سنقوم الآن بإضافة إضاءة لللاير من Layer Style عن طريق إضافة تدرج لوني كما بالصورة (اضغط على مستطيل التدرج اللوني للذهاب للخطوة التي تليها)..
Gradient Overlay> Blend Mode: Overlay
Opacity: 18
http://www.im-school.com/imwp/wp-content/uploads/4.jpg


اجعل لون الدلوين السفليين أبيض بالضغط عليهم ستظهر لك بالت الألوان.. واضغط على الدلو العلوي الأيسر ثم اجعل opacity بصفر..واسحب الدلوين العلويين للمنتصف


http://www.im-school.com/imwp/wp-content/uploads/5.jpg
الآن يفترض أن يكون لديك نتيجة كهذه.

http://www.im-school.com/imwp/wp-content/uploads/6.jpg
الخطوة (4)

والآن سنضيف إطار من Layer Style > Stroke.
حجمه 2، و position: inside
http://www.im-school.com/imwp/wp-content/uploads/7.jpg

http://www.im-school.com/imwp/wp-content/uploads/8.jpg
الخطوة (5)

سنقوم الآن برسم ثلاثة خطوط مائلة على اليسار.. أنشىء لاير جديد وباستخدام آداة rectangular marquee ارسم مستطيل أبعاده 15 * 100 pixels..


http://www.im-school.com/imwp/wp-content/uploads/9.jpg
ومن Edit > Fill املأه باللون الأبيض #ffffff.

http://www.im-school.com/imwp/wp-content/uploads/10.jpg
الخطوة (6)

قم بعمل نسخة من المستطيل السابق وحركه 20 pixels يمينًا.. ثم كرر هذا ليصبح لديك ثلاثة خطوط..


http://www.im-school.com/imwp/wp-content/uploads/12.jpg


أدمج الخطوط الثلاثة في لاير واحد عن طريق الضغط بيمين الفأرة على أيقون اللاير كما بالصورة واختيار Merge layers..


http://www.im-school.com/imwp/wp-content/uploads/13.jpg
الخطوة (7)

سنقوم الآن بإمالة الخطوط عن طريق Edit > Transform أو الضغط على ctrl+T ومن ثم إمالتهم لليسار ثم اضغط enter.

http://www.im-school.com/imwp/wp-content/uploads/14.jpg
الخطوة (8)

قم بعمل selection من شكل المستطيل الخلفي عن طريق ضغط Ctrl مع الضغط على أيقونة اللاير الخاص به..

http://www.im-school.com/imwp/wp-content/uploads/16.jpg


ثم اعكس الـ selection عن طريق الضغط على Ctrl + Shift + I أو من قائمة Select > Inverse ..


http://www.im-school.com/imwp/wp-content/uploads/17.jpg


تأكد أنك على لاير المستطيلات الثلاثة ثم اضغط Delete ثم ctrl+D.


http://www.im-school.com/imwp/wp-content/uploads/18.jpg


الخطوة (9)

اجعل opacity لاير المستطيلات البيضاء بـ 5%.

http://www.im-school.com/imwp/wp-content/uploads/19.jpg
الخطوة (10)

أضف كلمات لرأس القائمة الآن.. لقد قمت باستخدام فونت Delicious واجعله Bold بحجم 18 ونوع التنعيم Crisp.. وأضفت أيقون..

http://www.im-school.com/imwp/wp-content/uploads/20.jpg
http://www.im-school.com/imwp/wp-content/uploads/21.jpg
الخطوة (11)

الآن وبعد أن أنهينا رأس القائمة سنبدأ في القائمة نفسها حيث ستوجد الروابط. نبدأ بعمل مستطيل مستدير الحواف مثلما فعلنا من قبل أبعاده 220 *250 pixels..

http://www.im-school.com/imwp/wp-content/uploads/22.jpg


املأ المستطيل بلون #2f2f2f ثم اضغط ctrl+D للتخلص من الـ selection..


http://www.im-school.com/imwp/wp-content/uploads/23.jpg


حرك هذا اللاير أسفل من لاير رأس القائمة لنراها كاملة.


http://www.im-school.com/imwp/wp-content/uploads/24.jpg
http://www.im-school.com/imwp/wp-content/uploads/25.jpg
خطوة (12)

أضف إليه الآن Layer Style كالآتي..
Outer Glow> Blen Mode: Soft Light
Opacity: 58
لونه أسود
size: 13
http://www.im-school.com/imwp/wp-content/uploads/26.jpg


Inner Glow> Blen Mode: Soft Light
Opacity: 27
لونه أبيض
size: 8


http://www.im-school.com/imwp/wp-content/uploads/27.jpg


Stroke> size: 2
position: Inside


http://www.im-school.com/imwp/wp-content/uploads/28.jpg


المفترض أن يكون لديك الشكل الآتي الآن..


http://www.im-school.com/imwp/wp-content/uploads/29.jpg


خطوة (13)

سنقوم الآن بإضافة أسماء الروابط.. استخدمت فونت Tahoma, Bold حجم 10 وتباعد أسطر 30


http://www.im-school.com/imwp/wp-content/uploads/30.jpg
http://www.im-school.com/imwp/wp-content/uploads/31.jpg
الخطوة (14)

سنضيف الآن تقسيمات تفصل الروابط عن بعضها.. في لاير جديد ارسم selection أبعاده 200*1 pixels..


http://www.im-school.com/imwp/wp-content/uploads/32.jpg


ومن Edit > Fill املأه باللون #292929 ثم اضغط ctrl+D.


http://www.im-school.com/imwp/wp-content/uploads/33.jpg
الخطوة (15)

والآن بآداة pencil على لاير جديد وباللون الأبيض ارسم مستطيل صغير 8*3 pixels في منتصف الخط الفاصل.


http://www.im-school.com/imwp/wp-content/uploads/34.jpg
الخطوة (16)

أضف للمستطيل الأبيض لمعة خارجية من Layer Style كالآتي..
Outer Glow> Opacity: 50
لونه أبيض
size: 9


http://www.im-school.com/imwp/wp-content/uploads/35.jpg
http://www.im-school.com/imwp/wp-content/uploads/36.jpg
الخطوة (17)

قم باختيار لاير الخط الفاصل والمستطيل الأبيض ومضاعفتهم ليصبح بين كل الروابط فاصل منهم.. وهكذا انتهينا!


http://www.im-school.com/imwp/wp-content/uploads/37.jpg

إعداد : سحر حازم

منقول مع الشكر لصاحبة الترجمة

[azizsoft]

بسم الله الرحمن الرحيم

بارك الله فيكم :abc_022:

[عوض السوداني]

شـكــ وبارك الله فيك ـــرا لك :abc_152:... لك مني أجمل تحية .

[أبو يوسف]

جزاك الله خير اخانا المصمم وبارك الله فيك

[abohmam]

شـكــ وبارك الله فيك ـــرا لك

لك مني أجمل تحية .

[خادم المسلمين]

رووووووووعة
شكرا جزيلا
ومنتظرين شروحات اخرى

[المصمم]

:abc4web_d:

[الحارث بن فيصل]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .