سلام دوستان قصد دارم در این پست و پست بعدی که ادامه ی این هست باهم یک فرم ثبت نام زیبا درست کنیم و تبدیل به کدش کنیم امیدوارم مفید باشه براتون .
نتیجه ی نهایی
قدم اول : یک صفحه جدید در سایز 800 در 600 بسازید و آنرا ذخیره کنید.
رنگ جلویی را #111111 قرار دهید و alt + backspace را فشار دهید تا رنگ پیش زمینه صفحه با رنگ دلخواهمان پر شود.
قدم دوم : یک لایه ی جدید ایجاد کنید و آنرا noise بنامید دوباره alt + backspace را بفشارید تا این لایه هم با همان رنگ پرشود.
حالا به Filter>Noise>Add Noise برید و مقدار نویز رو به 2 تغییر بدید و تیک monochromati را نیز بزنید.سپس شفافیت لایه رو به 50% کاهش بدید.
قدم سوم : یک مستطیل گوشه گرد با شعاع 10 پیکسل و اندازه ی 500 در 400 واحد ایجاد کنید.نگران رنگش نباشید به زودی استایل این را نیز درست خواهیم کرد.این لایه را form بنامید.
دوبار بر روی لایه ی form کلیک کنید و این تنظیمات را در layer style انجام دهید سپس تایید کنید.
قدم چهارم : ناحیه ی لایه را بوسیله ی ctrl + کلیک بر روی لایه انتخاب کنید
حالا ابزار انتخاب مستطیل شکل را انتخاب کنید یا M را بفشارید تا انتخاب شود حالا shift + alt را بفشاری میبینید که نشانگر ماوستان تغییر می کند حال یک مستطیل بالای مستطیل خودتان مانند شکل بکشید.
میبینید که ناحیه انتخابی شما از مستطیل انتخاب شده است.
قدم پنجم : یک لایه ی جدید ایجاد کنید و با هر رنگی که می خواهید ناحیه ی انتخابی را با استفاده از alt+backspace در این لایه پر کنید سپس با دوبار کلیک برروی لایه layer style را باز کنید و این تغییرات را ایجاد کنید درضمن لایه را نیز header بنامید.
فرم ما حالا باید این شکلی باشد.
حال چند خط راهنما برای سادگی ادامه ی کار ایجاد می کنیم.
قدم ششم : یک مستطیل گوشه گرد با شعاع 10پیکسل مانند شکل ایجاد کنید و این تنظیمات را انجام دهید.
متنی با رنگ #444444 ایجاد کنید و با مستطیل قبلی در یک گروه قرار دهید و تنظیمات زیر را برای مستطیل گوشه گرد اعمال کنید.
برای جعبه ی پسورد من بالت ( bullet ) قرار داده ام . تایپ بالت کمی حیله گرانه است کافی است alt+0149 را بزنید نتیجه ی نهایی مانند شکل زیر است.
قدم هفتم : بیایید یک دکمه ی تایید زیبا ایجاد کنیم.یک مستطیل گوشه گرد با شعاع 20 پیکسل و اندازه ی 150پیکسل عرض و 50پیکسل ارتفاع ایجاد کنید.
تغییرات زیر را در لایه اش اعمال کنید.
نوشته را باگردینت(طیف) طوسی به سفید ایجاد کنید و سایه نیز بیندازید.من از فونت ‘Myriad pro’ استفاده کرده ام و آنرا کمی بولد ( bold ) کرده ام.شما آزادید که از هر فونتی استفاده کنید.
قدم هشتم :
عکس بالا را ذخیره کنید و به اندازه ی مورد نیازتان تبدیلش کنید ( می توانید از ctrl + t استفاده کنید ) تا نهایتا به شکل زیر برسید.
تمام اجزای دکمه ( مستطیل – دایره سبز – متن ) را در یک گروه قرار دهید . حال بیایید حالت رفتن ماوس روی دکمه را نیز ایجاد کنیم ( hover ) . بر روی گروه کلیک راست کنید و گزینه ی Duplicate را انتخاب کنید میبینید که کپی ای از گروهمان ایجاد شد گروه جدید را کمی چپ تر قرار دهید.لایه ی دایره ی سبز موجود در گروه سمت راست را انتخاب کنید و به وسیله ی image>adjusment>desaturate آنرا سیاه و سفید کنید.حال خود دکمه را نیز قرور رفته نمایش می دهیم بر روی لایه ی مستطیل گوشه گرد دکمه ی چپ رفته و تغییرات زیر را اعمال کنید.
تبریک می گم شما تونستید به نتیجه ی کار برسید ! انشالله در جلسه ی آتی این فرم را به کد تبدیل می کنیم.
امیدوارم این آموزش مورد پسند شما کاربران واقع شده باشد.
دیدگاهتان را بنویسید