تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة
شبكة عراق نت :: الاقسام العامة :: تقنيات التطوير والجرافيك | Tips & Tricks and Graphic Design :: التصميم والجرافيك
صفحة 1 من اصل 1
تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة
بسم الله الرحمن الرحيم
و به نستعين و الصلاة و السـلام علي سيد الخلق اجمعين
سيـدنا محمد و على اله و صحبه اجمعين
بســــــــــــــــم الله نبــــــــــدئ
اليوم راح انترجم درس جديد و مميز و ان شاء الله تعالى بيكون جدا سهل عليكم
الترجمة مش ترجمة حرفية للنص . و لكن مع اضافات من عندي عشان احاول اوصل
المعلومة بأذن الله تعالى . فلا تأخذونا علي التعبيرات
نبدئ بفتح عمل جديد علي برنامج الفوتوشب بالمقاس التالي :
960 × 900 بيكسل.
و طبعا تقدر تغير الحجم حسب اختيارك و نقوم بتحديد لون الخلفية حسب الاختيار
و يمكنك استخدام اللون المستخدم في الدرس
ثم نقوم بتحميل مجموعة الباترن الي برابط تحت
لتحميل الباترن
بعد تحميل الباترن نقوم بعمل طبقة جديدة ثم نقوم بكسوة الطبقة بأحد الانماط الموجودة بالمجموعة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 116](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/116.jpg)
بعد ان قمنا بتعبأة الطبقة بالباترن نحصل علي هذه النتيحة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 216](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/216.jpg)
نقوم بتغير مود الطبقة الي overlay
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 313](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/313.jpg)
بستخدام اداة المستطيل سنقوم بعمل اشكال بمقاسات مختلفة و نوزعها كما بالشكل
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 412](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/412.jpg)
نقوم بعمل ستايلات مميزه للاشكال الي قمنا بأضافتها عن طريق دخولنا الي خصائص الطبقات
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 54](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/54.jpg)
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 64](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/64.jpg)
و هذه النتيجة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 74](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/74.jpg)
نقم بتغير استايلات الاشكال الاربعة التي بالمنتصف بهذه الاعدادت
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 84](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/84.jpg)
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 94](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/94.jpg)
و نحصل على هذه النتيجة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 104](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/104.jpg)
يمكننا عمل مضاعفة من الشكل البرتقالي الكبير الي بالمنتصف و بتقليل حجمة بالتساوي من جميع الاطراف
و تغطيتة بالنمط الرمادي السابق نحصل علي هالنتيجة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 117](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/117.jpg)
نستخدام مجموعة ايقومات الـ png لاضافة روح جمالية للتصميم
نقوم بفتح الايقومات عن طريق الفوتوشوب ووضعها في مكانها المناسب حسب الحاجة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 124](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/124.jpg)
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 134](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/134.jpg)
بستخدام اداة الكتابة نقوم بكتابة الروابط و الاختصارات الخاصة بالتصميم
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 144](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/144.jpg)
نقوم بأضافة صورة تجميلة اخرى في اسفل الصندوق كاضافة جمالية
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 154](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/154.jpg)
سنقوم بعمل طبقة جديدة فوق الطبقة الثانية التي قمنا بتعبئتها بالباترن و بستخدام فرشة كبيرة جدا و بالون الابيض نقوم بعمل التأثير وسط الصفحة زي التالي
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 164](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/164.jpg)
و بنحديد مود Soft light للطبقة نحصل علي الشكل التالي
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 175-500x468](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/175-500x468.jpg)
ان شاء الله ايكون الدرس سهل و ما تكون فيه اي صعوبة عليكم بأذن الله تعالى
و اي استفسار انا جاهز ... لتوضيح اي خطوة للاعضاء الكرام
و به نستعين و الصلاة و السـلام علي سيد الخلق اجمعين
سيـدنا محمد و على اله و صحبه اجمعين
بســــــــــــــــم الله نبــــــــــدئ
اليوم راح انترجم درس جديد و مميز و ان شاء الله تعالى بيكون جدا سهل عليكم
الترجمة مش ترجمة حرفية للنص . و لكن مع اضافات من عندي عشان احاول اوصل
المعلومة بأذن الله تعالى . فلا تأخذونا علي التعبيرات
نبدئ بفتح عمل جديد علي برنامج الفوتوشب بالمقاس التالي :
960 × 900 بيكسل.
و طبعا تقدر تغير الحجم حسب اختيارك و نقوم بتحديد لون الخلفية حسب الاختيار
و يمكنك استخدام اللون المستخدم في الدرس
ثم نقوم بتحميل مجموعة الباترن الي برابط تحت
لتحميل الباترن
بعد تحميل الباترن نقوم بعمل طبقة جديدة ثم نقوم بكسوة الطبقة بأحد الانماط الموجودة بالمجموعة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 116](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/116.jpg)
بعد ان قمنا بتعبأة الطبقة بالباترن نحصل علي هذه النتيحة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 216](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/216.jpg)
نقوم بتغير مود الطبقة الي overlay
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 313](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/313.jpg)
بستخدام اداة المستطيل سنقوم بعمل اشكال بمقاسات مختلفة و نوزعها كما بالشكل
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 412](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/412.jpg)
نقوم بعمل ستايلات مميزه للاشكال الي قمنا بأضافتها عن طريق دخولنا الي خصائص الطبقات
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 54](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/54.jpg)
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 64](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/64.jpg)
و هذه النتيجة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 74](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/74.jpg)
نقم بتغير استايلات الاشكال الاربعة التي بالمنتصف بهذه الاعدادت
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 84](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/84.jpg)
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 94](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/94.jpg)
و نحصل على هذه النتيجة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 104](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/104.jpg)
يمكننا عمل مضاعفة من الشكل البرتقالي الكبير الي بالمنتصف و بتقليل حجمة بالتساوي من جميع الاطراف
و تغطيتة بالنمط الرمادي السابق نحصل علي هالنتيجة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 117](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/117.jpg)
نستخدام مجموعة ايقومات الـ png لاضافة روح جمالية للتصميم
نقوم بفتح الايقومات عن طريق الفوتوشوب ووضعها في مكانها المناسب حسب الحاجة
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 124](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/124.jpg)
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 134](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/134.jpg)
بستخدام اداة الكتابة نقوم بكتابة الروابط و الاختصارات الخاصة بالتصميم
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 144](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/144.jpg)
نقوم بأضافة صورة تجميلة اخرى في اسفل الصندوق كاضافة جمالية
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 154](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/154.jpg)
سنقوم بعمل طبقة جديدة فوق الطبقة الثانية التي قمنا بتعبئتها بالباترن و بستخدام فرشة كبيرة جدا و بالون الابيض نقوم بعمل التأثير وسط الصفحة زي التالي
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 164](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/164.jpg)
و بنحديد مود Soft light للطبقة نحصل علي الشكل التالي
![تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة 175-500x468](https://2img.net/h/www.grafpedia.com/wp-content/uploads/2009/06/175-500x468.jpg)
ان شاء الله ايكون الدرس سهل و ما تكون فيه اي صعوبة عليكم بأذن الله تعالى
و اي استفسار انا جاهز ... لتوضيح اي خطوة للاعضاء الكرام
iraqnt- إدارة الموقع
رد: تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة
شكرا على الموضوع المفيد جدا
نتمنى دوم هذا الابداع
نتمنى دوم هذا الابداع
زمردة الشرق- عضـو جديـد
وليد الأمين- عضـو نشـيــــط
رد: تصميم واجهة موقع احترافية بالفوتوشب .. شرح مبسط جدا :: ترجمة
شكرا لمروركم الراقي يا عسل
iraqnt- إدارة الموقع
مواضيع ذات صلة
شبكة عراق نت :: الاقسام العامة :: تقنيات التطوير والجرافيك | Tips & Tricks and Graphic Design :: التصميم والجرافيك
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى