Tampilkan postingan dengan label desain. Tampilkan semua postingan

Sabtu, 19 Juni 2021

50 TOOLS CORELDRAW DAN FUNGSINYA

Tool adalah alat yang digunakan pada perangkat lunak agar memudahkan dalam menggunakanya.Berikut ini merupakan contoh nama-nama tool yang ada pada CorelDraw.

1.Freehand

membuat garis

2.Polyline

untuk membuat garis lurus

3.Bezier

untuk membengkokan garis

4.Pen

membuat garis dengan maksud membuat objek

5.2Point-line

membuat garis perobjek

6.B-Spline

untuk membengkokan suatu garis berdasarkan patahan node

7.3-Poin-Curve

untuk membuat bengkokan sederhana tanpa memanipulasi node

8.SmartDrawing

untuk mengenali bentuk yang digambar lurus dan bengkokan

9.Artistic Media

diguanakan untuk membuat kaligrafi dan pengaturan

10.Kaligrafi

digunakan untuk membuat garis atau objek yang berkaligrafi pada garisnya

11.Kaligrafi Angle

untuk membengkokan garis Kaligrafi

12.Outline

untuk mengatur ketebalan dan gaya dari suatu garis atau objek

13.Object

untuk membuat objek

14.Convert outline to object

menjadikan outline ke objek

15.Brush

untuk membuat garis yang seakan akan dibuat oleh kuas

16.Brush Stroke

untuk mengatur ketebalan dari warna kuas

17.Save Artistic Media Stroke

untuk menyimpan pengaturan kuas

18.Sprayer

untuk membuat garis atau objek seperti sebuah semprotan

19.Rotation

untuk memutas posisi garis atau objek

20.Straight-line Connector

membuat konektor lurus pada setiap Angle

21.Right-angle Connector

membuat konektor kanan pada angle

22.Rounded right-connector

membuat garis konektor yang membengkok ke kanan angle

23.3-poin rectangle

untuk menggambarkan sebuah persegi berdasarkan tinggi dan lebar

24.Rectangle

membuat objek berbentuk kotak atau persegi panajang

25.Rectangle + Ctrl

untuk membuat persegi

26.Round corner

untuk membengkokan ujung objek

27.Scalloped corner

membuat bengkokan kedalam

28.Chamfered corner

membuat potongan pada bengkokan

29.3Point Eclipse

membuat bentuk bulan sabit dengan 3 node

30.Poligon

untuk membuat objek Poligon

31.Shape

untuk mengunbah bengkokan atau garis di suatu objek

32.Sharpness

untuk menajamkan sisi suatu objek

33.Spiral

membuat objek seperti obat nyamuk/ spiral

34.Arrow shape

membuat objek berupa panah

35.Falowchart Shepe

membuat objek-objek yang sering digunakan untuk flowchart(Diagram alur)

36.Banner Shape

membuat objek berupa Banner

37.Cllout Shape

membuat objek berbentuk pesan

38.Basic Sahpe

membuat objek-objek dalam bentuk yang sederhana

39.Text Tool

membuat kata(text)

40.Close Curve

mengakhoro node pada suatu subpart

41.Cusp node

membengkokan node menjadi terlihat tajam

42.Smooth node

membuat node akan-akan tumpul

43.Simmetrical node

membuat node yang seimbang

44.Smugle

membuat objek seakan-akan terusap atau ternoda

45.Smear

membuat objek seakan akan dibaluri

46.Roughen Tool

membuat objek seakan-akan dicabik-cabik

47.Distort Tool

memutar balik suatu objek atau garis

48.Twirl Tool

membuat objek seakan -akan berputar

49.Envelope-Tool

membuat objek seperti amplop

50.Crop tool

untkuk memotong suatu objek yang dipilih

Jumat, 28 Mei 2021

Cara Membuat Responsive Website

Responsive Website adalah website yang bisa beradapatasi dengan semua perangkat dengan berbagai macam luas screen. Sebelumnya saya harap pembaca sudah mengenal html dan css, karena kita akan membuat responsive website ini dengan HTML dan CSS.

»Menggunakan viewport pada HTML

Penggunaan viewport untuk melihat luas dari halaman website. Karena terkadang dalam suatu website memiliki luas yang tetap dan tidak muat pada layar yang kecil. Layar yang kecil ini dimaksud layar pada tablet atau handphone yang mengunjungi website.

tampilan dekstop

tampilan handphone

Alangkah lebih indah dan bagus bila menyesuaikan tampilan pada tiap layar baik layar pada handphone, tablet maupun yang lebih besar dari itu.

viewport dipasang pada tag header dalam suatu tag meta. sebagai contoh yakni

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ini akan menyatakan lebar sebuah layar perangkat.

»Menggunakan @media pada CSS

Media query ini memberi kemampuan browser untuk menggunakan css yang berbeda pada tiap lebar layar atau perangkat dan spesifikasinya agar menggunakan gaya yang sesuai.Contoh penggunaan @media yakni:

@media screen and (min-width: 800px) and (max-width: 1024px) {
   body {
     background-color: green;
 }
}

pada kode css diatas menjelaskan tentang minimal lebar layar 800 piksel dan maksimal lebar layar 1024 piksel menggunakan warna background hijau.

Saya akan memberikan sebuah landing page yang menggunakan responsive desain ini.Kamu tinggal menyalin dan menempelnya pada suatu file baru dan menyimpanya dalam nama file responsive.html.


<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ini contoh halaman responsive</title>
  <style>
   header {
    color: #FFFFFF;
    background-color: #284b63;
    padding: 80px 0;
    text-align: right;
    width: 100%;
   }
   section {
    padding: 40px 0;
    text-align: center;
   }
.main {
    background: #FFFFFF;
    color: #000000;
    width: 75%;
    float: left;
   }
   .navigasi {
    background: #549da0;
    color: #FFFFFF;
    width: 25%;
    float: right;
   }
   footer {
    background: #353535;
    padding: 32px 0;
    text-align: center;
    color: #868686;
   }
@media screen and (max-width:600px){
    .main {
     width:100%;
     float:none;
    }
    .navigasi {
     width:100%;
     float:none;
    }
   }
</style>
 </head>
 <body>

  <header>
   Header
</header>

  <section class="main">
   Main
  </section>

  <section class="navigasi">
   Navigasi
  </section>

  <footer>
    footer
  </footer>
 </body>
</html>

Kode diatas akan berubah sesuai tampilan layar. Bila pengunjung menggunakan laptop atau komputer maka navigasi akan sejajar posisinya dengan main, bila dengan handphone maka navigasi akan ad adi bawah main.Untuk mendesain tampilan layar handphone atau biasanya tidak lebih dari 600piksel kita bisa menyetingya pada blok media kueri yang ada di bagian @media. Mudah bukan?Sekarang tampilan apapun pada perangkat apapun bisa kita perindah sesuai dengan ukuran layar perangkat yang mengunjungi website kita.

Jumat, 14 Mei 2021

Persiapan Menjadi Web Designer

Memang tak disangkal selain programmer, desainer juga sangat berperan untuk performa suatu website atau blog. Dengan template yang ciamik dan link-link navigasi yang posisinya mantap menjadikan suatu blog atau website eye-chatching (enak dilihat oleh mata). Juga tak diragukan gaji dari seorang desainer website sama dengan gaji programmer yang notabenenya bekerja pada bagian backend yang bekerja keras dalam proses logika yang berjalan pada suatu applikasi website.

Bagaimana mengukur kemampuan seseorang desainer web sehingga handal untuk melakukan tugasnya sebagai fontend. Hal-hal yang harus dipahami untuk menjadi web desainer yakni:

Menguasai Bahasa-bahasa dan Dasar Pembangunan Website

Dasar-dasar yang sering dibuat untuk membuat website yakni

HTML /HTML5

HTML merupakan singkatan dari Hyper Text Markup Language. Ini bukan sebuah bahasa pemrograman karena HTML adalah Markup Language jadi jangan disalah artikan. Minimal kerangka dari sebuah website biasanya terdapa tag html,head, title dan body. Sedangkan HTML5 merupakan versi terbaru dari HTML. HTML5 memiliki pembaharuan yakni kerjasama antara World Wide Web Consortium (W3C) dan the Web Hypertext Application Technology Working Group (WHATWG). WHATWG ini bekerja dengan formulir dan applikasi sehingga menjadi lebih terkesan dinamik sehingga bisa membuat game sederhana denganya.

Javascript

Javasvript adalah bahasa skripting paling populer di internet, dan bisa dijalankan di hampir semua browser. Pada akhir-akhir tahun ini justru dengan javascript kita bisa melakukan semua aktifitas baik backend maupun frontend dengan menggunakan framework seperti VueJs,NodeJs,ReactJs dan sebagainya. Menggunakan Javascript pada website memberikan tambahan interaktif dan membuat tampilan website menjadi lebih dinamik.Dengan catatan bila pengguna dikhususkan pada daerah yanh sulit koneksi internet atau internet yang lambat lebih baik tidak menggunakan framework js ini. Ini akan memberi waktu yang tambahan untuk memuat halaman.

XML

XML singkatan dari EXtensible Markup Language. Ia memiliki kemiripan yang sama dengan HTML untuk markup language. Dan penggunaan utama XML yakni untuk membawa data.Tetapi yang banyak dipakai sekarang dalam kegiatan programming adalah AJAX. Bila kamu sudah mengerti XML dan Javascript maka tidak akan bingung dengan skrip AJAX.

CSS

CSS merupakan kependekan kata dari Cascading Style Sheets. CSS sendiri digunakan untuk bagaimana cara menampilkan element HTML.Biasanya CSS juga biasanya disimpan di file yang lain.

TypeScript

TypeScript merupakan bahasa yang baru (dipopulerkan) untuk komputer. TypeScript dikembangkan dan dirawat oleh Microsoft. TypeScript ini mirip sekali dengan Javascript.Karena TypeScript merupakan bahasa pemrograman yang dibuat dengan javascript. Sehingga bila sudah memahami Javascript maka TypeScript juga akan mudah dipahami. TypeScript dikembangkan untuk membuat applikasi yang besar dan transcompile ke Javascript.

Mahir Menggunakan Software Visual Editor

Mengapa poin ini juga saya cantumkan karena dengan menggambar sketsa dimana nanti bisa dijadikan kerangka website. Sehingga mempermudah membuat kodinganya.Software yang bisa dikuasai yakni photoshop atau GIMP, Coreldraw atau Inkscape dan sebagainya. Bila kamu belum bisa menggunakan salah satu dari software tadi akan menjadi hal yang cukup rumit untuk mendisain sebuah websitenya.

Jiwa Seni

Saya yakin jika kamu mempunyai jiwa seni yang memang dimiliki para disainer pasti karya kamu akan jadi sangat menakjubkan. Kalau desain kamu sudah selesai, bolehkah saya lihat? Mungkin saya akan memintamu untuk mendisain punya saya juga.

YoeManTech