• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش طراحی فرم ثبت نام مشکی ساده در فتوشاپ

11844 ۹ مرداد ۹۲

سلام دوستان قصد دارم در این پست و پست بعدی که ادامه ی این هست باهم یک فرم ثبت نام زیبا درست کنیم و تبدیل به کدش کنیم امیدوارم مفید باشه براتون .

نتیجه ی نهایی

http://www.7learn.com/wp-content/uploads/2013/07/dark-simple-contact-form-final.jpg

قدم اول : یک صفحه جدید در سایز 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  آنرا سیاه و سفید کنید.حال خود دکمه را نیز قرور رفته نمایش می دهیم بر روی لایه ی  مستطیل گوشه گرد دکمه ی چپ رفته و تغییرات زیر را اعمال کنید.

تبریک می گم شما تونستید به نتیجه ی کار برسید ! انشالله در جلسه ی آتی این فرم را به کد تبدیل می کنیم.

دانلود فایل فتوشاپ نسخه فارسی این قالب

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 17 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام.
    چرا توی نسخه فارسی لایه Lock رو قفل کردین؟
    و نمیشه پاکش کرد.

    • ‏‏
      محمدسینا معراجیان(۱۱ مرداد ۱۳۹۲)

      اون کپی رایت هست شما اون لایه رو آف کنید برای نمایش

  • ‏‏

    با سلام من نوشته شما در مورد ارسال اطلاعات فرم را مطالعه کردم.
    کدی که شما دادید را باید کجای دستور بزارم. ممنون لطفا با مثال توضیح دهید

  • ‏‏

    این چ نوع آموزش دادنیه؟؟؟؟؟؟؟؟؟؟؟؟؟؟ هااااااااااااااا؟؟؟؟؟ 😥

  • ‏‏

    سلام لطفا کد این فرم را هم بذارید ممنون

  • ‏‏

    سلام.خواهش میکنم کد این فرم رو هم بذارید سریع تر 😥

  • ‏‏

    سلام دوست عزیز
    من یه پروژه دارم به زبان جاوا اسکریپت
    3تا فیلد دارم یکی روز دومی ماه و سومی سال می خواستم بدونم چجوری میشه اتومات که کاربر فیلد روز زو که پر کرد بره رو فیله دومی و سومی و …
    ممنون میشم سریع تر جواب بدین چون خیلی کارم گیره

    • ‏‏
      کیوان علی محمدی(۵ شهریور ۱۳۹۲)

      سلام اینکار به راحتی با ایجکس امکان پذیره.

  • ‏‏

    سلام .پس چرا کد این فرم رو نمی ذارین؟؟؟؟؟؟؟؟؟؟ 😥 😕 :sad: 😡

    • ‏‏
      محمدسینا معراجیان(۳ شهریور ۱۳۹۲)

      انشالله در یکی دوروز آینده دوست عزیز

  • ‏‏

    مشکل اینه که من با زبون ایجکس کار نکردم و نمیدونم چجوریه
    به زبون جاوا اسکریپت بلدین؟
    همین کدشو بزارین
    دیگه کم کم داره آخره شهریور میشه پروژم واسه این قطعه کدگیره!!!
    کمک کنید خاهشن

  • ‏‏

    پروژم یه فرمه ثبت نام
    یه بخشی هست ماله تاریخ تولد که سه تا تکست فیلد داره : روز ماه سال
    میخام این تکست فیلده روز رو که کاربر پر میکنه بطوره خودکار بره رو تکست فیلده ماه و بعدیش سال و تکست فیل پایینیش
    همچین کاری رو توی این پرداخت اینترنتی بانکا هست که شماره حساب رو میزنی بطوره خودکار میره تکست فیلده بعدی

    • ‏‏
      کیوان علی محمدی(۱۰ شهریور ۱۳۹۲)

      سلام می تونید از متد focus توی جی کوئری استفاده کنید.

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram