LoginSignup
9
5

More than 5 years have passed since last update.

@NaokiIshimura(Naoki Ishimura)

SketchでBootstorapを利用したWEBサイトのデザインを作成する

Posted at

sketch_bootstrap_1.png

事前準備

bootstrap-3-guiを開く

Bootstrap 3 UI Kitからダウンロードしたbootstrap-3-gui-kit.zipを解凍する
フォルダ内のbootstrap-3-guiをダブルクリックしてSketchを起動する

sketch_bootstrap_3.png

Pageを追加する

Page1にはBootstrapのテンプレートが格納されているため、作業用のPageを追加する

sketch_bootstrap_5.png

sketch_bootstrap_6.png

Artboardを作成する

作業用のPageにArtboardを作成する

sketch_bootstrap_7.png

sketch_bootstrap_8.png

sketch_bootstrap_9.png

デザインを作成する

Page1のテンプレートを作業用Pageにコピー＆編集してWEBサイトのデザインを作成する

sketch_bootstrap_10.png

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
5