شرح تصميم واجهة موقع للهواتف المحموله







درس مترجم اخر .. ولكن بلهجة أخرى أيضاً واجهة موقع للهواتف المحموله (موبيلات)

مثال :

اضغط علي الصورة للرؤية بشكل مكبر

يلا ياباشا معايا وثيقه جديده , مقاس 760 × 770 بيكسل الباكجروند أبيض .. الخلفيه يعنى اختر أداة Rectangle Tool ومعايا كده اعمل الشكلين دولا :

بعد كده .. ظبط كده وحط القيم اللى هتشوفها دى فى ستايل الطبقه layer styles للشكل الاول اللى فوق اللى فوووووق .. علشان اللى تحت هنعمله قيم تانيه . :

خلصت الشكل اللى فوق ؟ .. طيب يلا بقى نظبط اللى تحت .. نفس القيم دى :

النتيجة :

دلوقتى اعمل شكل تانى زى ما انا عملت كده :

ركز بقى يا عسل روح على Edit > Transform Path> Warp وحط القيم دى :

خلى بالك .. انت لو معندكشى أداة الـ Warp Tool انت ممكن تعمل نفس الشكل بأداة الــPen Tool المهم كده او كده الصورة هتطلع معاك بالشكل ده :

تمام كده ؟ طيب دلوقتى بقى ركز معايا اسحب اللير ده وخليها فوق طبيقه الخلفيه (خد بالك انا شويه بقول لير وشويه بقول طبقه والاتنين واحد):

يلا بينا بقى على الفلتر روح على Filter > Blur > Gaussian Blur وظبط بقى بالقيم اللى هتشوفها دى بعد ما تحط القيم هتظهر رساله اديها اوكشن :

غير بقى غير شفافيه الطبقه لــ 50% (Opacity) :

ضاعف بقى الطبقه .. عارف ازاى ؟.. اقولك انا دوس على ( press CTRL+J ), وبأداة التحريك حرك الطبقه المضاعفه وحطها فى أسفل الشكل التانى :

دلوقتى بأداة الـ Rectangle tool اعمل شكل تانى وحطه زى ما انت شايف كده :

مع الطبقه المختاره روح بقى على Edit > transform path > Warp وحـــــــــــط القيم دى :

اديها انتر Enter ورووووووووووح مره تانيه على Edit > Transform > warp بس المره دى هتحرك الزوايا يدويا يامعلم :

ادعس تانى على انتر لما تشوف النتيجه الجميله بتاعتك (ملحوظه ادعس من الدعوسه والدعوسه كلمة خليجية او معرفشى منين بالظبط ما علينا ) ده الشكل المعدل اللى طلع عندى :

يلا بقى ضاعف الشكل ده برضه بالضغط على ( CTRL+J ) وروووووووووووح على Edit > transform path > flip Horizontal :

غير ستايل الطبقه للشكل ده بالقيم اللى انت شايفها دى :

ودى النتيجه : ... هى عندك غير كده ولا ايه ؟

اسحب الطبقه وخليها فوق طبقه الخلفيه (الباكجروند) :

ودلوقتى بواسطه أداة التحريك حاول تحرك اللير زييى كده :

وبنفس اللى عملناه اعمله على الشكل اللى تحت (الشكل الرمادى) وممكن تضاعف الشكلين .. وتحركهم زى ما انا عملت وعدل النسبه بأداة الــTransform tool ( CTRL+T

اختر الطبقه دى "الرماديه" وبأداة الـ warp tool حاول تعدل الشكل بالظبط زى ما انا عملت :

متنساش تضرب انتر (تدوس انتر يعنى ) ودلوقتى يا حبيب قلبى هوريك ازاى تضيف شويه ظل حلوين كده (زيك بالظبط) اختر أداة الـ Pen Tool واعمل شكل بسيط زى ده :

اسحب الشكل اللى عملته ده خليه تحت الشكل الرمادى :

دلوقتى لازم ترووووح لـــ Filter > Blur > Gaussian blur وتظبط القيمه تخليها ما بين 4 و 8 .. وفى نفس الوقت ممكن تقلل الشفافيه للطبقه دى لــ 50 % :

واعمل نقس الشغلانه دى للجزء العلوى من الواجهه بتاعتك:

دلوقتى بقى اعملك طبقه فى اعلى كل الطبقات , و بأداة الـ Marquee tool اعمل شكل مربع زى ما انت شايف كده :

امسكلك بقى فرشاه كده بتاعت حوالى 300 بيكسل :

بالفرشه دى حط نقطه واحده بس جوه الشكل اللى احنا لسه عملينه :

قلل شفافية الطبقه دى لـ 40% بأداة الـ Single Column marquee tool . حرك خط صغير كده فى وسط الدائرة :

إتأكد انك لسه مختار أخر طبقه . دوس بقى ديليت من الكيبوورد Delete واضغط على CTRL+D وهتشوف التأثير الجامد ده :

بعده كده بقى اختار أداة Single Row Marquee Tool واعمل خط افقى (نفس الاختيار دى لازم يكون فى وسط الفرشاه

بعد ما دعست (قصدى ضغطت) Delete و ضغطت على CTRL+D النتيجه :

دلوقتى بقى .. وقت اضافة شوية صور على شوية نصوص وممكن شوية أيكونات , ده شكل بسيط جداً أنا اعتقد ان كل واحد ممكن يكمل المهمه دى لوحده :

دلوقتى بقى هنعمل كمان شكلين 2 shapes بأداة الــ Rounded rectangle tool ظبط نص القطر لـ 2 بيكسل :

واختر الطبقتين من باليتة الطبقات layer palette واضغط CTRL+E كده دمجنا الطبقتين بقوا طبقه واحده . اختر أداة الـ Elliptical marquee tool واعمل زى ما انا عملت

دلوقتى اضغط على مفتاح ديليت delete من لوحة المفاتيح وبعدين اضغط CTRL+D

ودلوقتى ظبط بقى اللير ستايل layer styles :

ودى النتيجة بتاعتى :

وبعد كده .. كمــــــــــــان لير جديد .. بأداة الـ brush tool اختر soft mechanical 200 pixels brush يعنى بإختصار فرشاة 200 بيكسل . واعمل زى ما انا عملت بالظبط :

تعبت انت ها ؟ .. لازم تتعب منا بتصمم واجهة موقع .. يعنى مش صورة والسلام ده انا بترجم الدرس وتعتب .. على أى حال هاااااااااااااااااااااانت قلل قيمة الشفافية للطبقه دى لــ 30 أو 40 % وبعدين بأداة Single row marquee tool وأداة Single Column Marquee Tool امسح شوة اجزاء من الطبقة دى النتيجة :

لو انت بقى ياباشا فضولى (رزل يعنى) وعايز تعرف ازاى الخطوط بتاعتى طلعت بالشكل ده يبقى بدل ما تضغط مفتاح Delete انت ممكن تستعمل أداة الممحاة Eraser مع فرشاة مصقوله مستديرة .. ... الخطوة اللى هتعملها يا معلم يتضيف شوية تفاصيل تانيه على العنوان الرئيسى انا ضفت شوية نصوص وفرش وكمان شوية تفاصيل كده على طبقه جديده وده النتيجه النهائية :

انتهي


http://www.traidnt.net/vb/traidnt1902178


  :